posts/csp-nonce-with-phoenix/

[utterances-bot]

Phoenix LiveDashboard with Content Security Policy (CSP) | Francis Chabouis's blog

If your Phoenix application enforces CSP rules, and you try to deploy the Phoenix LiveDashboard in production, you will probably get something like this: In my case, inline CSS is not loaded because of the style-src CSP rule I had to enforce on the project: style-src 'self'; This means that all unsafe inline CSS code is disabled by the browser. Unfortunately, the Phoenix LiveDashboard uses inline CSS, and that’s not something I can change.

https://francis.chabouis.fr/posts/csp-nonce-with-phoenix/

[halpertw]

Thanks for sharing this tutorial. In your example, however, you're only adding the style-src attribute to your CSP. It renders the page fine but, if you look at the console, you still get errors. It looks like we need a Map instead.

However, I'm getting an error when I use a Map: protocol Phoenix.HTML.Safe not implemented for %{img: "fMIOCwnmMfsaOA", script: "m1oNHieWGoYMfw", style: "9EDcaW6JlgcfxQ"} of type Map.. Do you see the same thing?

For more details, see my question on Stack Overflow.

[fchabouis]

Hello @halpertw , I have updated the article with the answer to your question. I hope it helps you!