最近Google的Lighthouse工具提醒我，我没有提供内容安全策略。然而，当我试图添加一个(或者至少一个没有"不安全"这个词的);在它里面)，我结束了一堆违反，似乎来自Next.js和style - components。
两个库似乎都使用了违反任何CSP的动态脚本/样式标签。但我找到的唯一解决它们的方法是使用"nonce_"。然而，这似乎需要一个实际的服务器运行:如果您使用Next生成静态文件(托管在像AWS S3这样的静态主机上)，则无法提供nces。
我的问题很简单:我错过了什么吗?是否有一些非基于nonce的方式，或基于静态主机nonce的方式，使用Next.js和Styled Components在S3上托管站点?或者不可能将这些库与严格的CSP一起使用(没有服务器生成的nonce)?
我希望你:
-
不要像
<tag style='display:none;'>或JS调用element.setAttribute('style', ...)那样使用内联样式。 -
不使用内置的内联事件处理程序，如
<tag onclick='...'>和JS-navigation，如<a href='javascript:void(0)'>
因为以上所有的样式/脚本都需要'unsafe-inline'，因为'unsafe-hashes'令牌不被safari支持，而Firefox只支持。
对于单页应用程序(SPA)(没有服务器端渲染)，使用'nonce-value'是没有用的，因为SPA不重新加载页面，而只是部分更新其内容，但是您必须为每个页面加载生成新的nonce。
对于无服务器应用程序(如静态文件托管)和SPA应用程序，您可以使用'hash-value'而不是'nonce-value'来允许内联脚本和样式。
如果你使用Webpack，它有一些插件，例如，csp-html-webpack-plugin插件将为你的内容安全策略元标签生成内容，并将正确的数据输入到你的HTML模板，由html-webpack-plugin生成。所有内联JS和CSS都将被散列，并插入到策略中。