1675832 - SVG <animate> breaks without 'unsafe-inline' in CSP

Status: RESOLVED DUPLICATE of bug 1459872

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

Description

[Sam Bull]

Attachment: endnote-click-intro-gator.svg

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:82.0) Gecko/20100101 Firefox/82.0

Steps to reproduce:

When viewing an SVG image that makes use of <animate> tags, those animations fail with CSP violations unless 'unsafe-inline' is included.

Actual results:

<animate> animations don't play.

Expected results:

The full SVG animation should play.

Most confusing to me, is that <animateTransform> is allowed.

So, when viewing the attached animation (also shown at https://kopernio.com/static/images/home-page/endnote-click-intro-gator.svg), things still move around in the first half of the animation, but none of the opacity transitions happen.

Comment 1

[Daniel Veditz [:dveditz]]

Attachment: testcase WITH a CSP

The previous attachment has no CSP so doesn't really show the problem. This version does, and has two copies of the testcase. One is loaded from the site mentioned in comment 0 as an <img> and works great. The second is a verbatim copy as an inline <svg> and shows the problem the reporter is talking about. If you make the page narrow you can see them running in parallel and see which parts work and which don't.

I did not test serving this SVG with HTTP CSP headers, but it would be worth checking as a full-page SVG document and as an HTML IMG to see how it's affected in those forms, too.

Needless to say there's no literal <style> or style= in this SVG so this is definitely buggy.

Comment 2

[Daniel Veditz [:dveditz]]

Jonathan: any ideas here? is the <animate> tag implemented on top of CSS and the CSP checks in CSS don't know the source?

Comment 3

[Sam Bull]

My testing was with HTTP headers (which is why I didn't think of attaching a complete web page), and the results are the same as you report.
We should be removing 'unsafe-inline' from the linked website tomorrow, so you'll be able to see it for yourself there.

Comment 4

[Sam Bull]

I forgot to mention that our site has been updated, so you can see with HTTP headers at:
https://kopernio.com/static/images/home-page/endnote-click-intro-gator.svg

You'll see the transforms happening as mentioned previously, but none of the opacity changes work (compare with the home page where it is loaded as an <img> https://kopernio.com).