Closed Bug 1303364 Opened 8 years ago Closed 6 years ago

SVG <use xlink:href="external.svg"> not displayed in Firefox with a CSP that has default-src 'none'

Categories

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

Product:
Core
Component:
DOM: Security
Version:
48 Branch
Type:
defect

Tracking

()

Status:
RESOLVED INVALID

People

(Reporter: jamie.white, Assigned: freddy)

References

Details

(Whiteboard: [domsecurity-active]) 

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/601.7.8 (KHTML, like Gecko) Version/9.1.3 Safari/601.7.8

Steps to reproduce:

Live demo: https://go-web.goodyear.portal.mccannbristol.co.uk

Add content security policy:

Header always set Content-Security-Policy "default-src 'none'; script-src 'self' https://www.google-analytics.com; connect-src 'self'; frame-src 'self' https://*.youtube.com https://*.youtube-nocookie.com https://*.doubleclick.net; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://www.google-analytics.com https://stats.g.doubleclick.net; object-src 'self'; font-src 'self'; media-src 'self'; child-src 'self'; plugin-types 'image/svg+xml'; frame-ancestors 'self'"

Add SVGs to a webpage and load them, Firefox blocks them (all other browsers do not). No amount of tweaking the security policy allows Firefox to render the SVGs, we always get:

Content Security Policy: The page's settings blocked the loading of a resource at https://go-web.goodyear.portal.mccannbristol.co.uk/a/svg/global.svg ("default-src 'none'").

You can see with the CSP above that we have tried numerous things to get SVGs to load in Firefox, but have been unable to get them to load at all.

This does work with default-src 'self':

Header always set Content-Security-Policy "default-src 'self'; script-src 'self' https://www.google-analytics.com; connect-src 'self'; frame-src 'self' https://*.youtube.com https://*.youtube-nocookie.com https://*.doubleclick.net; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://www.google-analytics.com https://stats.g.doubleclick.net;"


Actual results:

Firefox cannot load the SVGs with Content-Security-Policy default-src 'none'


Expected results:

Firefox should have a way of re-enabling locally sourced SVGs when using the CSP Content-Security-Policy default-src 'none'
Component: Untriaged → DOM: Security
Product: Firefox → Core
Assignee: nobody → fbraun
Status: UNCONFIRMED → ASSIGNED
Ever confirmed: true
Priority: -- → P3
Whiteboard: [domsecurity-active]
Including SVGs via <svg><use xlink:href="foo.svg"></svg> is somehow not considered an SVG/Image load and thus governed by default-src only (instead of img-src). Investigating.
This is currently affecting a production site:

https://www.tenderstem.co.uk

We have switched off the example link above.
(In reply to Frederik Braun [:freddyb] from comment #2)
> Including SVGs via <svg><use xlink:href="foo.svg"></svg> is somehow not
> considered an SVG/Image load and thus governed by default-src only (instead
> of img-src). Investigating.

We should *not* consider <use> linking to an external document as an image load or even a frame load. In Firefox the content from foo.svg is cloned into the document *inline* in place of the <use>. This scenario doesn't seem to be covered by any of the existing CSP directives so I've filed:

https://github.com/w3c/webappsec-csp/issues/199
https://github.com/w3c/webappsec-csp/issues/198
See Also: → 878608
Summary: SVGs will not display in Firefox with a CSP that has default-src 'none' → SVG <use xlink:href="external.svg"> not displayed in Firefox with a CSP that has default-src 'none'
Just to follow up on:

https://github.com/w3c/webappsec-csp/issues/199

If you use the following PHP (to set the CSP header):

    <?php
    
        header("Content-Security-Policy: default-src 'none'; img-src 'self';");
    
    ?>
    <!DOCTYPE html>
    <html lang="en-GB" xml:lang="en-GB" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8" />
        <title>SVG Use</title>
    </head>
    <body>
    
        <svg width="230" height="120" version="1.1">
            <image x="10" y="10" width="100px" height="100px" xlink:href="./rect.svg#myShape"><title>My image</title></image>
            <use x="120" y="10" width="100px" height="100px" xlink:href="./rect.svg#myShape"></use>
        </svg>
    
    </body>
    </html>

With the associated `rect.svg`:

    <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g id="myShape">
            <rect x="0" y="0" width="100" height="100" />
        </g>
    </svg>

In Firefox 54.0a2 (Developer Edition) only the first rectangle is shown, the second rectangle results in a CSP error.

In Chrome 59.0.3062.0 (Canary), both rectangles are shown.
Issue still exists on Firefox 54.0 (Ubuntu 17.10). 

SVGs loaded via xlink:href are not considered images and blocked by default-src 'none'.
See comment 4
Status: ASSIGNED → RESOLVED
Closed: 6 years ago
Resolution: --- → INVALID

This is still an issue, but it works in Chrome. It's not clear why xlink:href is not covered by img-src, and only default-src (which is only meant to be the default?).

See Also: → 1773976
You need to log in before you can comment on or make changes to this bug.