How to use a backgound image on with content security policy

I’m trying to add a background image to my app on glitch. This is for the Stock Price Checker project. This project requires a content security policy (csp), which is causing the problem. If I comment out the csp the background image works.

Relevant css:

body {
  background-image: url(;

Relevant security policy in server.js, I added the url to both scriptSrc and styleSrc but it dosen’t work:

  directives: {
    defaultSrc: ["'self'"],
    scriptSrc: ["'self'", "", "/public/client.js", "'unsafe-inline'", ""],
    styleSrc: ["'self'", "", "/public/style.css", "", "'unsafe-inline'"]
  browserSniff: false

This is how it looks on my local environment (no csp)

This is how it looks on glitch

I did also try adding the image to “assets” on glitch and use the cdn link, which I have done in the past, but never used them for a background image, and I could not get that link to work with the csp for the background either.

Right now I have the csp commented out, but I still haven’t figure this out.

Try using the imgSrc directive.

1 Like

Wow, thank you!!!

No problem, happy to help. Just remember to always check the documentation.