Search code examples
javascripthtmlmeta-tagscontent-security-policy

Refused to load the stylesheet/script in node.js app

so basically im facing an issue trying to load some fonts from https://fonts.googleapis.com/css?family=Merriweather:400,700&display=swap,

im getting several error messages when running the app

localhost/:1 Refused to load the stylesheet 'https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&display=swap' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'style-src-elem' was not explicitly set, so 'default-src' is used as a fallback.

localhost/:1 Refused to load the stylesheet 'https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&display=swap' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline'". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.

localhost/:1 Refused to load the stylesheet 'https://fonts.googleapis.com/css?family=Merriweather:400,700&display=swap' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'style-src-elem' was not explicitly set, so 'default-src' is used as a fallback.

localhost/:1 Refused to load the stylesheet 'https://fonts.googleapis.com/css?family=Merriweather:400,700&display=swap' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline'". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.

Also im trying to implement Stripe for my project but im also unable to load the script im getting the same error message

localhost/:1 Refused to load the script 'https://js.stripe.com/v3' 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.

I dont have knowledge about CSP in meta tags

this is the one that i have but i think is not working

meta(http-equiv='Content-Security-Policy' content="default-src 'self'")   
meta(http-equiv='Content-Security-Policy' content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' http://www.google.com")   
meta(http-equiv='Content-Security-Policy' content="style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com;")

Also i have helmet.js module installed on my app, is just configured as this

app.use(helmet());
Solution

  • Also i have helmet.js module installed on my app, is just configured as this

    app.use(helmet());

    Helmet V4 publishes a default CSP using HTTP header. That's why your external sources been blocked.
    You can't mitigate one CSP by adding a second one in <meta> tag, because several CSPs work as consistent filters: all sources must pass through all CSPs.

    You can disable a Helmet middleware:

    // This disables the `contentSecurityPolicy` middleware but keeps the rest.
app.use(
   helmet({
     contentSecurityPolicy: false,
   })
 );

    and then use meta tag CSP instead of it.

    Or you can add blocked sources into Helmet CSP settings in helmet.contentSecurityPolicy(options).