1459872 - CSP blocks the use of <animate> tag in inline svg.

Status: NEW

(Core :: DOM: Security, defect, P3)

Description

[mailenm]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:61.0) Gecko/20100101 Firefox/61.0
Build ID: 20180503152818

Steps to reproduce:

Create svg with animation in html file:
<svg viewbox="0 0 400 400" width="10" height="10">            
   <circle class="tasks-stroke" cx="200" cy="200" r="140" transform="rotate(-90, 200, 200)" stroke-dasharray="0, 1005">
      <animate attributeName="stroke-dasharray" dur="1s" to="320,880" fill="freeze" />
  </circle>
</svg>


Actual results:

Returns CSP warning: Content Security Policy: The page’s settings blocked the loading of a resource at self (“style-src”). Source: [SVG animation of CSS].

Also this warning is created so many times that Firefox crashes.


Expected results:

I expect that the animation attribute should not be blocked, because it is not an inline style.

Comment 1

[mailenm]

I did some more research and the CSP blocks svg <animate> when you want to animate svg specific attributes. The ones I tested and triggers the CSP error are:
- fill
- stroke
- stroke-width
- stroke-dasharray

Example of CSP settings:
content-security-policy: default-src: 'none'; script-src 'self' https://www.google-analytics.com; img-src 'self' data: https://www.google-analytics.com; connect-src 'self'; media-src 'self'; frame-src 'self'; font-src 'self'; style-src 'self'; form-action 'self'; block-all-mixed-content; frame-ancestors 'self'

If you animate the "width" or "height" of an svg element, the animation runs as expected. Here 2 code snippets:

Throws CSP error:
<svg viewbox="0 0 400 400">
    <rect x="8" y="2" width="32" height="50" fill="#ccc" stroke="blue" stroke-width="2">
       <animate attributeName="fill" to="red" dur="2s" fill="freeze" /> 
    </rect>
</svg>

Animation works as expected:
<svg viewbox="0 0 400 400">
    <rect x="8" y="2" width="32" height="50" fill="#ccc" stroke="blue" stroke-width="2">
       <animate attributeName="height" to="100" dur="2s" fill="freeze" /> 
    </rect>
</svg>

Comment 2

[silverwind]

Attachment: csp-error.html

Adding standalone testcase that triggers the error and shows that some attributes may animate, while others don't.

Comment 4

[Masatoshi Kimura [:emk]]

Apparently this is intentional. See discussions in bug 763879.

Comment 5

[silverwind]

It's not matching Chromium's behaviour and I see no logical reason why a fill animation should be blocked and a height animation is fine. This has nothing to do with security, it's just weird behaviour.

Comment 7

[Daniel Veditz [:dveditz]]

Note also (from the dupe) that <animateTransform> is not blocked.

Another person emailed the security alias and complained about the performance impact of all the CSP errors that were generated. It wasn't too terrible on my machine, but also my test was only reporting errors to the console and not trying to post them somewhere over HTTP

Comment 8

[Daniel Veditz [:dveditz]]

Like the reporter of this bug they would prefer we not block, but also raised the suggestion that if we insist on blocking (see original bug 763879 discussion) we kill that <animate> so there's only one violation.

Comment 9

[Sam Bull]

While I can understand the security aspect (except for the inconsistencies in what is or is not allowed). I don't see any proposed way to do SVG animations with the restriction in place. If there was some way to load these SVGs with a hash/nonce in the CSP to allow them to work, then I'd be fine with it.

But, presently, this just makes it impossible to load an SVG with a secure CSP, unless you limit it to an arbitrary subset of features which Firefox allows, but is not documented anywhere.

Comment 10

[Daniel Veditz [:dveditz]]

Clearing backlog tag temporarily so we can consider this with bug 1806276