fix: fix CSP for both vite and webpack

ErikBjare · ErikBjare · commit 8b2d8865dd2e · 2024-05-03T21:29:04.000+02:00
diff --git a/index.html b/index.html
@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <!-- Verify with https://csp-evaluator.withgoogle.com/ -->
     <!-- TODO: fix CSP (should depend on prod/dev mode, as pre-vite )-->
-    <meta http-equiv="Content-Security-Policy" content="default-src 'self' *:5666 ws://*:27180 https://api.github.com/repos/ActivityWatch/activitywatch/releases/latest; img-src 'self' data:; font-src 'self' data:; style-src 'self' 'unsafe-inline'; object-src 'none'; script-src 'self' 'unsafe-eval'">
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self' <%= htmlWebpackPlugin.options.templateParameters.cspDefaultSrc %> https://api.github.com/repos/ActivityWatch/activitywatch/releases/latest; img-src 'self' data:; font-src 'self' data:; style-src 'self' 'unsafe-inline'; object-src 'none'; script-src 'self' 'unsafe-eval'">
   </head>
   <body>
     <noscript>
diff --git a/vite.config.js b/vite.config.js
@@ -4,16 +4,35 @@ import vue from '@vitejs/plugin-vue2';
 
 export default defineConfig(({ mode }) => {
   const PRODUCTION = mode === 'production';
+  const CSP = PRODUCTION ? '' : '*:5600 *:5666 ws://*:27180';
 
+  // Sets the CSP
+  const setCsp = () => {
+    return {
+      name: 'html-transform',
+      transformIndexHtml(html) {
+        const pattern = '<%= htmlWebpackPlugin.options.templateParameters.cspDefaultSrc %>';
+        // check if the pattern exists in the html, if not, throw error
+        if (!html.includes(pattern)) {
+          throw new Error(`Could not find pattern ${pattern} in the html file`);
+        }
+        return html.replace(pattern, CSP);
+      },
+    };
+  };
+
+  // Return the configuration
   return {
+    plugins: [setCsp(), vue()],
     server: {
       port: 27180,
-      // This breaks a bunch of style-related stuff (at least):
+      // TODO: Fix this.
+      // Breaks a bunch of style-related stuff etc.
+      // We'd need to move in the entire CSP config in here (not just the default-src) if we want to use this.
       //headers: {
       //  'Content-Security-Policy': PRODUCTION ? "default-src 'self'" : "default-src 'self' *:5666",
       //},
     },
-    plugins: [vue()],
     publicDir: './static',
     resolve: {
       alias: { '~': path.resolve(__dirname, 'src') },
