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(https://www.kiplinger.com/slideshow/investing/T052-S001-10-small-cap-growth-stocks-to-buy-now/images/intro.jpg);
}
Relevant security policy in server.js, I added the url to both scriptSrc and styleSrc but it dosen’t work:
app.use(csp({
directives: {
defaultSrc: ["'self'"],
scriptSrc: ["'self'", "https://code.jquery.com/jquery-2.2.1.min.js", "/public/client.js", "'unsafe-inline'", "https://www.kiplinger.com/slideshow/investing/T052-S001-10-small-cap-growth-stocks-to-buy-now/images/intro.jpg"],
styleSrc: ["'self'", "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css", "/public/style.css", "https://www.kiplinger.com/slideshow/investing/T052-S001-10-small-cap-growth-stocks-to-buy-now/images/intro.jpg", "'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.