Css gets blocked CORB)

Website URL

(please specify the URL of the site on which you are experiencing the problem)

Error Message

  1. Response was blocked by CORB (Cross-Origin Read Blocking)

  2. Cross-Origin Read Blocking (CORB) blocked a cross-origin response.

  3. Betroffene Ressourcen

1. 5 Anfragen

  1. style.css

motiva_sans.css
WarsheepSchriftzug.png
WarsheepGER.png
widget.css

Other Information

i have 2 iframes on my website (hosted on the same server) where the css and pictures arn´t loaded since i switcht to https.

i tryed it with different link pathes like


<link href="./widgetcss/widget.css" rel="stylesheet" type="text/css">
<link href="widgetcss/widget.css" rel="stylesheet" type="text/css">
<link href="https://warsheepger.rf.gd/widgetcss/widget.css" rel="stylesheet" type="text/css">

also i added in my .htaccess

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Methods "GET, POST"
    Header set Access-Control-Allow-Headers "Content-Type"
</IfModule>

but nothing fix the css get blocked problem.

I see these errors in the console ?

The stylesheet https://warsheepger.rf.gd/widgetcss/motiva_sans.css was not loaded because its MIME type, “text/html”, is not “text/css”. widget.html

The stylesheet https://warsheepger.rf.gd/widgetcss/widget.css was not loaded because its MIME type, “text/html”, is not “text/css”. widget.html

1 Like

ok but why o,o

If you visit directly in the browser, you can see that everything is fine and the CSS is correct

image

BUT

When the request was sent through your website instead of directly
then the request was initiated by this widget.html file instead of the direct CSS file and probably leads to the wrong path
that’s why you can see that it’s not text/css

why this happen (if everything was generated by some HTML generator) I don’t know the answer because I don’t know the way your website works from the inside but maybe you can find the answer here (somewhere in the source I saw that this is your generator)



One of the constants (if I saw correctly) is that those requests that do not work
start with ./ in source code.

widget.html

4 Likes

the widget.html i done by myself, i just add it as an iframe in the docusaurus system.
the links i tryed with ./ | /| https
but none of this works.

bevore i activated https it worked all fine.

you can see in the error message the link to the files is correct. just the type is incorrect but i dont know how to fix that.
also i cant understand why the png diles get blocked.

This was quite a head-scratcher, but I think I figured out why you have this issue.

Getting a CORS error here is very strange. Because the widget CSS is being loaded from the exact same domain as the parent, so why would you get a CORS error?

The reason is the iframe. Or specifically, how you configured the iframe.

iframes themselves are mostly fine. They work, but tend to get messy when done across different domains because browsers isolate data between main page and the iframe. But again, it’s the same domain, so it shouldn’t be an issue.

But there is one piece of configuration I didn’t know existed: the sandbox attribute. Looking on W3Schools, the very first item in the list regarding what the sandbox tag does is:

  • treat the content as being from a unique origin

So that’s why you get the CORS error: that’s the result of the iframe sandboxing.

Not only does this create CORS issues, it can also cause problems with our browser validation system, because cookies aren’t shared between the parent and the iframe.

To fix this, you can choose to either disable sandboxing entirely, or if you do want to keep using sandboxing, you’ll probably need to enable allow-same-origin for the iframe (which I expect, but am not sure about, will fix it).

4 Likes

i removed the sandbox attribute, now it works , dosnt remember why i add it .

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.