1

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.

Mst Ghafouri
  • 43
  • 6
  • Check the actual CSP header sent in dev tools. It seems like the script-src directive used by the browser is not the one you have set. If you specify CSP in header and meta-tag only sources allowed in both will be accepted. – Halvor Sakshaug Aug 27 '20 at 10:14

2 Answers2

1

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: [],
    },
  })
);
Divyesh Puri
  • 196
  • 8
0

To anyone in the future stumbling on this SO, please be advised that the platform.js script for google sign-in is deprecating on March 31, 2023.

Please migrate your js code and read more information about the api sunset here: https://developers.google.com/identity/gsi/web/guides/migration

Our team uses the deprecated npm package react-google-login which uses apis.google.com/js/api.js (not platform.js), but it looks like we will be in the clear on the day of the sunset. Will keep in touch and inform here in case we experience side effects. Thanks!

Yaki :3

Yaki
  • 1