Content-Security-Policy for <svg><use>

I have a document which is simply:

<html>
<head><title>Hi</title></head>
<body>
	<svg><use href="icons-nav-main.svg#icon-messages"></use></svg>
</body>
</html>

In my content-security-policy I have set the default to allow nothing but allowed everything else:

Content-Security-Policy: default-src 'none';
	base-uri 'none';
	connect-src 'self';
	font-src 'self';
	frame-src 'self';
	img-src 'self';
	manifest-src 'self';
	media-src 'self';
	object-src 'self';
	script-src 'self';
	style-src 'self';
	worker-src 'self';

Firefox won’t display the SVG, saying

Content Security Policy: The page's settings blocked the loading of a resource at <url>/icons-nav-main.svg ("default-src").

It displays fine in Chrome and friends though.

Is there another CSP clause I should apply to get this working?

1 Like

https://bugzilla.mozilla.org/show_bug.cgi?id=1303364 :frowning:

1 Like

Hi @Hamish_Moffatt

Looking at the bug and the GitHub issues the most cross-browser way to do this seems to be changing <use ... to <image .... This would to be honored by Firefox as a real image import and would therefore make use of img-src 'self';.
Does that work in your case?

Cheers,
Michael