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

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:;以允许来自任何来源的图像，包括数据：-URL 和 blob：-Urls。
• https://ipfs.infura.io:5001/api/v0/*源是错误的，因为 CSP 不支持路径部分中的*。删除*。