danschultzer
How to set up the Content Security Policy header with Phoenix LiveView and support inline styles and scripts with CSP nonces.
Where Next?
Trending in Blog Posts
Other Trending Topics
Latest on Elixir Forum
Sponsor Spotlight
Deploy Phoenix to your own VPS with PaaS ease: push-to-deploy, zero downtime, auto SSL, managed Postgres. 14-day free trial at potions.io
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixirconf-us
- #ai
- #blog-post
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #hex
- #security
Our Sponsors
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!
Practical resources that improve the lives of professional developers.
Bringing learning, work and compliance together since 1987.
**Building the future of software with AI, trust, and human connection.**
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Most Liked- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
lzzluca
Interesting post, ty.
My understanding is that the nonce stays the same within the same live session. This means that if a few routes share the same live session, navigating between those routes won’t update the nonce. Is my understanding correct?
Follow-up question one year later
The idea is that a new nonce is created at every page re-load, but an SPA does load the page only once, then updates parts of it: I think that is the reason why on SPA the use of nonce is discouraged.
I wonder how that reasoning applies to Phoenix: navigating between routes that share the same live session is basically the same of an SPA, but then navigating to a route that creates a new live session would reload the page, which is the wanted behaviour for nonce support, so a Phoenix app is a bit of a “hybrid”.
Is it safe to use nonce with Phoenix? Or should it be avoided? Thoughts? The nonce is very handy so to have it in place would be interesting, as far as it is safe.
danschultzer
Yes, the nonce stays the same for as long as the LiveView process stays alive.
I’ve been using this in production with LiveView ever since writing this post. As long as you use the same nonce as set in the header of the initial page load you’ll be fine.
It gets tricky when you have JS libraries inject script or style tags all over the place. Many JS libraries don’t have any ability to propagate the nonce, so out of necessity I end up just listening to any style or script tags that is added to the page and inject the nonce attribute on them. Not really safe, but there’s not much else that can be done, and it’s better than nothing.
If you don’t deal with that problem then this is very safe. The LiveView session controls everything rendered and knows the nonce.
If you can you should just push all your JS and CSS to your static asset files. If absolutely necessary with inline scripts/styles, opt for using content hash in the header. Nonce is what you reach for last, when you got tags with too many content permutations to do it any other way.
dbern
I appreciate you adding tests in your examples. Great explanation as well. Thanks