错误:拒绝加载脚本，因为它违反了以下内容安全策略指令：“默认-src 'none'”
错误:拒绝加载脚本，因为它违反了以下内容安全策略指令：“默认-src 'none'”
提问于 2022-05-04 15:07:27
我有一个React + Node.js应用程序，它在本地主机上运行良好，但是在部署到Heroku时会遇到错误，从而导致404响应状态。
这是我在Chrome上加载应用程序时遇到的控制台错误之一：
Refused to load the script 'https://ssl.google-analytics.com/ga.js' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'script-src-elem' was not explicitly set, so 'default-src' is used as a fallback.
(anonymous) @ 1:3
...
Failed to load resource: the server responded with a status of 404 (Not Found)这些脚本和样式表在我的代码中没有直接引用。
我正在尝试以下所有有关内容安全策略的代码：
public/index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://ssl.google-analytics.com 'unsafe-inline'; script-src-elem 'self' https://ssl.google-analytics.com 'unsafe-inline'" />
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://www.pagespeed-mod.com 'unsafe-inline'; script-src-elem 'self' https://www.pagespeed-mod.com 'unsafe-inline'" />
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://fonts.googleapis.com 'unsafe-inline'; style-src-elem 'self' https://fonts.googleapis.com 'unsafe-inline'" />
...
</head>
</html>src/App.tsx：
return (
<div className="h-screen flex flex-col">
<Helmet>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://ssl.google-analytics.com 'unsafe-inline'; script-src-elem 'self' https://ssl.google-analytics.com 'unsafe-inline'" />
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://www.pagespeed-mod.com 'unsafe-inline'; script-src-elem 'self' https://www.pagespeed-mod.com 'unsafe-inline'" />
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://fonts.googleapis.com 'unsafe-inline'; style-src-elem 'self' https://fonts.googleapis.com 'unsafe-inline'" />
</Helmet>
...src/server/index.js：
const scriptSources = ["'self'", 'https://ssl.google-analytics.com', 'https://www.pagespeed-mod.com']
const styleSources = ["'self'", 'https://fonts.googleapis.com']
app.use(
helmet.contentSecurityPolicy({
directives: {
scriptSrc: scriptSources,
styleSrc: styleSources,
},
})
)回答 1
Stack Overflow用户
发布于 2022-05-05 04:34:40
当您有多个CSP时，您的内容需要传递所有策略。最初的问题似乎是一个非常严格的策略设置"default-src‘none“。由于这个策略，一切都被阻塞了，添加新的策略也于事无补。您需要确定在何处以及如何设置此策略，然后修改或禁用该策略以允许所需的任何内容。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72115304
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号