[SEC] restrict CORS to authorized extension IDs

Fixes a security issue where any Firefox extension (moz-extension://.*) could access the ActivityWatch server without any restriction.

Previously, the CORS configuration included a wildcard for all Mozilla extensions by default. This commit removes that blanket permission and introduces granular control through both static configuration and the Web UI.

We've added 2 new fields to the file configuration (allow_aw_chrome_extension and allow_all_mozilla_extension) and 4 new settings to the Web UI (Fixed origins, Regex origins, and extension-specific shortcuts). The server now merges these settings to determine the final set of authorized origins, ensuring a more secure and flexible configuration.

Dependent on: ActivityWatch/aw-server-rust#581

edited according to the last changes

Author: RaoufGhrissi

src/components/CorsConfigModal.vue

@@ -0,0 +1,101 @@
+<template lang="pug">
+b-modal(id="cors-config-modal" title="Security & CORS" @show="load" @ok="save" :ok-disabled="loading" size="lg")
+  div(v-if="config")
+    b-alert(show variant="info" class="mb-4")
+      h5.alert-heading Require Restart
+      p.mb-0 Changing settings in this section requires stopping and restarting the server for the changes 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...
+</template>
+
+<script lang="ts">
+import { useCorsStore } 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,
+      },
+      corsStr: '',
+      corsRegexStr: '',
+      corsStore: useCorsStore(),
+    };
+  },
+  computed: {
+    ...mapState(useCorsStore, ['config', 'loading']),
+  },
+  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) {
+        alert('Failed to save: ' + e.message);
+      }
+    },
+  },
+};
+</script>

src/stores/cors.ts

@@ -0,0 +1,53 @@
+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[];
+}
+
+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.message || 'Failed to load CORS config';
+            } finally {
+                this.loading = false;
+            }
+        },
+        async save(newConfig: CorsConfig) {
+            this.loading = true;
+            this.error = null;
+            try {
+                const client = getClient();
+                await client.req.post('/0/cors-config', newConfig);
+                this.config = newConfig;
+            } catch (e: any) {
+                this.error = e.message || 'Failed to save CORS config';
+                throw e;
+            } finally {
+                this.loading = false;
+            }
+        }
+    }
+});

src/views/settings/Settings.vue

@@ -37,6 +37,11 @@ div
   hr
 
   DeveloperSettings
+  div.mt-2
+    b-btn(v-b-modal.cors-config-modal, variant="outline-primary", size="sm")
+      | Configure CORS
+
+  CorsConfigModal
 </template>
 
 <script lang="ts">
@@ -49,6 +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 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';
@@ -65,6 +71,7 @@ export default {
     ColorSettings,
     DeveloperSettings,
     ActivePatternSettings,
+    CorsConfigModal,
   },
   beforeRouteLeave(to, from, next) {
     const categoryStore = useCategoryStore();