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

MarcinKasprowicz
What I genuinely value at my workplace is that I can easily explore new languages through internal mobility. Throughout my career within ...
#js
New
marcelo
Long story short, over the past years we’ve been scaling our operation quite a lot at Unbabel. Most of our codebase is Python and some of...
New
aymanosman
This is a very short article about using AWS Systems Manager Parameter Store to load secret configuration in a simple way.
New
mudasobwa
Wrote some rant on Business Process Driven Development with Finite Automata (and Finitomata library in particular.)
New
New
brainlid
Elixir has a built-in Zip library that comes with OTP. This post explores how to use the zip module and asks the important question: “Is ...
New
bemesa21
Sorting and deleting many-to-many associations made easy with Ecto’s :sort_param and :delete_param options from cast_assoc, powered by Li...
New
sashaafm
How to use the blogs section You can post links to your blog posts either in one of the Official Blog Posts threads (like this one), or, ...
296 24412 135
New
New
davydog187
Hello all! I wrote a blog post called Elixir Observability: OpenTelemetry, Lightstep, Honeycomb. The post post covers how to integrate ...
New

Other popular topics Top

shahryarjb
Hello, I get Persian date from my client and convert it to normal calendar like this: def jalali_string_to_miladi_english_number(persi...
New
senggen
Erlang/OTP 25 [erts-13.2.2] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] 15:22:35.803 [error] gen_event {lager_file_backend...
New
Tee
can someone please explain to me how Enum.reduce works with maps
New
bsollish-terakeet
Credo is smart enough to check for (something like) this: assert length(the_list) == 0 with this response: Checking if an enum is empt...
New
jononomo
I am trying to figure out how Mix knows whether the environment is test, dev, or prod -- where is this set? Thanks.
New
rms.mrcs
Hi, I need to transform a list of numbers into a map where the keys are the indexes and the values are the original values of the list....
New
stefanluptak
Hello everybody, usually, I use a 29" ultra-wide monitor for VSCode which can easily accomodate explorer (files panel) + file with code ...
New
msaraiva
Surface is an experimental library built on top of Phoenix LiveView and its new LiveComponent API that aims to provide a more declarative...
564 42633 214
New
josevalim
Hi everyone, One of the features added to Elixir early on to help integration with Erlang code was the idea of overridable function defi...
New
lanycrost
Hi everyone! I need implement if…else if…else condition from my elixir code, and anymore of this control flow structures not work proper...
New

We're in Beta

About us Mission Statement