Published on

Content Security Policy header with Phoenix LiveView

If you use sobelow you will get a Missing Content-Security-Policy error with a default Phoenix setup. Managing Content Security Policy (CSP) can be tedious, so you may just want to opt for a catch-all 'unsafe-inline' approach to bypass it all. We should do better than that.

In this blog post, I’ll build a module with helpers to integrate CSP handling into Phoenix and Phoenix LiveView. I think the code is too minimal to be a dependency, but some of it could maybe be added upstream in the put_secure_browser_headers plug in Phoenix.

Writing our first CSP header

CSP headers consist of directives with sources. The recommendation for a default policy is default-src 'self';. This mitigates most typical cross-site scripting (XSS) attacks. 'self' means that only resources of the same scheme, host, and port, as the page itself can be executed.

With Phoenix we have a bunch of data: blobs from the hero icons. These can’t be loaded with the above policy so we should add img-src: 'self' data:; to our policy. To add a second source, like a CDN, we just add it to the sources list: default-src 'self';.

This is straightforward, but now comes the tricky part. What if we have inline styles or scripts?

If we can’t move it out of the DOM we should use CSP hashing. The tag will only be executed if the hashed value of the content matches the CSP source hash. As an example, we can set up the sources list with script-src 'sha256-RFWPLDbv2BY+rCkDzsE+0fr8ylGr2R2faWMhq4lfEQc='; for the following inline script to execute:


What if we have styles or scripts with dynamic content? If we are only dealing with REST this would be trivial as we can just produce the hash on each request, but we got our LiveView socket pushing diffs while the CSP header has already been sent. If possible we could calculate all the possible hash values and add them to the CSP source list, but in my case, there were way too many variants.

We shouldn’t opt for the obviously unsafe 'unsafe-inline'. Instead, we will use a nonce.

On the initial request, we will generate the nonce and then ensure we use the same nonce throughout the LiveView session.

An inline style example

To use inline styles with nonces we must use <style> tags. Elements with style attributes only support CSP hashes. So we must move any style attributes out to <style> tags with a nonce attribute:

<span id="progress"></span>

<style nonce={get_csp_nonce()}>
  #progress {
    width: <%= @progress %>%;

CSP helpers

Now let us set up our CSP module. It will look similar to the CSRF plug. The important points here are:

  • A unique nonce is used on each REST response
  • The nonce is generated using a cryptographically secure random number generator
  • The nonce has at least 128 bits of entropy
  • The same nonce is used across the initial request process
  • The same nonce is used across the LiveView Socket
defmodule MyAppWeb.CSP do
  @moduledoc """
  Module that includes Plug and LiveView helpers to handle Content Security
  Policy header.

  For inline `<style>` and `<script>` tags, nonce should be used. When the REST
  request is processed a nonce is added to the process dictionary. This ensures
  the nonce stays the same throughout the call, as the nonce in the tags must
  match the nonce in the header.

  To allow for inline `<style>` and/or `<script>` tag you must set a `'nonce'`

  ## Set up

  To set up MyAppWeb.CSP in your app you must:

  ### 1) Configure `lib/my_app_web.ex`

  Ensure you import the helpers in `MyAppWeb`.

    def router do
      quote do
        use Phoenix.Router, helpers: false

        # Import common connection and controller functions to use in pipelines
        import Plug.Conn
        import Phoenix.Controller
        import Phoenix.LiveView.Router

        import MyAppWeb.CSP, only: [put_content_security_policy: 2]

    # ...

    def html do
      quote do
        use Phoenix.Component

        import MyAppWeb.CldrHelpers

        # Import convenience functions from controllers
        import Phoenix.Controller,
          only: [get_csrf_token: 0, view_module: 1, view_template: 1]

        import MyAppWeb.CSP,
          only: [get_csp_nonce: 0]

        # Include general helpers for rendering HTML

    # ...

    def live_view do
      quote do
        use Phoenix.LiveView,
          layout: {MyAppWeb.Layouts, :app}

        on_mount MyAppWeb.CSP


  ### 2) Add nonce metatag to the HTML document

  Add the following metatag head to

    <meta name="csp-nonce" content={get_csp_nonce()} />

  ### 3) Pass the CSP nonce to the LiveView socket

  Ensure you pass on the CSP nonce to the LiveView socket in

    let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");
    let cspNonce = document.querySelector("meta[name='csp-nonce']").getAttribute("content")
    let liveSocket = new LiveSocket("/live", Socket, {
      longPollFallbackMs: 2500,
      params: { _csrf_token: csrfToken, _csp_nonce: cspNonce }

  ## Usage

  If you got inline `<style>` or script tags you must set the nonce attribute:

      <style nonce={get_csp_nonce()}>
        // ...
  require Logger

  import Plug.Conn

  @doc """
  Sets a content security policy header.

  By default the policy is `default-src 'self'`. `'nonce'` source will be
  expanded with an auto-generated nonce that is persisted in the process

  The options can be a function or a keyword list. Sources can be a binary
  or list of binaries. Duplicate directives will be merged together.

  ## Example

    plug :put_content_security_policy,
      img_src: "'self' data:`,
      style_src: "'self' 'nonce'"

    plug :put_content_security_policy,
      img_src: [

    plug :put_content_security_policy, &MyAppWeb.CSPPolicy.opts/1
  def put_content_security_policy(conn, fun) when is_function(fun, 1) do
    put_content_security_policy(conn, fun.(conn))

  def put_content_security_policy(conn, opts) when is_list(opts) do
    csp =
      |> Keyword.has_key?(:default_src)
      |> case do
        false -> [default_src: "'self'"] ++ opts
        true -> opts
      |> Enum.reduce([], fn{name, sources}, acc ->
        sources = List.wrap(sources)

        Keyword.update(acc, name, sources, & &1 ++ sources)
      |> Enum.reduce("", fn {name, sources}, acc ->
        name = String.replace(to_string(name), "_", "-")

        sources =
          |> Enum.uniq()
          |> Enum.join(" ")
          |> String.replace("'nonce'", "'nonce-#{get_csp_nonce()}'")

        "#{acc}#{name} #{sources};"

    put_resp_header(conn, "content-security-policy", csp)

  @doc """
  Gets the CSP nonce.

  Generates a nonce and stores it in the process dictionary if one does not exist.
  def get_csp_nonce do
    if nonce = Process.get(:plug_csp_nonce) do
      nonce = csp_nonce()
      Process.put(:plug_csp_nonce, nonce)

  defp csp_nonce do
    |> :crypto.strong_rand_bytes()
    |> Base.encode64(padding: false)

  @doc """
  Loads the CSP nonce into the LiveView process.
  def on_mount(:default, _params, _session, %{private: %{connect_params: %{"_csp_nonce" => nonce}}} = socket) do
    Process.put(:plug_csp_nonce, nonce)

    {:cont, socket}

  def on_mount(:default, _params, _session, socket) do
    unless Process.get(:plug_csp_nonce) do
      LiveView session was misconfigured.

      1) Ensure the `put_content_security_policy` plug is in your router pipeline:

          plug :put_content_security_policy

      2) Define the CSRF meta tag inside the `<head>` tag in your layout:

          <meta name="csp-nonce" content={MyAppWeb.CSP.get_csp_nonce()} />

      3) Pass it forward in your app.js:

          let csrfToken = document.querySelector("meta[name='csp-nonce']").getAttribute("content");
          let liveSocket = new LiveSocket("/live", Socket, {params: {_csp_nonce: cspNonce}});

    {:cont, socket}

