是否可以使用 Next.js + Styled-Components 和静态主机（例如 S3）来制定 Meaningful/Secure 内容安全策略
Is It Possible to Have a Meaningful/Secure Content Security Policy With Next.js + Styled-Components and a Static Host (eg. S3)
最近 Google 的 Lighthouse 工具提醒我，我没有提供内容安全策略。但是，当我尝试添加一个（或至少一个没有“不安全”一词的）时，我发现了一堆违规行为，似乎来自 Next.js 和 Styled-Components.
这两个库似乎都使用动态 script/style 标签，这违反了任何理智的 CSP。但是 the only way I've found 解决它们的方法是使用“随机数”。但是，这似乎需要一个实际的服务器 运行：如果您使用 Next 生成静态文件（托管在像 AWS S3 这样的静态主机上），您不能提供随机数。
我的问题很简单：我遗漏了什么吗？是否有一些基于非 nonce 的方式或基于静态主机 nonce 的方式使用 Next.js 和 Styled Components 在 S3 上托管站点？
或者将这些库与严格的 CSP（没有服务器生成的随机数）一起使用是不可能的吗？
希望你：
不要使用内联样式如<tag style='display:none;'>或element.setAttribute('style', ...)的JS调用。
不要使用像 <tag onclick='...'> 这样的内置内联事件处理程序和像 <a href='javascript:void(0)'>
这样的 JS 导航
因为以上所有都需要 styles/scripts 中的 'unsafe-inline'，因为 Safary 不支持 'unsafe-hashes' 令牌并且 Firefox 支持错误。
对于单页应用程序（SPA）（没有服务器端渲染），使用'nonce-value'是没有用的，因为SPA不会重新加载页面，只是部分更新它的内容，但是你必须生成每个页面加载的新随机数。
对于无服务器应用程序（如静态文件托管）和 SPA 应用程序，您可以使用 'hash-value' 而不是 'nonce-value' 来允许内联脚本和样式。
如果你使用 Webpack，它有一些插件，例如，csp-html-webpack-plugin 插件将为你的内容安全策略元标记生成内容，并将正确的数据输入到你的 HTML 模板中，由 html-webpack-plugin 生成.所有内联 JS 和 CSS 将被散列，并插入到策略中。
最近 Google 的 Lighthouse 工具提醒我，我没有提供内容安全策略。但是，当我尝试添加一个（或至少一个没有“不安全”一词的）时，我发现了一堆违规行为，似乎来自 Next.js 和 Styled-Components.
这两个库似乎都使用动态 script/style 标签，这违反了任何理智的 CSP。但是 the only way I've found 解决它们的方法是使用“随机数”。但是，这似乎需要一个实际的服务器 运行：如果您使用 Next 生成静态文件（托管在像 AWS S3 这样的静态主机上），您不能提供随机数。
我的问题很简单：我遗漏了什么吗？是否有一些基于非 nonce 的方式或基于静态主机 nonce 的方式使用 Next.js 和 Styled Components 在 S3 上托管站点？
或者将这些库与严格的 CSP（没有服务器生成的随机数）一起使用是不可能的吗？
希望你：
不要使用内联样式如
<tag style='display:none;'>或element.setAttribute('style', ...)的JS调用。不要使用像
这样的 JS 导航<tag onclick='...'>这样的内置内联事件处理程序和像<a href='javascript:void(0)'>
因为以上所有都需要 styles/scripts 中的 'unsafe-inline'，因为 Safary 不支持 'unsafe-hashes' 令牌并且 Firefox 支持错误。
对于单页应用程序（SPA）（没有服务器端渲染），使用'nonce-value'是没有用的，因为SPA不会重新加载页面，只是部分更新它的内容，但是你必须生成每个页面加载的新随机数。
对于无服务器应用程序（如静态文件托管）和 SPA 应用程序，您可以使用 'hash-value' 而不是 'nonce-value' 来允许内联脚本和样式。
如果你使用 Webpack，它有一些插件，例如，csp-html-webpack-plugin 插件将为你的内容安全策略元标记生成内容，并将正确的数据输入到你的 HTML 模板中，由 html-webpack-plugin 生成.所有内联 JS 和 CSS 将被散列，并插入到策略中。