Open jackdbd opened 5 months ago
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.
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 theimg-src
directive of our Content-Security-Policy header:To allow any data URL, we can write this
img-src
directive instead: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).