From 41480316c22c5844c81fd2fba14e88f024699c44 Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Sat, 7 Mar 2026 19:13:48 +0000
Subject: [PATCH] Fix CSP settings
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

⏺ Here's a breakdown of each directive:

  ┌─────────────────┬────────────────────────────────────────────────┬─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
  │    Directive    │                     Value                      │                                                         Purpose                                                         │
  ├─────────────────┼────────────────────────────────────────────────┼─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ default-src     │ 'self'                                         │ Fallback for any resource type not explicitly listed — only allow from the app's own origin                             │
  ├─────────────────┼────────────────────────────────────────────────┼─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ script-src      │ 'self'                                         │ JavaScript can only be loaded from the app's origin (no external scripts, no inline)                                    │
  ├─────────────────┼────────────────────────────────────────────────┼─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ style-src       │ 'self' 'unsafe-inline' https://rsms.me         │ Stylesheets from the app's origin, inline styles (needed by LiveView), and the https://rsms.me/inter/ hosted on rsms.me │
  ├─────────────────┼────────────────────────────────────────────────┼─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ font-src        │ 'self' https://rsms.me                         │ Font files from the app's origin and rsms.me (Inter font)                                                               │
  ├─────────────────┼────────────────────────────────────────────────┼─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ img-src         │ 'self' data: https://lastfm.freetls.fastly.net │ Images from the app's origin, data: URIs (inline base64 images), and Last.fm's CDN for album/artist artwork             │
  ├─────────────────┼────────────────────────────────────────────────┼─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ connect-src     │ 'self'                                         │ XHR/fetch/WebSocket connections only to the app's origin (covers LiveView's WebSocket)                                  │
  ├─────────────────┼────────────────────────────────────────────────┼─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ frame-ancestors │ 'self'                                         │ The app can only be embedded in iframes by itself (clickjacking protection)                                             │
  ├─────────────────┼────────────────────────────────────────────────┼─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ base-uri        │ 'self'                                         │ Restricts <base> tag to the app's origin (prevents base tag injection attacks)                                          │
  └─────────────────┴────────────────────────────────────────────────┴─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘

  Notable things not allowed by this policy:
  - No inline <script> tags or eval()
  - No external JavaScript from CDNs
  - No embedding in third-party iframes
  - No connections to external APIs from the browser (all external API calls go through the server)
---
 lib/music_library_web/router.ex | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/music_library_web/router.ex b/lib/music_library_web/router.ex
index 07eac241..14306af3 100644
--- a/lib/music_library_web/router.ex
+++ b/lib/music_library_web/router.ex
@@ -14,7 +14,7 @@ defmodule MusicLibraryWeb.Router do
 
     plug :put_secure_browser_headers, %{
       "content-security-policy" =>
-        "default-src 'self'; script-src 'self'; style-src 'self' https://rsms.me; font-src 'self' https://rsms.me; img-src 'self' data:; connect-src 'self'; frame-ancestors 'self'; base-uri 'self'"
+        "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline' https://rsms.me; font-src 'self' https://rsms.me; img-src 'self' data: https://lastfm.freetls.fastly.net; connect-src 'self'; frame-ancestors 'self'; base-uri 'self'"
     }
   end