You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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__formhere) 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:
To allow anydata 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;
The text was updated successfully, but these errors were encountered:
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).The text was updated successfully, but these errors were encountered: