Content security policy blocking remote CSS background image

Question

A background image loaded from a remote server is being blocked by my CSP with the message

Content Security Policy: The page's settings blocked the loading of a resource at self ("default-src * https://xxxxx.com"). Source: background-image: url('https://xxxxx....

Here's my CSP:

<meta http-equiv="Content-Security-Policy" content="default-src * https://xxxxx.com; script-src * 'unsafe-eval' 'unsafe-inline'; img-src 'self' data:">

...where xxxxx is obviously my domain.

I assume it doesn't like url(..., but the CSP spec doesn't seem to consider url() a scheme so I can't see what to do about this. Anyone know?

[UPDATE]

Following @sideshowbarker's comment, I should have pointed out that this call is coming from an inline style attribute (not tag).

Answer 1

That CSP violation message indicates you have inline CSS style content, so you must either move that CSS content to a separate file (and use a link element to reference it) or else you must specify 'unsafe-inline'—for example, by adding a style-src directive to your policy:

<meta http-equiv="Content-Security-Policy"
  content="default-src * https://xxxxx.com;
  script-src * 'unsafe-eval' 'unsafe-inline';
  style-src 'self' 'unsafe-inline';
  img-src 'self' https://xxxxx.com data:">

The reason is, the CSP violation message cited in the question isn’t saying the image in that CSS style content is the problem—it’s just saying you have some inline style content, period.

And as far as CSP is concerned, it doesn’t matter what the inline style content is—it’s just your existing CSP policy doesn’t allow any inline style content all; your existing policy only allows inline scripts, because script-src is the only directive you specified 'unsafe-inline' for.

So if you’re going to keep that inline style content, you mus use 'unsafe-inline' to allow it.

Update: Based on comments below, it seems that once 'unsafe-inline' is added for style-src in this case, it’s also necessary to add https://xxxxx.com for img-src.

---

All that said, though, once you’ve ended up specifying 'unsafe-inline' for both style content and scripts, it seems like you might be at the point where you need to start considering whether you want to specify a CSP policy at all—because allowing everything inline kind of defeats the purpose of having a CSP policy at all to begin with.

If your goal is to reduce XSS risks, it seems you probably should consider moving all your inline style/script content to separate files, and using <script src> and link to reference those…