Inline SVG in search form blocked by Content-Security-Policy

[jackdbd]

Description

I have a website with a very strict Content-Security-Policy.

I read the documentation and managed to allow the Pagefind WebAssembly module. I noticed there is another small issue though: the Svelte component for the search form (see the .pagefind-ui__form here) uses a data URL to inline an SVG (the magnifying glass icon). This SVG is blocked by my CSP.

A possible solution

To allow only the SVG used by the Pagefind UI search form, we can include the following data: scheme source in the img-src directive of our Content-Security-Policy header:

img-src 'self' data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.7549 11.255H11.9649L11.6849 10.985C12.6649 9.845 13.2549 8.365 13.2549 6.755C13.2549 3.165 10.3449 0.255005 6.75488 0.255005C3.16488 0.255005 0.254883 3.165 0.254883 6.755C0.254883 10.345 3.16488 13.255 6.75488 13.255C8.36488 13.255 9.84488 12.665 10.9849 11.685L11.2549 11.965V12.755L16.2549 17.745L17.7449 16.255L12.7549 11.255ZM6.75488 11.255C4.26488 11.255 2.25488 9.245 2.25488 6.755C2.25488 4.26501 4.26488 2.255 6.75488 2.255C9.24488 2.255 11.2549 4.26501 11.2549 6.755C11.2549 9.245 9.24488 11.255 6.75488 11.255Z' fill='%23000000'/%3E%3C/svg%3E%0A

To allow any data URL, we can write this img-src directive instead:

img-src 'self' data:;

I guess it should also be possible to allow only inline SVGs and no other MIME types (e.g. image/jpeg) using the directive below (I haven't tested it though).

img-src 'self' data:image/svg+xml;

[jackdbd]

I forgot to mention that allowing a data: scheme is something that the user has to do.

Instead, something that Pagefind could do is not embedding the SVG, and hosting it somewhere (e.g. AWS S3, Google Cloud Storage, Cloudflare R2, etc). Or even letting the user self-host the SVG.