The module documents how to install the CSP helpers in your Phoenix app. This is how I’m using the plug helper in my router pipeline:

pipeline :browser do
  plug :accepts, ["html"]
  plug :fetch_session
  plug :fetch_live_flash
  plug :put_root_layout, html: {MyAppWeb.Layouts, :root}
  plug :protect_from_forgery
  plug :put_secure_browser_headers

  plug :put_content_security_policy,
    img_src: "'self' data:",
    style_src: "'self' 'nonce'"

  plug :load_current_user

Unfortunately, sobelow can’t skip plugs with inline skip comment so we must run mix sobelow --mark-skip-all to generate a .sobelow-skips file to skip the error in subsequent runs.

If you need to dynamically set CSP headers you can pass in a function:

plug :put_content_security_policy, &MyAppWeb.CSPPolicy.policy/1
defmodule MyAppWeb.CSPPolicy do
  @moduledoc false

  def policy(_conn) do
    if dsn = Application.get_env(:sentry, :dsn) do
      dsn = URI.parse(dsn)

        script_src: [
        connect_src: [
          URI.to_string(%{dsn | userinfo: nil, path: "/api#{dsn.path}/"})


There is a potential security risk using nonce here; an attacker may find a way to inject payload through the LiveView socket with the DOM manipulation. That could be in unescaped user content pushed to a <style> or <script> tag. The hash eliminates these risks, and you should opt for no inline content if possible.

Tests for MyAppWeb.CSP.
defmodule MyAppWeb.CSPTest do
  use MyAppWeb.ConnCase

  alias MyAppWeb.CSP

  describe "put_content_security_policy/2" do
    test "sets default CSP header", %{conn: conn} do
      conn = CSP.put_content_security_policy(conn, [])

      assert get_resp_header(conn, "content-security-policy") == ["default-src 'self';"]

    test "with options", %{conn: conn} do
      conn = CSP.put_content_security_policy(conn, img_src: "'self' data:")

      assert get_resp_header(conn, "content-security-policy") == ["default-src 'self';img-src 'self' data:;"]

    test "with list of sources", %{conn: conn} do
      conn = CSP.put_content_security_policy(conn, default_src: ["'self'", "data:"])

      assert get_resp_header(conn, "content-security-policy") == ["default-src 'self' data:;"]

    test "with duplicate directives", %{conn: conn} do
      conn = CSP.put_content_security_policy(conn, default_src: "'self'", default_src: "data:")

      assert get_resp_header(conn, "content-security-policy") == ["default-src 'self' data:;"]

    test "with duplicate sources", %{conn: conn} do
      conn = CSP.put_content_security_policy(conn, default_src: ["'self'", "data:"], default_src: "data:")

      assert get_resp_header(conn, "content-security-policy") == ["default-src 'self' data:;"]

    test "with nonce source", %{conn: conn} do
      conn = CSP.put_content_security_policy(conn, default_src: "'self' 'nonce'")

      assert ["default-src 'self' 'nonce-" <> _nonce] = get_resp_header(conn, "content-security-policy")

    defp my_function(conn) do

    test "with function", %{conn: conn} do
      conn = CSP.put_content_security_policy(conn, &my_function/1)

      assert get_resp_header(conn, "content-security-policy") == ["default-src #{};"]

  describe "get_csp_nonce/0" do
    test "token has no padding" do
      refute CSP.get_csp_nonce() =~ "="

    test "token is stored in process dictionary" do
      assert CSP.get_csp_nonce() == CSP.get_csp_nonce()

      token = CSP.get_csp_nonce()
      assert token != CSP.get_csp_nonce()

Hi, I'm Dan Schultzer, I write in this blog, work a lot in Elixir, maintain several open source projects, and help companies streamline their development process