Implementing Content Security Policy Headers
Hello, im trying to implement CSP headers, i did manage to do it for most part but could not setup nonces for livewire.js and other scripts at the footer like notifications.js etc. I understand the team discussed this and decided not to implement it due to slowing down development efforts but i believe this deserves a second discussion.
I propose that at the very least offer the ability to set nonces for these footer scripts. As it stands right now(corrent me if wrong), these asses get 'compiled' into public director under random filenames. If we had an option to add nonces this would be very helpful as it offers the ability for developers to decide on either implementing it or not, considering the issues that may come!
Plus, i have seen companies skip using filament due to the fact that CSP headers are so hard to be setup.
Thank you
27 Replies
If you have a solid solution a PR would probably be seriously considered.
As far as I know, Alpine is not CSP compatible and there is a feature-limited CSP version
That means probably way more changes than a few nonces for us:
https://alpinejs.dev/advanced/csp
Hello, I also really would need CSP 😕 Seems like this is big issue now days. I just got server from client, and I do get a lot of CSP errors 😕
Hi Mike, how I could help you here? I would really need to have CSP implemented. I am ready to join you in work and testing. Do you have github branch for what you did?
GitHub
Creating CSP compliance team · filamentphp filament · Discussion #1...
Hello, Who would be willing to work on CSP support / CSP compliance for filament? Thanks! a.
i started working on it but there were some javascript parts(footer if i recall correctly) that i could not have access to set nonces to so i skipped the whole thing. Its not an easy one
the goal is to add nonce to <script> and <style> as I understand, hmm... Can you share github branch you have, please? Maybe I will be able to finish it, I hope
@Mike I will be grateful for every findings you had, @Dennis Koch, @awcodes any tips would be greatly appreciated. Thank you!
I never tried anything in that direction, so I cannot help
I understand, thank you for information 🙂
work in progress, hope i will be able to make it somehow 🙂
@Dan Harrin Before severfire puts too much work into this. Would you merge a CSP version? Do you think there is much maintenance burden after the initial version?
I work on v3 now but i could work on v4 filament as well - as now v3 is my priority as my app uses it, the one i need CSP to work with 😄
Since v3 is not accepting feature requests, I would not merge it into there. I would be open to a v4 PR but do not expect it to be reviewed before v4 is released unless it introduces breaking changes.
People have attempted this before, and failed. You may be able to get a very loose CSP config working. But you will not be able to get unsafe-eval, inline styles, etc working because Livewire does not support CSP.
@Dan Harrin Thank you for information. Sorry to hear so many pepole failed. Maybe it would be good to chose vue in v5? Hmm.. If time allows I will try to work on v4 - I wonder if I will be able to make it. Otherwise I wonder then how could I protect better my app in v3 then, do you have workaround for this or best practices? If clients ask me for CSP I wonder what should I tell them about filament v3 and CSP
Filament is completely coupled to Livewire and there won't be a version without Livewire
I understand, then we would need to wait for CSP capable version of Livewire for this feature to be available.
There is a CSP version of AlpineJS, but it completely strips the usefulnes of Alpine. I doubt there will be improvements for CSP in the future.
I see, thank you for information, Yes, I saw AlpineJS CSP version, and Filament would require some work regarding it
if it would use it, yet if there is issue with Livewire then it is additional barrier
To bad there is no easy workaround / hack for it ;-D something out of the box
Not sure whether there is an issue with Livewire. I think Dan is talking about the Alpine limitation
ah, right, sorry, you're right - Livewire was regarding my notion about vue
Anyhow, thank you all for uselful information
@Mike If you would have github repository branch to show of this, I would appreciate to learn how you resolved some things 🙂 thanks!
@severfire sorry for late reply, been busy. I will send over what i created in a couple hours
@Dennis Koch is there any way to have a newer filament version where we can have access to the footer scripts? What i mean, just the ability to add nonces that that script is from a verified source. The rest i took care of. The CSP issue is a big deal but also tough to implement i know, however better having some protection than none, most of the cases it needs to just block fields that have direct script tags
thank you @Mike
@Mike some research I just made: https://x.com/calebporzio/status/1743092509872443581 https://github.com/livewire/livewire/discussions/6113 may be useful
Caleb Porzio (@calebporzio) on X
@valorin Not yet unfortunately because there is one or two places Livewire relies on eval (wire:click="something('one', 'two')") kinda thing
Twitter
GitHub
[V3] - CSP Header · livewire livewire · Discussion #6113
Will the new version V3 of livewire be compatible to CSP Headers. I can't get V2 working with CSP Headers. If tried implementing it with nginx and with laravel-spatie package with no success, b...
I wonder if we should look for people who tried doing it before, if they could help us with their findings. The problem is - i think - we weren't working on this all together
or, if there is one person that could for sure do it, I wonder if we could do some crowdfunding for him - i for sure could give some amont of money if he could deliver 🙂
there was also some conversation on reddit regarding this issue, that many programmers / companies don't go with filament because of this issue
Its Livewire and AlpineJS limitation, seems like. quoting Dan: "unsafe-eval, inline styles, etc working because Livewire does not support CSP" --> so seems like we would need to join Livewire CSP effort, or do workaround
https://x.com/calebporzio/status/1743092509872443581 I asked @ calebporzio question on Twitter regarding livewire
Caleb Porzio (@calebporzio) on X
@valorin Not yet unfortunately because there is one or two places Livewire relies on eval (wire:click="something('one', 'two')") kinda thing
Twitter
other finding: https://github.com/livewire/livewire/issues/650
GitHub
CSP content security policy nonce support · Issue #650 · livewire/l...
Modern web applications employ feature called Content-Security-Policy, which whitelists allowed scripts, styles, fonts, iframes and prevents execution/application of others. Describe the solution y...
@Mike hows going? 🙂
🙂