helmet: contentSecurityPolicy blocking cdn

alright so my final code is below which solved the svg issue too.

app.use(
  helmet({
    contentSecurityPolicy: {
      directives: {
        defaultSrc: [
          "'self'",
          "'unsafe-inline'",
          'data:',
          'localhost',
          'main-domain.com',
          '*.main-domain.com',
          '*.google.com',
          '*.google.co.in',
          '*.google-analytics.com',
          '*.googlesyndication.com',
          '*.googleadservices.com',
          '*.googletagservices.com',
          '*.googleapis.com',
          '*.doubleclick.net',
          '*.gstatic.com',
          'youtu.be',
          '*.youtu.be',
          '*.youtube.com',
        ],
      },
    },
  })
)

the only issue i am facing is in production. api send all request 404 example api path '/api/user’

another issue I have added google.com & google.co.in but is there any way use .google. I found it is not working

I’m not sure, but I wouldn’t. If someone serves malicious code on www.google.evil.com, for example, you’d be vulnerable.

It looks like contentSecurityPolicy: false does work but was blocked by a browser cache issue. If all else fails I’ll use this.

More refined, my setup is like this (which does NOT work):

contentSecurityPolicy: {
      directives: {
        defaultSrc: ["'self'", "https://cdn.buymeacoffee.com/*", "http://placekitten.com/*"]
      }
    }

The header looks like this:

default-src 'self' https://cdn.buymeacoffee.com/* http://placekitten.com/*;base-uri 'self';font-src 'self' https: data:;form-action 'self';frame-ancestors 'self';img-src 'self' data:;object-src 'none';script-src 'self';script-src-attr 'none';style-src 'self' https: 'unsafe-inline';upgrade-insecure-requests

Other http calls are working okay, even though they are not included here. So not sure what the issue is.

You can disable helmet content default policy and add policy on LB/Node server

app.use((req, res, next) => {
    res.setHeader('Content-Security-Policy', "default-src * 'unsafe-inline' 'unsafe-eval' data: blob:");
    next();
});

app.use(
  helmet.contentSecurityPolicy({
    useDefaults: false,
  }),
);

@kerimkaan It looks like you’ll need to enable CORS on the backend. Helmet doesn’t deal with CORS at all, so you may wish to read about CORS on MDN or use the cors package.