用CSP反应CRA：拒绝执行内联脚本

Question

我已经使用Material UI Create React Template建立了一个新网站。

我添加了内容安全策略，该策略已成功构建并部署，但是该页面未显示在浏览器中，并且出现以下错误：

拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“ script-src'self'”。要启用内联执行，需要使用“ unsafe-inline”关键字，哈希（“ sha256-mB4hl8euSw00eXDUIRf8KeqpMfBXgg0FILGScPTo + n0 ='）或随机数（“ nonce -...”）。

我没有任何内联脚本。

当我将指定的哈希添加到我的内容安全策略中时，网站可以正常工作，但是如果我再次部署，则哈希会发生变化，我需要使用新的哈希更新我的内容安全策略。

哈希来自哪里，是否有可能避免在部署期间每次都需要手动更新哈希？

Answer 1

感谢您到目前为止的帮助。我已经找到了问题的答案，因此我将与大家分享，希望对其他人有所帮助。

根据Create React App文档中的Advanced Configuration section：

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

这似乎是动态生成的脚本的来源。

文档进一步建议@Entity @Table(name = "userrest") public class UserRest 文件中应包含INLINE_RUNTIME_CHUNK=false标志，以避免嵌入脚本。

通过在.env文件中包含INLINE_RUNTIME_CHUNK=false标志，进行重建和部署，我得以解决此问题。

Answer 2

Googletagmanager将内联脚本添加到您的页面。除非您按以下方式进行设置，否则您将无法使用googletagmanager强制执行严格的script-src（没有unsafe-inline）：https://developers.google.com/tag-manager/web/csp

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