如何为 React 应用程序修复 Content Security Policy default-src: none ？答案

【问题标题】：How can Content Security Policy default-src: none can be fixed for a React app?如何为 React 应用程序修复 Content Security Policy default-src: none ？
【发布时间】：2023-04-08 10:46:01
【问题描述】：

我尝试使用我自己的 webpack 设置和配置重新创建一个使用 create-react-app 完成的 React 应用程序。一切正常，直到我遇到以下内容安全策略问题：

Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'none'". Either the 'unsafe-inline' keyword, a hash ('sha256-ThhI8UaSFEbbl6cISiZpnJ4Z44uNSq2tPKgyRTD3LyU='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

我尝试在项目 public/index/html 中使用不同的参数在元标记中设置 CSP 标头，但没有结果。有时页面甚至没有显示。

【问题讨论】：

标签： reactjs express content-security-policy

【解决方案1】：

很可能有两个问题：

内容安全策略值为“无”表示允许加载 no 资源。您需要在内容安全策略中包含您的应用所需的所有资源。有诸如这些firefox/chrome 扩展之类的工具用于自动构建策略。
您需要将所有内联内容（嵌入在任何 HTML 中）移动到其自己的 javascript 文件中。可以找到指南here。

【讨论】：

【解决方案2】：

代替

default-src 'none'

你可以试试

default-src 'self'

这将使 CSP 能够使用自己的脚本、样式、字体、图像等。建议更具体地定义策略；在您的情况下，它会抱怨脚本，因此您通常也会添加：

script-src 'self'

【讨论】：