拒绝加载脚本 'https://apis.google.com/js/platform.js' 因为它违反了以下内容安全策略

Question

我知道有很多类似的问题，但我很难弄清楚这个问题，经过数小时的搜索和编辑我的代码后，我无法解决它。
我构建了一个 MERN 堆栈 Web 应用程序并在 index.html 中添加了脚本 'https://apis.google.com/js/platform.js' 以使用 google 身份验证。但是在将我的应用程序部署到 heroku 之后，出现以下错误： errors image

Refused to load the script 'https://apis.google.com/js/platform.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-eE1k/Cs1U0Li9/ihPPQ7jKIGDvR8fYw65VJw+txfifw='), or a nonce ('nonce-...') is required to enable inline execution.

我已经多次编辑我的代码，最终版本如下所示：（基于 this answer）

index.html

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Web site created using create-react-app" />
  <meta http-equiv="Content-Security-Policy"
    content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://apis.google.com/js/platform.js ">

  <link rel="manifest" href="/manifest.json" />
  <link rel="shortcut icon" type="image/png" href="/logo.png">
  
  <script src="https://apis.google.com/js/platform.js" async defer></script>
</head>

manifest.json

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "logo.png",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/png"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "content_security_policy": "default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://apis.google.com/js/platform.js "
}

如有任何帮助，我们将不胜感激。

Answer 1

我认为您一定在使用 Helmet，它必须为您设置 CSP headers。您可以将它从您的快递服务器中删除并检查它是否导致了问题。

您可以使用以下代码设置最适合您网站的 CSP headers。

app.use(
    helmet.contentSecurityPolicy({
    directives: {
      defaultSrc: ["'self'"],
      scriptSrc: ["'self'", "example.com"],
      objectSrc: ["'none'"],
      upgradeInsecureRequests: [],
    },
  })
);

拒绝加载脚本 'https://apis.google.com/js/platform.js' 因为它违反了以下内容安全策略

Refused to load the script 'https://apis.google.com/js/platform.js' because it violates the following Content Security Policy

javascript

content-security-policy

reactjs

google-signin