用CSP响应CRA :拒绝执行内联脚本

Question

我已经建立了一个使用材料UI创建反应模板的新网站。

我添加了一个内容安全策略，成功构建并部署了该策略，但是该页面没有在浏览器中显示，我收到以下错误：

拒绝执行内联脚本，因为它违反了以下内容安全策略指令：" script -src 'self'“。要么是‘不安全-内联’关键字，要么是散列('sha256-mB4hl8euSw00eXDUIRf8KeqpMfBXgg0FILGScPTo+n0=')，，要么是“不安全-.”)需要启用内联执行。

我没有任何内联脚本。

当我将指定的哈希添加到我的内容安全策略中时，该网站可以工作，但是如果我再次部署，哈希将发生更改，并且我需要用新的哈希更新我的内容安全策略。

散列从何而来，是否可以避免每次部署期间手动更新哈希？

Answer 1

到目前为止谢谢你的帮助。我已经找到了这个问题的答案，所以我会分享它，希望它能帮助别人。

根据中的高级配置部分：

默认情况下，将在产品构建期间将运行时脚本嵌入到index.html中。

这似乎是动态构建脚本的来源。

这些文档进一步建议，INLINE_RUNTIME_CHUNK=false标志应该包含在.env文件中，以避免脚本的嵌入。

通过在INLINE_RUNTIME_CHUNK=false文件中包含.env标志、重新构建和部署，我能够解决这个问题。

Answer 2

Googletagmanager将内联脚本添加到页面中。您将无法使用googletagmanager强制执行严格的脚本-src(没有不安全的内联)，除非设置如下：https://developers.google.com/tag-manager/web/csp

您还可能需要处理其他动态构建的脚本。

Answer 3

对我来说，问题是脚本-src标记是由我的后端api提供的，即服务。它显然包含在头盔中间件中，我正在使用它。一旦我把它取下来，它就开始工作了。