Open Bug 1459872 Opened 7 years ago Updated 1 year ago

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

Categories

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

Product:
Core
Component:
DOM: Security
Type:
defect

Tracking

()

People

(Reporter: mailenm, Unassigned)

References

(Blocks 2 open bugs)

Details

(Keywords: parity-chrome, Whiteboard: [domsecurity-backlog2])

Attachments

(1 file)

csp-error.html
(deleted), text/html
Details
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.
Priority: -- → P2
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>
Status: UNCONFIRMED → NEW
Component: SVG → Security
Ever confirmed: true
OS: Unspecified → All
Hardware: Unspecified → All
Version: 59 Branch → Trunk
Attached file csp-error.html (deleted) —

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

Has STR: --- → yes
Keywords: parity-chrome
Component: Security → DOM: Security

Apparently this is intentional. See discussions in bug 763879.

Blocks: csp-w3c-3
Priority: P2 → P3
Whiteboard: [domsecurity-backlog1]

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.

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

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.

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.

Severity: normal → S3

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

Blocks: 1806276
Whiteboard: [domsecurity-backlog1]
See Also: → https://bugzilla.mozilla.org/show_bug.cgi?id=1262842
Whiteboard: [domsecurity-backlog2]
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: