创建一个简单的模板电子应用程序。我想做一个获取请求到我的API,但不断停止的内容安全策略错误,我不知道如何修复它们。
拒绝连接到“https://api.myapp.com/”,因为它违反了以下内容安全策略指令:“default-src”self“”unsafe-inline“数据:“。请注意,未显式设置”connect-src“,因此”default-src“用作回退。
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-eval' ">
<meta charset="UTF-8">
</head>
<body>
<div id="root"></div>
</body>
</html>
app.js
const handleSubmit = async () => {
const response = await fetch("https://api.myapp.com/books", {
method: "GET",
headers: {
"Content-Type": "application/json",
},
});
return response.json();
};
我试过将API地址添加到现有策略中,并添加其他策略,但都不起作用。
3条答案
按热度按时间cig3rfwq1#
我找到了这个问题的答案,Webpack似乎使用了一个默认的开发者模式的内容安全策略,这个策略可以在package.json中覆盖。
取自网络包网络包插件渲染器配置
通过在package.json中设置devContentSecurityPolicy,我可以设置自己的内容安全策略。
67up9zun2#
在违规消息中,您有一个白名单:* 拒绝连接到...以下内容安全策略指令:“默认源代码"self"”不安全内联“数据:“.*
但在 meta标记中,您显示了一个不同的白名单:***默认源代码“自定义”“不安全值”***。
这意味着您至少有2个CSP在运行。几个CSP充当一致的过滤器-所有打算允许的源都应通过所有过滤器。因此,将应用所有CSP中最严格的规则。
确定在哪里发布第一个CSP并添加
connect-src https://api.myapp.com
,然后删除 meta标记中的CSP。很可能是某个包通过HTTP头(如何检查)发布了默认CSP,因此Helmet受到怀疑-它从v4开始发布默认CSP。
当然,您可以直接发布CSP HTTP头,代码如下:
vptzau2j3#
如果你使用forge.config.ts,你可以用途: