Background-image in CSS url blocked by Opaque Response Blocking

I use a background-image stored on a remote web-storage like this:

<style>
    .bg-image {
        background-image: url("{{ instance.background.url }}");
    }
</style>

but the request gets blocked A resource is blocked by OpaqueResponseBlocking.

Displaying the image the 'normal' way with <img src="..."> works perfectly.

I tried setting a header in CORS-Configuration like: Content-Type: text/css but that did not change anything.

I did specify the origin domain and allowed GET, PUT, DELETE, POST and HEAD.

Opaque response blocking is a new feature waiting to be incorporated into the fetch standard, see https://github.com/whatwg/fetch/pull/1755. Its aim is stated as follows:

Essentially, CSS, JavaScript, images, and media (audio and video) can be requested across origins without the CORS protocol. And unfortunately except for CSS there is no MIME type enforcement. This algorithm aims to block as many responses as possible that are not one of these types (or are newer variants of those types) to avoid leaking their contents through side channels.

Browsers implementing this feature would block images that are served with an XML mime type (for example, Content-Type: application/xml), but Content-Type: image/svg+xml is allowed.

The specific problem here is that I used the <style> tag to set up the background-image. This - i guess - forced django to send the request with Content-Type: application/xml that gets blocked.

Changing the code to:

<div style="background-image: url('{{ instance.background.url }}');">
    ...
</div>

fixed the problem.

Back to Top