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
Dependent on CSP settings checkboxes do not display correctly due to use of data scheme.
Here's what the checkbox looks like with strict CSP enabled:
Issue occurs because tailwindcss-forms checkbox uses a base64-encoded SVG background image. To validate this is the case simply build the repro with pnpm i && pnpm dev -- --open then open svelte.config.js and remove the CSP setting (browser will auto-reload showing the checkbox).
Is it possible to add a fallback experience for apps blocking unsafe evaluation of data attributes?
The text was updated successfully, but these errors were encountered:
I found a reasonable workaround for the display issue which is to save the SVG graphic to a file and add a style rule to use the image as the background (allowed under strict CSP) as opposed to attempting to inline a data uri . Doing so causes the browser to skip attempting to use data:.
I found a reasonable workaround for the display issue which is to save the SVG graphic to a file and add a style rule to use the image as the background (allowed under strict CSP) as opposed to attempting to inline a data uri . Doing so causes the browser to skip attempting to use data:.
What version of @tailwindcss/forms are you using?
v0.4.0
What version of Node.js are you using?
v17.3.0
What browser are you using?
Ungoogled Chromium
What operating system are you using?
Arch Linux
Reproduction repository
https://github.com/vhscom/repro-tailwind-forms-checkbox-issue
Describe your issue
Dependent on CSP settings checkboxes do not display correctly due to use of
data
scheme.Here's what the checkbox looks like with strict CSP enabled:
Issue occurs because
tailwindcss-forms
checkbox uses a base64-encoded SVG background image. To validate this is the case simply build the repro withpnpm i && pnpm dev -- --open
then opensvelte.config.js
and remove the CSP setting (browser will auto-reload showing the checkbox).Is it possible to add a fallback experience for apps blocking unsafe evaluation of
data
attributes?The text was updated successfully, but these errors were encountered: