fix: allow Plausible inline init script via CSP nonce (#182)

Author: zorn

lib/flick_web/components/layouts/root.html.heex

@@ -14,7 +14,7 @@
     <!-- Privacy-friendly analytics by Plausible -->
     <script async src="https://plausible.io/js/pa-9IEM5uoRIpI0OwkV4Qqkv.js">
     </script>
-    <script>
+    <script nonce={@csp_nonce}>
       window.plausible=window.plausible||function(){(plausible.q=plausible.q||[]).push(arguments)},plausible.init=plausible.init||function(i){plausible.o=i||{}};
       plausible.init()
     </script>

lib/flick_web/router.ex

@@ -12,17 +12,26 @@ defmodule FlickWeb.Router do
     plug :put_root_layout, html: {FlickWeb.Layouts, :root}
     plug :protect_from_forgery
 
-    # Tailwind uses SVG data URLs for icons,
-    # so we need to allow them with `img-src`.
-    # https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
+    # Our Content Security Policy. Notes:
+    #
+    # - `img-src` allows `data:` URLs because Tailwind uses SVG data URLs for
+    #   icons.
+    # - `style-src` allows `'unsafe-inline'` to avoid web console issues with
+    #   Phoenix Storybook.
     #
-    # To avoid web console issues with Phoenix Storybook we've added
-    # `style-src 'self' 'unsafe-inline'` which feels unfortunate and
-    # might be reconsidered.
+    # `put_csp_nonce` below augments this static policy with a per-request nonce
+    # so the inline Plausible analytics `<script>` in the root layout is allowed
+    # without opening `script-src` up to `'unsafe-inline'`. We keep the full
+    # policy here (rather than building it entirely in the plug) so Sobelow's
+    # `Config.CSP` check can still verify a CSP is present.
+    #
+    # https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
     plug :put_secure_browser_headers, %{
       "content-security-policy" =>
         "default-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'; script-src 'self' https://plausible.io; connect-src 'self' https://plausible.io"
     }
+
+    plug :put_csp_nonce
   end
 
   pipeline :admin do
@@ -33,6 +42,19 @@ defmodule FlickWeb.Router do
     plug :accepts, ["json"]
   end
 
+  # Generates a per-request nonce, assigns it to the conn (so the root layout can
+  # stamp it onto the inline Plausible `<script>`), and splices it into the
+  # `script-src` directive of the CSP header set by `put_secure_browser_headers`.
+  defp put_csp_nonce(conn, _opts) do
+    nonce = 18 |> :crypto.strong_rand_bytes() |> Base.encode64()
+
+    conn
+    |> assign(:csp_nonce, nonce)
+    |> update_resp_header("content-security-policy", "", fn csp ->
+      String.replace(csp, "script-src ", "script-src 'nonce-#{nonce}' ")
+    end)
+  end
+
   scope "/" do
     storybook_assets()
   end