I've tried searching the web, but had no luck. I've been using Chrome/Edge to work on my website and today I tried to open it in Firefox (93.0) and I noticed that none of my icons are loading. This error message appears in console:

Content Security Policy: The page’s settings blocked the loading of a resource at http://localhost/icons.svg (“default-src”).

This seems to indicate that the default-src was used as a fallback. I'm running an Apache server with this CSP:

Header set Content-Security-Policy "default-src 'none'; img-src 'self'; object-src 'none'; script-src 'self'; style-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'self'; connect-src 'self'"

The icon sprite is used like this:

<svg class="icon"><use href="icons.svg#settings"></use></svg>

This is only an issue in Firefox since Edge, Chrome and iOS Safari all work fine. Is there any way for me to fix this?

CodePudding user response：

This is an old Firefox browser bug - img-src directive does not cover sources in the <use xlink:href=> tag.

Firefox uses default-src to control <use xlink:href=> tag, therefore to fix issue make default-src 'self' instead of default-src 'none'.