如何在反应中禁用内容安全策略

Posted 2023-03-05

【中文标题】如何在反应中禁用内容安全策略

【英文标题】：How to disable content security policy in react

【发布时间】：2021-12-06 14:40:28

【问题描述】：

我已经搜索并看到很多文章说内容安全策略如何为我带来好处并保护我的应用程序，但为什么它如此令人沮丧。目前这是我的元标记和我的内容安全策略设置

<meta
      http-equiv="Content-Security-Policy"
      content="default-src 'none'; script-src 'self' 'unsafe-inline'; connect-src 'self' https://polygon-rpc.com/ https://ipfs.infura.io:5001/api/v0/add?stream-channels=true&progress=false https://ipfs.infura.io:5001/api/v0/* img-src 'self'; style-src 'self' 'unsafe-inline'; base-uri 'self'; form-action 'self'; font-src 'self' https://fonts.gstatic.com;
" 
    />

在我的应用程序中，我连接到多边形网络，用户可以将文件上传到 IPFS。现在的问题是，虽然上面允许成功上传文件，但 IPFS 发送上传图像的 url 以向用户显示文件预览，并且每次请求时 url 都会更改，但被 CSP 阻止。所以我现在想知道的是如何完全禁用该死的东西。我不想要它，因为如果我必须手动添加我调用的所有外部网站到元标记。这似乎很愚蠢

我尝试使用它从服务器端设置内容安全策略，但它似乎没有做任何事情，只有来自 react html 文件中元标记的设置有效。

app.use(
  contentSecurityPolicy(
    useDefaults: true,
    directives: 
      defaultSrc: ["'none'"],
      connectSrc: [
        "'self'",
        "https://polygon-rpc.com/",
        "https://ipfs.infura.io:5001",
        "https://ipfs.infura.io:5001/api/v0",
        "https://ipfs.infura.io",
      ],
      upgradeInsecureRequests: [],
    ,
    reportOnly: false,
  )
);

它是一个托管在 heroku 上的 MERN 应用程序。那么知道如何去做吗？谢谢

【问题讨论】：

我建议让发送此 HTML 的服务器发送标题 - 而不是 HTML 元数据。这是相关的，但对于不同的标头设置：***.com/questions/4480304/…

一般来说，您不会添加所有站点，只添加当前正在访问的站点。这将在服务器端动态完成。

@Ouroborus 我该怎么做？

看起来很接近。 contentSecurityPolicy 提供什么？

@Ouroborus 一个名为 helment-csp 的包，但这不起作用

【参考方案1】：

我尝试使用它从服务器端设置内容安全策略，但它似乎没有做任何事情，只有来自 react html 文件中元标记的设置有效。

因此，您有 2 个 CSP 同时起作用 - 来自元标记和 HTTP 标头。所有来源都必须通过两个 CSP，因此将应用来自两个 CSP 的最严格规则。 使用元标记或 HTTP 标头。

IPFS 发送上传图像的 url 以向用户显示文件预览，并且每次请求时 url 都会更改，但会被 CSP 阻止。

将img-src * 设置为允许来自任何主机的图像就足够了。注意您在元标记中的 CSP 中有 2 个错误：

在img-src 'self'; 之前缺少分号;。将其修复为 ; img-src * data: blob:; 以允许来自任何来源的图像，包括 data:-Urls 和 blob:-Urls。 https://ipfs.infura.io:5001/api/v0/* 源错误，因为 CSP 不支持路径部分中的 *。删除*。

【讨论】：

感谢 mahn，就像 @granty 提到的拥有 2 个 CSP 并不是一个好主意，我注意到只需将网站输入为 ipfs.infura.io、ipfs.infura.io:5001 和 *.ipfs.infura.io 就允许从该网站的所有子域。在此网站上阅读更多信息：content-security-policy.com

您提到的页面content-security-policy.com，包含5个严重错误和3个不准确之处。小心。

可以进一步阐明，有哪些错误和不准确之处？

(1) except of 'none' which should be the only value - 事实上none 与''report-sample'' 结合； 'none' 只是忽略它是否与任何其他来源相结合。 (2) 'self' Allows loading resources from the same origin (same scheme, host and port) - 是错误的，因为在 CSP 3 中 http: 方案 'self' 也涵盖了 https:；还'self' 覆盖ws:/wss:。 (3) script-src 'nonce-r@nd0m' 是错误的，因为在 nonces 中不允许使用 @。 (4) script-src 'strict-dynamic' 使用'strict-dynamic' 的例子是错误的，它会导致阻塞所有脚本。 (5) 待续……

(5) 'unsafe-hashes' 描述是错误的，因为它涵盖 javascript:-navigation。关于不准确 - 抱歉，cmets 字段大小不允许列出这些。