Issue loading images from brands.home-assistant.io when behind proxy

Configuration
1

Installed HA in container behind Traefik. I try to personalize the CSP for my services by disabling everything and then fix any errors in the console. Thus providing the minimal required permission for the service to work properly.
During the tuning process I came across an issue that I couldn’t fix on my end with changing the CSP. When I open the default Energy dashboard I get:

Refused to connect to 'https://brands.home-assistant.io/co2signal/dark_icon.png' because it violates the following Content Security Policy directive: "connect-src 'self'".

The directive on my end already includes the domain, but this doesn’t help. I tried running another reverse proxy - Caddy - but failed with the same error. I removed the CSP header entirely and I still get the error when loading image files from brands.home-assistant.io.
The only time it works is when I access HA directly, without reverse proxy, using HTTP protocol. The logos for all integrations also fail to load.

Is this expected? Are other proxies having the same issue?
I tried all combinations on the CSP header:

connect-src 'self' https://brands.home-assistant.io/co2signal/dark_icon.png;
connect-src 'self' *.home-assistant.io/;
connect-src 'self' *.home-assistant.io;

and none of it works.

2

Hello Peter Stoinov,

More times that not when I see DNS problems, it;'s because PiHole or Adguard is installed (or was installed and now it has been uninstalled) and that is messing them up. Is that the case?

3

How is networking in docker?

Is container on a network that allow access outside docker network?

4

I don’t have PiHole or AdGuard on the newrok (yet). I tried diabling the adblocker (uBlock Origin) on the browser but with no effect. Besides the images are loaded when accessed directly without reverse proxy in front of it.

5

I created a separate network for all my docker container as per the Docker docs:

docker network create -d bridge <network_name>

The network allows outside access and as I stated before - directly accessing the container on the port using HTTP does not cause this problem. It’s the Content-Security-Policy that is blocking the images, even if I do not explicitly set it up on my proxy.

6

Ok I managed to figure out the issue - it was browser cache somehow. In the network tab of the DevTools I was able to see every change I made on the CSP right away, the console tab and the page itself were showing errors trying to load the the brands images.
I tested it using Private/Incognito window and everything worked out fine.
So when i deleted all of the page data and cache, everything worked out in my main browser too.

The browser is Brave, but I’ve been using it for a month or so, and was not aware of those quirks.

And for posterity, here’s a CSP policy that seems to be working fine by allowing just what HA is using:

Content-Security-Policy "report-to csp-endpoint; upgrade-insecure-requests; default-src 'none'; base-uri 'none'; frame-ancestors 'none'; form-action 'none'; img-src 'self' data: brands.home-assistant.io github.com raw.githubusercontent.com basemaps.cartocdn.com; font-src 'self' data:; connect-src 'self' brands.home-assistant.io; script-src-elem 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; worker-src 'self'; manifest-src 'self'"