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

Question

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

<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 应用程序。 那么知道如何去做吗？ 谢谢

Answer 1

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

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

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

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

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