diff --git a/web/src/app.html b/web/src/app.html
index 776764850fad8..9c2416e879ca4 100644
--- a/web/src/app.html
+++ b/web/src/app.html
@@ -66,7 +66,7 @@
         background-color: black;
       }
     </style>
-    <script>
+    <script nonce="%sveltekit.nonce%">
       /**
        * Prevent FOUC on page load.
        */
diff --git a/web/svelte.config.js b/web/svelte.config.js
index 5daf958986adb..36f1dd11bf145 100644
--- a/web/svelte.config.js
+++ b/web/svelte.config.js
@@ -31,6 +31,15 @@ const config = {
       $i18n: '../i18n',
       'chromecast-caf-sender': './node_modules/@types/chromecast-caf-sender/index.d.ts',
     },
+    csp: {
+      directives: {
+        'default-src': ['self'],
+        'connect-src': ['self', 'blob:', 'https://*.immich.cloud', 'https://*.maptiler.com'], // TODO: check if custom maptiler json works
+        'img-src': ['self', 'blob:', 'data:'],
+        'script-src': ['self', 'wasm-unsafe-eval', 'https://*.gstatic.com'],
+        'worker-src': ['self', 'blob:'],
+      },
+    },
   },
 };