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

Tej*_*gol 4 content-security-policy reactjs material-ui

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

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

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

我没有任何内联脚本。

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

散列来自哪里,是否可以避免在部署期间每次都手动更新散列?

Tej*_*gol 14

感谢您一直以来的帮助。我已经找到了这个问题的答案,所以我会分享它,希望它可以帮助其他人。

根据Create React App 文档中的高级配置部分

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

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

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

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

  • 您在哪里包含 .env 文件?在我的文件结构中,我有两个文件夹:后端和前端,并且根目录中有 .env 文件,但它不起作用! (5认同)