diff --git a/src/index.html b/src/index.html
index 6372ad9a..29c0d65c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -5,7 +5,8 @@
     <title>ActivityWatch</title>
     <link rel="icon" type="image/png" href="/static/logo.png">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <meta http-equiv="Content-Security-Policy" content="default-src 'self' 127.0.0.1:5600 127.0.0.1:5666 localhost:5666 *:27180 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'">
+    <!-- Verify with https://csp-evaluator.withgoogle.com/ -->
+    <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/vue.config.js b/vue.config.js
index 02c06995..926635e2 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -15,6 +15,9 @@ module.exports = {
     index: {
       entry: './src/main.js',
       template: './src/index.html',
+      templateParameters: {
+        cspDefaultSrc: process.env.NODE_ENV === 'production' ? '' : '*:5600 *:5666 ws://*:27180',
+      },
     },
   },
   chainWebpack: config => {
@@ -40,8 +43,8 @@ module.exports = {
     plugins: [
       new webpack.IgnorePlugin({ resourceRegExp: /^\.\/locale$/, contextRegExp: /moment$/ }),
       new webpack.DefinePlugin({
-        AW_SERVER_URL: process.env.AW_SERVER_URL,
         PRODUCTION: process.env.NODE_ENV === 'production',
+        AW_SERVER_URL: process.env.AW_SERVER_URL,
         COMMIT_HASH: JSON.stringify(_COMMIT_HASH),
       }),
       new CopyWebpackPlugin([{ from: 'static/', to: 'static' }]),
