Checkbox display issue with CSP enabled

[vhscom]

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 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?

[vhscom]

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:.

[theonelucas]

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:.

The SVG file:

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'><path d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z' /></svg>

The rule:

.form-checkbox:checked {
    background-image: url("/site/assets/icons/checkbox.svg");
}

[smitpatelx]

• You should add img-src 'self' data:; in your CSP to allow loading images encoded in your css.
• And if you are using tailwind v4, here is how I achieved customizable check box using css and classes:

/* checkbox.css */

input[type="checkbox"] {
  @apply relative bg-none;

  &::after {
    content: '';
    @apply block w-full h-full z-10
    scale-0 opacity-0 transition-all duration-400 ease-in-out
    absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2
    bg-current pointer-events-none;

    mask-size: 120%;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  }

  &:checked::after {
    @apply opacity-100 scale-100 transition-all duration-400 ease-in-out pointer-events-none;
  }
}

<input
  checked={true} 
  type="checkbox"
  className="w-5 h-5
    bg-zinc-900 checked:bg-sky-500 disabled:bg-zinc-700 after:bg-transparent
    checked:after:text-sky-950 disabled:after:text-zinc-500"
/>

• checked:after:text-sky-950 class will generate the following code in final css output:

.checked\:after\:text-sky-950 {
    &:checked {
        &::after {
            content: var(--tw-content);
            color: var(--color-sky-950) /* oklch(0.293 0.066 243.157) = #052f4a */;
        }
    }
}