CSP error with SVG referencing external stylesheet in dynamic iframe
Categories
(Core :: DOM: Security, defect)
Tracking
()
People
(Reporter: siredgarbones, Unassigned)
Details
Attachments
(1 file, 1 obsolete file)
|
2.33 KB,
application/octet-stream
|
Details |
Steps to reproduce:
I'm trying to dynamically create an iFrame with a CSP policy, that allows executing scripts and loading styles. One script is fetching an svg image file which dynamically loads a CSS file with some styles using the following line: @import url(forms.css);
But in Firefox there is always an error message from the CSP.
In another environment (but with similar code) the error is that .../forms.css has been blocked by the CSP ("style-src").
Steps to Reproduce:
- Have a webserver on localhost that is listening on port 8080 or replace all occurrences of "localhost:8080" in the attached files
- Open localhost:8080/main.html
- Look at browser console (F12 -> Console)
Actual results:
There is an error from the CSP:
Content Security Policy: Die Einstellungen der Seite haben das Laden einer Ressource auf http://localhost:8080/forms.svg blockiert ("default-src").
Didn't manage to change the devtools to english, so the translation would be:
Content Security Policy: The page's settings blocked the loading of a resource at localhost:8080/forms.svg ("default-src")
Expected results:
It should load the svg file and also the stylesheet it is containing by writing their contents into the browser console.
I'm using Firefox 102 ESR, but the same appeared with Firefox 108.
There are no complaints about CSP in Chrome 109 though.
|
||
Comment 1•1 year ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::DOM: Security' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
|
||
Comment 2•1 year ago
|
||
The attached testcase is broken, and when I tried to fix it does not demonstrate a problem. What is the CSP sent from the real server? The csp= attribute in the iframe element does nothing in Firefox. It's part of the experimental "CSP Embedded Enforcement" feature that asks the browser to abort loading a document if it's not served with that CSP, but it doesn't itself impose that CSP for security reasons. So the framed page has to be served with a CSP, and we need to know what it is to diagnose this.
You can't use content inside the <iframe></iframe> tags. The fact you can put stuff there is a historical quirk: it's fallback content for browsers that didn't support <iframe> when it was first invented. In modern browsers everyone supports <iframe> so that content is always ignored. Therefore the onload handler isn't defined and fails
|
|
||
Updated•1 year ago
|
|
|
||
Comment 3•1 year ago
|
||
The csp= attribute does nothing because Firefox does not support the proposed "CSP Embedded Enforcement" feature.
If the server replied with the CSP you showed in that attribute then your content should have loaded without error. But CSPEE allows a server to reply with a CSP that is more strict than the page requires. Or if you're only testing in browsers without CSPEE support then the server could be responding with any CSP at all.
|
Reporter | |
Comment 4•1 year ago
|
||
Hi Daniel,
thanks for your quick response!
I didn't know that the embedded CSP feature isn't supported by Firefox.
I want to make it possible to dynamically insert an SVG image (with dynamic style sheets) into an iframe.
The provided example didn't match the actual code, so I will update it in the next few days.
This is an excerpt of what the updated code will look like:
var iframe = document.createElement("iframe"),
var htmlDoc = '<!DOCTYPE html><html><head>';
htmlDoc += '<meta http-equiv="Content-Security-Policy" content="csp=default-src ...; style-src 'self'...">'
// This script loads an SVG image and appends to the document's body
// The SVG image dynamically loads its style sheet
htmlDoc += '<script language="javascript" src="/myWrapper.js" nonce="xyz"></script>'
htmlDoc += '</head><body>';
...
iframe.srcdoc = htmlDoc;
document.getElementById('iFrameContainer').appendChild(iframe);
Can this work?
Best regards
Julian
|
|
Reporter | |
Comment 5•1 year ago
|
||
|
|
Reporter | |
Updated•1 year ago
|
|
|
Reporter | |
Comment 6•1 year ago
|
||
Hi,
I have attached an updated example (Firefox-CSP-Error-updated.zip) with which the original CSP problem can be reproduced.
The steps are the same as in the first comment:
- Put the files into a server directory running on localhost:8080
- Open http://localhost:8080/main.html
In Firefox, the error is:
Content Security Policy: Die Einstellungen der Seite haben das Laden einer Ressource auf http://localhost:8080/forms.css blockiert ("style-src").
As said in the beginning, there is no error in Chrome 110.0.
Best regards
Julian
|
|
||
Comment 7•1 year ago
|
||
The severity field is not set for this bug.
:freddy, could you have a look please?
For more information, please visit auto_nag documentation.
|
||
Comment 8•1 year ago
|
||
Hey,
Looking at the test case, I can confirm that this is a Firefox bug.
It looks like this is the same as bug 1819096, which is breaking more websites than we originally thought. We are releasing Firefox 110.0.1 today to address this CSP bug.
Thank you for reporting this to us!
|
|
Reporter | |
Comment 9•1 year ago
|
||
Thank you for the quick responses!
Description
•