Search code examples
javascriptreactjsgoogle-signincontent-security-policy

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

I know there are many similar questions, but i had a hard time figuring out this problem and after hours of searching and editing my code, i couldn't solve it.
I've built a MERN stack web app and added the script 'https://apis.google.com/js/platform.js' in index.html for using google authentication. but after deploying my app to heroku i got following errors: 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.

I've edited my code several times and the final edition looks as follows: (based on 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 "
}

Any help would be appreciated.

Solution

  • I think you must be using Helmet which must be setting the CSP headers for you. You can remove it from your express server and check it if it is causing the problem.

    You can use the below code to set your own CSP headers which suits your website the best.

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