stackblitz / docs

New StackBlitz docs site built with VitePress
https://pr.new/github.com/stackblitz/docs
45 stars 76 forks source link

BUG: "Open in StackBlitz” button broken by CORS #226

Open coder0107git opened 2 months ago

coder0107git commented 2 months ago

Describe the bug When the "Open in StackBlitz" button is requested with CORS (i.e. <img crossorigin="anonymous" ...>), it isn't loaded.

To Reproduce Steps to reproduce the behavior:

  1. Run the following HTML
    
    <!-- Broken badge -->
    <img alt="Open in StackBlitz" 
     crossorigin="anonymous" 
     src="https://developer.stackblitz.com/img/open_in_stackblitz_small.svg">

<img alt="Open in StackBlitz"
src="https://developer.stackblitz.com/img/open_in_stackblitz_small.svg">


2. Open the DevTools Console tab
3. See error

**Expected behavior**
For the image to load.

**Screenshots**
![An "Open in StackBlitz" image not loading and one loading](https://github.com/user-attachments/assets/4dc871c3-74e1-4349-867d-a9f9108c0952)
![Chrome DevTool error message saying "Access to image at 'https://developer.stackblitz.com/img/open_in_stackblitz_small.svg' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."](https://github.com/user-attachments/assets/8bc15e8f-19af-4d1f-aef8-e9d08e6d8f8a)

**Desktop:**
 - OS: Windows
 - Browser: Chrome
 - Version: 126

**Additional context**
- [`crossorigin="anonymous"` on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin#anonymous)
- [`Access-Control-Allow-Origin` on MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin)
- [MDN's description of this error](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin)
- [badges/shields#3273](https://github.com/badges/shields/issues/3273)
coder0107git commented 1 month ago

A potential fix for this would be to add the following to netlify.toml.

[[headers]]
  for = "/img/*"
  [headers.values]
    Cross-Origin-Resource-Policy = "cross-origin"
+   Access-Control-Allow-Origin = "*"
coder0107git commented 1 month ago

Would submitting a PR with the suggested changes be helpful?

samdenty commented 1 month ago

Sure @coder0107git

coder0107git commented 1 month ago

Filed PR (#229)

coder0107git commented 3 weeks ago

@samdenty or @sulco Any chance #229 will be reviewed soon?