Add Cross-Origin-Resource-Policy: cross-origin header for hosted badges

[freddieleeman]

Issue Summary

When embedding the Home Assistant blueprint import badge on external websites, it triggers Cross-Origin Resource Policy (CORP) violations in modern browsers on sites that have Cross-Origin-Embedder-Policy (COEP) enabled.

This happens because the image request does not return an explicit Cross-Origin-Resource-Policy (CORP) header, causing browsers to default to same-origin, blocking the request.

As a result, sites with COEP see reports like:

{
  "blockedURL": "https://my.home-assistant.io/badges/blueprint_import.svg",
  "destination": "image",
  "disposition": "reporting",
  "type": "corp"
}

Steps to Reproduce

1. Embed the badge in an external site that has COEP enabled, using an <img> tag:

    <img src="https://my.home-assistant.io/badges/blueprint_import.svg">

2. Open the site in a browser.
3. Check the Developer Console or COEP reports.

The request fails with an error like:

GET https://my.home-assistant.io/badges/blueprint_import.svg 
net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200 (OK)

Expected Behavior

The badge should be publicly embeddable on external sites without triggering CORP violations, as it is intended for sharing across multiple domains.

Proposed Solution

Add the following HTTP response header to https://my.home-assistant.io/badges/blueprint_import.svg:

Cross-Origin-Resource-Policy: cross-origin

This will:

• Allow external websites to embed the image.
• Prevent COEP-related CORP violations.
• Maintain security while ensuring expected functionality.

Why This Matters?

• The badge is designed to be shared on blogs, forums, and guides.
• Without the Cross-Origin-Resource-Policy: cross-origin header, COEP-enabled sites cannot use it.
• This change follows best practices for embeddable web assets.

Additional Information

This issue was observed on blog:
🔗 https://smarthomegeeks.io/hue-tap-dial-switch/