Content Security Policy: Replace the inline background images #42
Conversation
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
1 participant
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.
To use the Spectrum Color Picker on a website with a Content Security Policy header, the use of
data:URIs in the CSS code is only allowed if the header contains the paramdata:.While it's not that problematic compared to the
unsafe-inlinefrom pull request #41, it's still an insecure param, and you do not want it in your CSP header.The solution for this is to use no
data:URIs. A possible solution is to use an SVG sprite to have the background images with the best performance. This combines all SVGs into one file, but it's still possible to use the background image like before.I've extracted the SVGs from the
data:URIs and added them as files in thesrc/iconsdirectory. Additionally, I've added grunt-svg-sprite as adevdependency and added a new taskbuild-spriteto combine the single SVGs into the sprite.After that, I replaced the
data:URIs in the CSS file to use the new SVG sprite.Personal Note:
I've split these two CSP fixes into two pull requests because Spectrum does not require this one directly. I can overwrite the CSS rules in my project directly and solve it that way. It is impossible to do that with the JavaScript code without copying the files.