Dynamically add websocket endpoints to connect-src CSP

apps/explorer_web/lib/explorer_web/csp_header.ex

@@ -0,0 +1,29 @@
+defmodule ExplorerWeb.CSPHeader do
+  @moduledoc """
+  Plug to set content-security-policy with websocket endpoints
+  """
+
+  alias Phoenix.Controller
+
+  def init(opts), do: opts
+
+  def call(conn, _opts) do
+    Controller.put_secure_browser_headers(conn, %{
+      "content-security-policy" => "\
+        connect-src 'self' #{websocket_endpoints(conn)}; \
+        default-src 'self';\
+        script-src 'self' 'unsafe-inline' 'unsafe-eval';\
+        style-src 'self' 'unsafe-inline' 'unsafe-eval' https://fonts.googleapis.com;\
+        img-src 'self' 'unsafe-inline' 'unsafe-eval' data:;\
+        font-src 'self' 'unsafe-inline' 'unsafe-eval' https://fonts.gstatic.com data:;\
+      "
+    })
+  end
+
+  defp websocket_endpoints(conn) do
+    endpoint = Controller.endpoint_module(conn)
+    ws_endpoint = %{endpoint.struct_url | scheme: "ws"} |> URI.to_string()
+    wss_endpoint = %{endpoint.struct_url | scheme: "wss"} |> URI.to_string()
+    "#{ws_endpoint} #{wss_endpoint}"
+  end
+end

apps/explorer_web/lib/explorer_web/router.ex

@@ -6,17 +6,7 @@ defmodule ExplorerWeb.Router do
     plug(:fetch_session)
     plug(:fetch_flash)
     plug(:protect_from_forgery)
-
+    plug(ExplorerWeb.CSPHeader)
-    plug(:put_secure_browser_headers, %{
-      "content-security-policy" => "\
-        connect-src 'self' ws://localhost:*;\
-        default-src 'self';\
-        script-src 'self' 'unsafe-inline' 'unsafe-eval';\
-        style-src 'self' 'unsafe-inline' 'unsafe-eval' https://fonts.googleapis.com;\
-        img-src 'self' 'unsafe-inline' 'unsafe-eval' data:;\
-        font-src 'self' 'unsafe-inline' 'unsafe-eval' https://fonts.gstatic.com data:;\
-      "
-    })
   end
 
   pipeline :api do