css Question posted in
Some basic documentation can be found here.

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search