1358106 - SVG foreignObject doesn't display images with inlined styles when CSP is enabled

Status: UNCONFIRMED

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

Description

[Andrey Roenko]

Attachment: firefox.foreignObject.csp.html

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 YaBrowser/17.3.1.814 (beta) Yowser/2.5 Safari/537.36

Steps to reproduce:

Take a page with style-src 'nonce-...' CSP.
Try to load svg with foreignObject with inlined styles.

(https://gist.github.com/flapenguin/3b6045c9e81e7a95e0ea7cf9a74e9647)


Actual results:

foreignObject is empty, CSP errors about inline styles reported to console.
As far as I know there's no other way to specify styles in foreignObject.


Expected results:

foreignObject should render correctly.

I found two workarounds:
- add 'unsafe-inline' to CSP. That's not very useful, since it requires to remove 'nonce-...'. (comment/uncomment meta with CSP)
- use style tag inside of foreignObject with nonce to define styles (add/remove ?style to url)

Comment 1

[Christoph Kerschbaumer [:ckerschb]]

Thanks for reporting. Let me explain, within Firefox we use principals to define the security context. My guess is that in this case we are incorrectly inherit the principal and hence also incorrectly inherit the CSP with it, which causes Firefox to block the style. For now I have to put that in the backlog though because of resource constraints.

Comment 2

[Andrey Roenko]

Attachment: firefox.csp.svg.style.zip

There's a same problem with SVG without any foreignObject elements, but with CSS styling.
If a page doesn't have 'nonce-...' CSP source in style-src (which can be added to style element inside SVG) or 'unsafe-inline' (to set styles in elements' attribute) then it's impossible to use CSS for styling in blob: or data: SVGs.