CODEWITHSUNDEEP
cssdjangocorscross-site
Rockbot
Rockbot

Reputation: 973

Background-image in CSS url blocked by Opaque Response Blocking

In Django I use a background-image stored on a remote web-storage (Digitalocean Spaces) like this:

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

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

The same image is loaded in another place on the same page through a img tag without problems.

To understand the problem: What is the difference on the server-side requests that the css-url gets blocked while the img-url passes?

CORS Panel

Upvotes: 0

Views: 2252

Answers (2)

Heiko Thei&#223;en
Heiko Thei&#223;en

Reputation: 17517

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 and stylesheets that are served with an XML mime type (for example, Content-Type: application/xml), but Content-Type: image/svg+xml is allowed.

Upvotes: 1

Rockbot
Rockbot

Reputation: 973

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.

Upvotes: 0

Related Questions