I've been trying to lock down our production release to satisfy CSP requirements and have been successful except for when it comes to the styled-components script tag.
Nonce is not really an option with an SPA so a sha seemed the best solution, and the content of the offending script tag does not change.
The site is delivered by a simple Express server which sets the required headers and includes the sha for what is an empty tag (which is how the styled-components style tag renders):
Content-Security-Policy: script-src 'self'; img-src 'self' https://*; style-src 'self' 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' fonts.googleapis.com; child-src 'self'; frame-ancestors 'self'; font-src fonts.gstatic.com
And the script tag being targeted in html head:
<style data-styled="active" data-styled-version="5.3.3"></style>
This performs correctly for Chrome, Edge and Firefox but the app fails to render on Safari with the following console error:
Error: An error occurred. See https://git.io/JUIaE#17 for more information.
In turn this refers to the error: CSSStyleSheet could not be found on HTMLStyleElement. Has styled-components' style tag been unmounted or altered by another script?
I'm not entirely sure what this message is sugesting.
My only other thought is related to the use of the CSSOM APIs to inject styles (the reason for the styled-components script tag appearing to be empty), but I have no evidence that this is the problem for Safari.