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

0
votes

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());
2
javascripthtmlmeta-tagscontent-security-policy

2 Answers

2
votes

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).

1
votes

I too faced the issue some time back. Then I checked https://content-security-policy.com/examples/express-js/ and added CSP headers in the response object. It worked fine

var express = require('express');
var application = express();

application.use(function(req, res, next) {
    res.setHeader("Content-Security-Policy", "script-src 'self' https://fonts.googleapis.com");
    return next();
});

application.use(express.static(__dirname + '/'));

application.listen(process.env.PORT || 9000);