Error: Refused to load the script because it violates the following Content Security Policy directiv-CodePudding

I have a React Node.js app that works fine on localhost but runs into errors when deployed to Heroku, resulting in a 404 response status.

This is one of the console errors I get when loading the app on 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)

These scripts and stylesheets are not directly referenced anywhere in my code.

I am trying all of the following code regarding Content Security Policy:

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,
    },
  })
)

CodePudding user response：

The HTTP Content-Security-Policy (CSP) script-src directive specifies valid sources for JavaScript. This includes not only URLs loaded directly into elements.

The error is due to the CSP header for script-src is set to self so if you add inline script with any src other than your domain scripts it voilates CSP policy, so you have to add it in the allowed list.

I have not worked woth heroku but check you have to set the CSP configuration anywhere there eg : CSP Header : script-src 'self' www.google-analytics.com ...; else if you are using CSP in Node js with helmet or anything add the analytics url in whitelist of the script src.

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

For more info go through this Mozila CSP

CodePudding user response：

When you have multiple CSPs, your content need to pass all policies. It seems like the initial problem is a very restrictive policy setting "default-src 'none'". Everything is blocked due to this policy, and adding new policies won't help. You will need to identify where and how this policy is set and then modify or disable it to allow whatever is needed.