danschultzer

danschultzer

Pow Core Team

Blog Post: Content Security Policy header with Phoenix LiveView

How to set up the Content Security Policy header with Phoenix LiveView and support inline styles and scripts with CSP nonces.

Most Liked

lzzluca

lzzluca

Interesting post, ty.
Follow-up question one year later :smiley: 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?

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

danschultzer

Pow Core Team

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

dbern

I appreciate you adding tests in your examples. Great explanation as well. Thanks

Where Next?

Popular in Blog Posts Top

mudasobwa
Just blogged on the general approach to creating easily extendable applications with plugin support.
New
luckywatcher
Hey all! I just started a blog focused on web development in Elixir. I wrote my first article and thought I’d post it here for the whole...
New
New
jordiee
https://medium.com/@jpiepkow/distributed-state-is-hard-5a0d384c2f3c
New
axelson
I talk about how I really like to use runtime configuration and discuss some common pitfalls of configuration in Elixir.
New
rrrene
In this series, we take a look at the different ways to organize, structure and execute a good “flow” in our Elixir programs. The latest...
New
JEG2
I’m closing out, for now, my series on questions at the heart of development with an analysis of when we need more abstraction. For exam...
New
ryanrborn
A long-running GenServer holds orders, positions, strategy state, and operational flags for a system trading real capital. The post walks...
New
ErlangSolutions
An infographic that compares Erlang, Elixir, and Go’s strengths in the respect to the programming languages’ concurrency, reliability, sc...
New
axelson
I describe how we use Hot Reloading with Webpack to develop faster and show how to integrate Webpack 5, webpack-dev-server, and Phoenix f...
New

Other popular topics Top

TunkShif
This post is an instruction guide to help you setup your Neovim for Elixir development from scratch. It includes general information on h...
274 41989 114
New
Patoshizzle
After calling mix ecto.create I get this error: 17:00:32.162 [error] GenServer #PID<0.412.0> terminating ** (Postgrex.Error) FATAL...
New
freewebwithme
Using vs code and installed ElixirLS: support and debugger. And I got an error popped up on start up says Failed to run ‘elixir’ comma...
New
Emily
I have VueJS GUIs with the project generated using Webpack. I have Elixir modules that will need to be used by the VueJS GUIs. I forese...
New
fayddelight
I tried installing elixir 1.11.2 erlang 23.3.4 via asdf in my zsh shell. Enabled the versions locally and globally. When I list them ...
New
Brian
What is the proper way to load a module from a file in to IEX? In the python world, doing something like this pretty standard: from ....
New
AstonJ
We’ve put together this wiki for Phoenix LiveView - please feel free to add any info you feel is worth including. What is Phoenix LiveV...
New
jaysoifer
Is there a way to rollback a specific migration and only that one (“skipping” all the other ones)? Would mix ecto.rollback -v 200809061...
New
jononomo
For some reason my phoenix channels are working for me in my local dev environment, but as soon as I deploy via Docker, I get a 403 error...
New
dokuzbir
I want to highlight html closing tags when i click a html tag. That works in .html files but doesnt work for html.eex templates. How can...
New

Latest on Elixir Forum

Elixir Forum

We're in Beta

About us Mission Statement