CSP Safe Mode

[azizabbas]

Flux version

v2

Livewire version

v3

Tailwind version

v4

Browser and Operating System

Chrome on MacOS

What is the problem?

I am creating this issue as followup of feature request #2119

Flux UI generates inline Alpine.js with let statements (like let input = $el.closest(...)), which CSP-safe mode doesn't support.

This means we cannot have CSP Safe mode enabled in our livewire config if we are to use Flux UI at full, like using clear button to clear input and related.

This must be considered in future releases of Flux and maybe there is a workaround to fix this.

Currently, we have to use AlpineJS with Javascript to achieve all that if we want to have CSP Safe mode enabled.

Code snippets to replicate the problem

Screenshots/ screen recordings of the problem

How do you expect it to work?

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be closed if I haven't met the criteria above.

[calebporzio]

Ah good point. Let's start by maybe @joshhanley listing out all the places we use csp-violating expressions here and then we can talk next steps. I don't see why we wouldn't be able to make flux csp-safe.

[joshhanley]

I've done a search to see where we use Alpine and this is what I came up with.

Flux

Input

• input/clearable.blade.php
• input/copyable.blade.php
• input/expandable.blade.php
• input/file.blade.php
• input/index.blade.php
• input/viewable.blade.php

Modal

• modal/index.blade.php
• modal/trigger.blade.php

Sidebar

• sidebar/index.blade.php
• sidebar/toggle.blade.php

Flux Pro

Accordion

• accordion/content.blade.php
• accordion/item.blade.php

Command

• command/input.blade.php

Date Picker

• date-picker/button.blade.php

Pillbox

• pillbox/search.blade.php
• pillbox/trigger.blade.php

Select

• select/button.blade.php
• select/input.blade.php
• select/search.blade.php

Time Picker

• time-picker/button.blade.php
• time-picker/input.blade.php

Toast

• toast/group.blade.php
• toast/index.blade.php

[ganyicz]

I've submitted a PR to make all components CSP-compatible.