错误：拒绝加载脚本，因为它违反了以下内容安全策略指令：“default-src 'none'”

Question

我有一个 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)

我的代码中的任何地方都没有直接引用这些脚本和样式表。

我正在尝试以下所有关于内容安全策略的代码：

公共/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>

源代码/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>
    ...

源代码/服务器/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,
    },
  })
)

Answer 1

HTTP Content-Security-Policy (CSP) script-src 指令为 JavaScript 指定了有效来源。这不仅包括直接加载到元素中的 URL。

该错误是由于 script-src 的 CSP header 设置为 self，因此如果您添加内联脚本与任何 src 而不是您的域脚本，则会违反 CSP 策略，因此您必须将其添加到允许列表中。

我没有工作 heroku 但检查你必须在那里的任何地方设置 CSP 配置例如：CSP Header：script-src 'self' www.google-analytics.com ...; 否则，如果您在 Node.js 中使用带有头盔或任何东西的 CSP，请在脚本 src 的白名单中添加分析 url。

const scriptSources = ["'self'",'www.google-analytics.com'...]    
app.use(
   helmet.contentSecurityPolicy({
      directives: {
         ....
         scriptSrc: scriptSources,
         // ...
        },
        })
     )

通过此Mozila CSP了解更多信息 go

Answer 2

当您有多个 CSP 时，您的内容需要通过所有策略。 最初的问题似乎是一个非常严格的策略设置“default-src 'none'”。 由于此策略，一切都被阻止，添加新策略也无济于事。 您将需要确定设置此策略的位置和方式，然后修改或禁用它以允许任何需要的操作。

错误：拒绝加载脚本，因为它违反了以下内容安全策略指令：“default-src 'none'”

问题描述

2 个解决方案

解决方案1
0 2022-05-04 15:32:15

解决方案2
0 2022-05-05 04:34:40

错误：拒绝加载脚本，因为它违反了以下内容安全策略指令：“default-src 'none'”

问题描述

2 个解决方案

解决方案1 0 2022-05-04 15:32:15

解决方案2 0 2022-05-05 04:34:40

解决方案1
0 2022-05-04 15:32:15

解决方案2
0 2022-05-05 04:34:40