Add documentation to cover Firefox CSP SVG sprite blocking issue#34592
Merged
chrisdavidmills merged 2 commits intomdn:mainfrom Jul 3, 2024
Merged
Add documentation to cover Firefox CSP SVG sprite blocking issue#34592chrisdavidmills merged 2 commits intomdn:mainfrom
chrisdavidmills merged 2 commits intomdn:mainfrom
Conversation
Contributor
|
Preview URLs
External URLs (4)URL:
URL:
(comment last updated: 2024-07-03 11:30:33) |
pepelsbey
approved these changes
Jul 3, 2024
Member
pepelsbey
left a comment
There was a problem hiding this comment.
Looks good! I also double-checked how Firefox treats inlined sprites: it works! It might be an alternative solution if default-src 'none' is essential to keep. What do you think?
| </svg> | ||
| ``` | ||
|
|
||
| your SVG images will be blocked in Firefox if you have a `default-src 'none'` policy set. Firefox does not treat the SVG as an embedded image like other browsers do, therefore `img-src 'self'` will not allow them to be loaded. You need to use `default-src 'self'` if you want your external sprites to load in Firefox. See [bug 1773976](https://bugzilla.mozilla.org/show_bug.cgi?id=1773976) and [this CSP spec issue](https://github.com/w3c/webappsec-csp/issues/199) for more information. |
Member
There was a problem hiding this comment.
Suggested change
| your SVG images will be blocked in Firefox if you have a `default-src 'none'` policy set. Firefox does not treat the SVG as an embedded image like other browsers do, therefore `img-src 'self'` will not allow them to be loaded. You need to use `default-src 'self'` if you want your external sprites to load in Firefox. See [bug 1773976](https://bugzilla.mozilla.org/show_bug.cgi?id=1773976) and [this CSP spec issue](https://github.com/w3c/webappsec-csp/issues/199) for more information. | |
| your SVG images will be blocked in Firefox if you have a `default-src 'none'` policy set. Firefox does not treat the SVG as an embedded image like other browsers do, therefore `img-src 'self'` will not allow them to be loaded. You need to use `default-src 'self'` if you want your external sprites to load in Firefox. Alternatively, you can inline the external sprite in the HTML page. See [bug 1773976](https://bugzilla.mozilla.org/show_bug.cgi?id=1773976) and [this CSP spec issue](https://github.com/w3c/webappsec-csp/issues/199) for more information. |
| </svg> | ||
| ``` | ||
|
|
||
| your SVG images will be blocked in Firefox if you have a `default-src 'none'` policy set. Firefox does not treat the SVG as an embedded image like other browsers do, therefore `img-src 'self'` will not allow them to be loaded. You need to use `default-src 'self'` if you want your external sprites to load in Firefox. |
Member
There was a problem hiding this comment.
Suggested change
| your SVG images will be blocked in Firefox if you have a `default-src 'none'` policy set. Firefox does not treat the SVG as an embedded image like other browsers do, therefore `img-src 'self'` will not allow them to be loaded. You need to use `default-src 'self'` if you want your external sprites to load in Firefox. | |
| your SVG images will be blocked in Firefox if you have a `default-src 'none'` policy set. Firefox does not treat the SVG as an embedded image like other browsers do, therefore `img-src 'self'` will not allow them to be loaded. You need to use `default-src 'self'` if you want your external sprites to load in Firefox. Alternatively, you can inline the external sprite in the HTML page: | |
| ```html | |
| <body> | |
| <svg style="display: none"> | |
| <symbol id="icon" viewBox="0 0 24 24"> | |
| <path d="…"/> | |
| </symbol> | |
| </svg> | |
| … | |
| <svg> | |
| <use href="#icon"/> | |
| </svg> | |
| </body> | |
| ``` |
Contributor
Author
There was a problem hiding this comment.
Thanks @pepelsbey, this is great information. I have added it, but with slightly different wording/structure. My reasons:
- If we refer to external sprites being inlined, then I reckon people will nitpick that they are no longer external.
- I wanted to keep the bug/spec issue links attached to the bit about
default-src 'none'not working with external SVG sprites specifically.
Let me know if you think my additions read ok.
Contributor
Author
|
Awesome, I've put it live, as I don't think there is any point waiting. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This PR adds documentation covering the Firefox CSP
default-src 'none'SVG sprite blocking issue, documented by @pepelsbey at mdn/mdn-http-observatory#6.Motivation
Additional details
Related issues and pull requests