-3

I just wanted to make a simple website with Node.js, but I can't manage to get the CDN of CSS and JS files from Bootstrap without being blocked by Content Security Policy.

Here's what happens:

  • CASE 1 (works): When I just move my HTML file in the browser (so C://... .html) it works and gets all CDN's
  • CASE 2 (doesn't work): When I start my server (using express) in Node.js and then go to localhost:4000, it doesn't get the CDN's due to Content Security Policy (I can see it in console as it says it's being blocked by it)

I tried to put in the meta tag with the CDN's in it from here: Content Security Policy: The page's settings blocked the loading of a resource, but it didn't work and I even got more errors.

How do I fix this? I can't find any solution.

Mark Rotteveel
  • 100,966
  • 191
  • 140
  • 197
saibot-tsch
  • 101
  • 1
  • 8

2 Answers2

2

CASE 1 (works): When I just move my HTML file in the browser (so C://... .html) it works and gets all cdn's

When you web page works from C://... .html it's no Content Security Policy (CSP) published therefore nothing is blocked.

CASE 2 (doesn't work): When I start my server (using express) in Node.js and then go to localhost:4000 it doesn't get the CDN's due to Content Security Policy (I can see it in console as it says its being blocked by it)

When you web page works from localhost:4000 the server publishes a default CSP. NodeJS has in dependencies a Helmet middleware which publishes this default CSP header.

You can disable a middleware:

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

or configure it to allow external CDNs, see details in helmet.contentSecurityPolicy(options) section.

Note: next time please add console messages into a question, they can be very helpful in case of CSP.

granty
  • 7,234
  • 1
  • 14
  • 21
-1

Content Security Policy works the other way around. The CDN needs to give access to your url to use their resource, not the other way around. They will have to add a header with access-control-allow-origin and then set the value of * which means anyone can use their resource files or specifically your domain url.

So most likely you have a typo in your url and that domain doesn't allow localhost to fetch their js files.

dreamLo
  • 1,612
  • 12
  • 17