Merge branch 'csp-dev' into 'main'

Set a separate CSP in local development

See merge request soapbox-pub/soapbox!3028

index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no">
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta http-equiv="content-security-policy" content="default-src 'none'; script-src 'self' 'wasm-unsafe-eval'; connect-src 'self' blob: https: wss:; img-src 'self' data: blob: https:; media-src 'self' https:; style-src 'self' 'unsafe-inline'; frame-src 'self' https:; font-src 'self'; base-uri 'self'; manifest-src 'self';">
+    <meta http-equiv="content-security-policy" content="<%- csp %>">
     <link href="/manifest.json" rel="manifest">
     <!--server-generated-meta-->
     <script type="module" src="./src/main.tsx"></script>

vite.config.ts

@@ -1,3 +1,4 @@
+/* eslint-disable quotes */
 /// <reference types="vitest" />
 import fs from 'node:fs';
 import { fileURLToPath, URL } from 'node:url';
@@ -12,6 +13,8 @@ import { VitePWA } from 'vite-plugin-pwa';
 import vitePluginRequire from 'vite-plugin-require';
 import { viteStaticCopy } from 'vite-plugin-static-copy';
 
+const { NODE_ENV } = process.env;
+
 export default defineConfig(({ command }) => ({
   build: {
     assetsDir: 'packs',
@@ -46,6 +49,9 @@ export default defineConfig(({ command }) => ({
       inject: {
         data: {
           snippets: readFileContents('custom/snippets.html'),
+          csp: NODE_ENV === 'production'
+            ? "default-src 'none'; script-src 'self' 'wasm-unsafe-eval'; connect-src 'self' blob: https: wss:; img-src 'self' data: blob: https:; media-src 'self' https:; style-src 'self' 'unsafe-inline'; frame-src 'self' https:; font-src 'self'; base-uri 'self'; manifest-src 'self';"
+            : "default-src 'none'; script-src 'self' 'wasm-unsafe-eval'; connect-src 'self' blob: https: wss: http://localhost:* http://127.0.0.1:* ws://localhost:* ws://127.0.0.1:*; img-src 'self' data: blob: https: http://localhost:* http://127.0.0.1:*; media-src 'self' https: http://localhost:* http://127.0.0.1:*; style-src 'self' 'unsafe-inline'; frame-src 'self' https:; font-src 'self'; base-uri 'self'; manifest-src 'self';",
         },
       },
     }),