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

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

I tried setting the content security policy from the server side using this, but it does not seem to do anything and only the settings from the meta tag in the react html file that works.

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

IPFS sends the url of the uploaded image to show the file preview to the user and the url changes on every request but that is blocked by CSP.

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

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

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

How to disable content security policy in react

html

node.js

reactjs

content-security-policy

ipfs