From dcc339a2b4a1e96d2d87ee9a3029d05453cf3aa1 Mon Sep 17 00:00:00 2001
From: "Abderraouf Ghrissi (abgh)" <abgh@odoo.com>
Date: Tue, 14 Apr 2026 18:45:57 +0200
Subject: [PATCH] [SEC] restrict CORS to authorized extension IDs and integrate
 with settings

Fixes a security issue where any Firefox extension could access the server without restriction.
Granular control is now provided via a dedicated CORS configuration modal.

Also removes legacy 'cors_origins' from the main settings store and deletes the obsolete 'ServerSettings.vue', as CORS configuration is now managed through a dedicated model and storage namespace.
---
 src/components/CorsConfigModal.vue    | 107 ++++++++++++++++++++++++++
 src/stores/cors.ts                    |  67 ++++++++++++++++
 src/stores/settings.ts                |   3 -
 src/views/settings/ServerSettings.vue |  33 --------
 src/views/settings/Settings.vue       |  11 +--
 5 files changed, 180 insertions(+), 41 deletions(-)
 create mode 100644 src/components/CorsConfigModal.vue
 create mode 100644 src/stores/cors.ts
 delete mode 100644 src/views/settings/ServerSettings.vue

diff --git a/src/components/CorsConfigModal.vue b/src/components/CorsConfigModal.vue
new file mode 100644
index 00000000..bb93ac6b
--- /dev/null
+++ b/src/components/CorsConfigModal.vue
@@ -0,0 +1,107 @@
+<template lang="pug">
+b-modal(id="cors-config-modal" title="Security & CORS" @show="load" @ok="save" :ok-disabled="loading || !config" size="lg")
+  div(v-if="config")
+    b-alert(v-if="config.needs_restart" show variant="warning" class="mb-4")
+      h5.alert-heading ⚠️ Server Restart Required
+      p.mb-0
+        | CORS settings are only applied once at startup. You must <b>stop and restart the server</b> for any changes made here to take effect.
+
+    b-form-group(label="Fixed CORS origins" label-cols-md=4 description="Configure general CORS origins with exact matches (e.g. http://localhost:8080). Comma-separated.")
+      b-input(v-model="corsStr" type="text" :disabled="isFixed('cors')")
+      small.text-warning(v-if="isFixed('cors')")
+        | ⚠️ Fixed in <code>config.toml</code>. Settings in the configuration file take precedence and cannot be changed here.
+
+    b-form-group(label="Regex CORS origins" label-cols-md=4 description="Configure CORS origins with regular expressions. Useful for browser extensions (e.g. chrome-extension://.* or moz-extension://.*). Comma-separated.")
+      b-input(v-model="corsRegexStr" type="text" :disabled="isFixed('cors_regex')")
+      small.text-warning(v-if="isFixed('cors_regex')")
+        | ⚠️ Fixed in <code>config.toml</code>. Settings in the configuration file take precedence and cannot be changed here.
+
+    h5.mt-4 Extensions Shortcuts
+    b-form-group(label-cols-md=4)
+      b-form-checkbox(v-model="editable.cors_allow_aw_chrome_extension" :disabled="isFixed('cors_allow_aw_chrome_extension')") Allow ActivityWatch extension (Chrome)
+      template(#description)
+        div Chrome extensions use a stable, persistent ID, so the official extension is reliably supported.
+        small.text-warning(v-if="isFixed('cors_allow_aw_chrome_extension')")
+          | ⚠️ Fixed in <code>config.toml</code>. Settings in the configuration file take precedence and cannot be changed here.
+
+    b-form-group(label-cols-md=4)
+      b-form-checkbox(v-model="editable.cors_allow_all_mozilla_extension" :disabled="isFixed('cors_allow_all_mozilla_extension')") Allow all Firefox extensions (DANGEROUS)
+      template(#description)
+        div Every version of a Mozilla extension has its own ID to avoid fingerprinting. This is why you must either allow all extensions or manually configure your specific ID.
+        small.text-warning.mb-2.d-block(v-if="isFixed('cors_allow_all_mozilla_extension')")
+          | ⚠️ Fixed in <code>config.toml</code>. Settings in the configuration file take precedence and cannot be changed here.
+        div.mt-2.text-danger(v-if="editable.cors_allow_all_mozilla_extension")
+          | ⚠️ DANGEROUS: Not recommended for security. If enabled, any installed extension can access your ActivityWatch data. Use this only if you know what extensions you have and assume full responsibility.
+        div(v-else)
+          | Recommended for security. To allow a specific extension safely:
+          ol.mt-2.mb-1
+            li Go to <code>about:debugging#/runtime/this-firefox</code> in your browser.
+            li Look for your extension and copy the <b>Manifest URL</b> (e.g. <code>moz-extension://4b931c07dededdedff152/manifest.json</code>).
+            li Remove <code>manifest.json</code> from the end (to get <code>moz-extension://4b931c07dededdedff152</code>).
+            li Paste it into the <b>Regex CORS origins</b> field above (use a comma to separate if not empty). 
+
+  div(v-else-if="loading")
+    p Loading...
+  div(v-else-if="error")
+    b-alert(show variant="danger") Failed to load CORS configuration: {{ error }}
+</template>
+
+<script lang="ts">
+import { useCorsStore, type CorsConfig } from '~/stores/cors';
+import { mapState } from 'pinia';
+
+export default {
+  name: 'CorsConfigModal',
+  data() {
+    return {
+      editable: {
+        cors: [] as string[],
+        cors_regex: [] as string[],
+        cors_allow_aw_chrome_extension: false,
+        cors_allow_all_mozilla_extension: false,
+        in_file: [] as string[],
+        needs_restart: false,
+      } as CorsConfig,
+      corsStr: '',
+      corsRegexStr: '',
+      corsStore: useCorsStore(),
+    };
+  },
+  computed: {
+    ...mapState(useCorsStore, ['config', 'loading', 'error']),
+  },
+  watch: {
+    config(newVal) {
+      if (newVal) {
+        this.editable = JSON.parse(JSON.stringify(newVal));
+        this.corsStr = newVal.cors.join(', ');
+        this.corsRegexStr = newVal.cors_regex.join(', ');
+      }
+    },
+  },
+  methods: {
+    isFixed(field: string): boolean {
+      return this.config?.in_file?.includes(field) || false;
+    },
+    async load() {
+      await this.corsStore.load();
+    },
+    async save(bvModalEvt: any) {
+      bvModalEvt.preventDefault();
+      
+      // Parse comma-separated strings back to arrays
+      this.editable.cors = this.corsStr.split(',').map(s => s.trim()).filter(s => s !== '');
+      this.editable.cors_regex = this.corsRegexStr.split(',').map(s => s.trim()).filter(s => s !== '');
+
+      try {
+        await this.corsStore.save(this.editable);
+        (this as any).$bvModal.hide('cors-config-modal');
+        alert('CORS configuration saved! Please restart the server to apply changes.');
+      } catch (e: any) {
+        const msg = e.response?.data?.message || e.message || 'Unknown error';
+        alert('Failed to save: ' + msg);
+      }
+    },
+  },
+};
+</script>
diff --git a/src/stores/cors.ts b/src/stores/cors.ts
new file mode 100644
index 00000000..269b47aa
--- /dev/null
+++ b/src/stores/cors.ts
@@ -0,0 +1,67 @@
+import { defineStore } from 'pinia';
+import { getClient } from '~/util/awclient';
+
+export interface CorsConfig {
+    cors: string[];
+    cors_regex: string[];
+    cors_allow_aw_chrome_extension: boolean;
+    cors_allow_all_mozilla_extension: boolean;
+    in_file: string[];
+    needs_restart: boolean;
+}
+
+export type MutableCorsConfig = Pick<CorsConfig, 'cors' | 'cors_regex' | 'cors_allow_aw_chrome_extension' | 'cors_allow_all_mozilla_extension'>;
+
+interface State {
+    config: CorsConfig | null;
+    loading: boolean;
+    error: string | null;
+}
+
+export const useCorsStore = defineStore('cors', {
+    state: (): State => ({
+        config: null,
+        loading: false,
+        error: null,
+    }),
+    actions: {
+        async load() {
+            this.loading = true;
+            this.error = null;
+            try {
+                const client = getClient();
+                const response = await client.req.get('/0/cors-config');
+                this.config = response.data;
+            } catch (e: any) {
+                this.error = e.response?.data?.message || e.message || 'Failed to load CORS config';
+            } finally {
+                this.loading = false;
+            }
+        },
+        async save(newConfig: MutableCorsConfig) {
+            this.loading = true;
+            this.error = null;
+            try {
+                const client = getClient();
+                // Only send the mutable subset to the server
+                const payload: MutableCorsConfig = {
+                    cors: newConfig.cors,
+                    cors_regex: newConfig.cors_regex,
+                    cors_allow_aw_chrome_extension: newConfig.cors_allow_aw_chrome_extension,
+                    cors_allow_all_mozilla_extension: newConfig.cors_allow_all_mozilla_extension,
+                };
+                await client.req.post('/0/cors-config', payload);
+
+                // Update local state if successful
+                if (this.config) {
+                    this.config = { ...this.config, ...payload, needs_restart: true };
+                }
+            } catch (e: any) {
+                this.error = e.response?.data?.message || e.message || 'Failed to save CORS config';
+                throw e;
+            } finally {
+                this.loading = false;
+            }
+        }
+    }
+});
diff --git a/src/stores/settings.ts b/src/stores/settings.ts
index 8222587e..ce8552c0 100644
--- a/src/stores/settings.ts
+++ b/src/stores/settings.ts
@@ -45,8 +45,6 @@ interface State {
   useMultidevice: boolean;
   requestTimeout: number;
   // Server configuration
-  cors_origins: string;
-
   // Set to true if settings loaded
   _loaded: boolean;
 }
@@ -85,7 +83,6 @@ export const useSettingsStore = defineStore('settings', {
     showYearly: false,
     useMultidevice: false,
     requestTimeout: 30,
-    cors_origins: '',
 
     _loaded: false,
   }),
diff --git a/src/views/settings/ServerSettings.vue b/src/views/settings/ServerSettings.vue
deleted file mode 100644
index 3d29e4ce..00000000
--- a/src/views/settings/ServerSettings.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template lang="pug">
-div
-  h4.mb-3 Server settings
-
-  b-form-group(label="Cors" label-cols-md=3 description="Configure CORS origins.")
-    div
-      b-input.float-right.ml-2(v-model="corsorigins" type="text")
-
-  div
-    | Web UI commit hash: {{ COMMIT_HASH }}
-</template>
-
-<script lang="ts">
-import { useSettingsStore } from '~/stores/settings';
-
-export default {
-  data() {
-    return {
-      showSettings: false,
-    };
-  },
-  computed: {
-    corsorigins: {
-      get() {
-        return useSettingsStore().cors_origins;
-      },
-      set(cors_origins) {
-        useSettingsStore().update({ cors_origins });
-      },
-    },
-  },
-};
-</script>
diff --git a/src/views/settings/Settings.vue b/src/views/settings/Settings.vue
index 14b193ab..2a55989d 100644
--- a/src/views/settings/Settings.vue
+++ b/src/views/settings/Settings.vue
@@ -37,10 +37,11 @@ div
   hr
 
   DeveloperSettings
+  div.mt-2
+    b-btn(v-b-modal.cors-config-modal, variant="outline-primary", size="sm")
+      | Configure CORS
 
-  hr
-
-  ServerSettings
+  CorsConfigModal
 </template>
 
 <script lang="ts">
@@ -53,7 +54,7 @@ import ReleaseNotificationSettings from '~/views/settings/ReleaseNotificationSet
 import CategorizationSettings from '~/views/settings/CategorizationSettings.vue';
 import LandingPageSettings from '~/views/settings/LandingPageSettings.vue';
 import DeveloperSettings from '~/views/settings/DeveloperSettings.vue';
-import ServerSettings from '~/views/settings/ServerSettings.vue';
+import CorsConfigModal from '~/components/CorsConfigModal.vue';
 import Theme from '~/views/settings/Theme.vue';
 import ColorSettings from '~/views/settings/ColorSettings.vue';
 import ActivePatternSettings from '~/views/settings/ActivePatternSettings.vue';
@@ -69,8 +70,8 @@ export default {
     Theme,
     ColorSettings,
     DeveloperSettings,
-    ServerSettings,
     ActivePatternSettings,
+    CorsConfigModal,
   },
   beforeRouteLeave(to, from, next) {
     const categoryStore = useCategoryStore();