当将样式组件与内容安全策略一起使用时，React SPA 无法在 iOS Safari 上呈现
我一直在尝试锁定我们的生产版本以满足 CSP 要求，并且取得了成功，除了样式组件脚本标记之外。
Nonce 并不是 SPA 的真正选项，因此 sha 似乎是最好的解决方案，并且有问题的脚本标签的内容不会更改。
该站点由一个简单的 Express 服务器提供，该服务器设置所需的标头并包含空标记的 sha（这就是 styled-components 样式标记的呈现方式）：
Content-Security-Policy: script-src '自己'; img-src '自我' https://*; style-src 'self' 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' fonts.googleapis.com; child-src '自我';框架-祖先“自我”； font-src fonts.gstatic.com
以及 html head 中的目标脚本标签：
这在 Chrome、Edge 和 Firefox 中执行正确，但应用程序无法在 Safari 上呈现，并出现以下控制台错误：
错误：发生错误。请参阅 https://git.io/JUIaE#17 了解更多信息。
这又指的是错误： 在 HTMLStyleElement 上找不到 CSSStyleSheet。 styled-components 的样式标签是否已被另一个脚本卸载或更改？
我不完全确定这条消息暗示什么。
我唯一的其他想法与使用 CSSOM API 注入样式有关（styled-components 脚本标签显示为空的原因），但我没有证据表明这是 Safari 的问题。
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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论