Add useUrlHelper composable and use it for safe origin handling and comparison

Author: cstns

frontend/src/components/immersive-editor/HostedInstanceEditorWrapper.vue

@@ -29,6 +29,7 @@ import { mapActions, mapState } from 'pinia'
 
 import LoadingScreenWrapper from './LoadingScreenWrapper.vue'
 
+import { useUrlHelper } from '@/composables/UrlHelper'
 import { useProductAssistantStore } from '@/stores/product-assistant.js'
 import { useThemeStore } from '@/stores/theme'
 import { isInstanceOnNR5Plus } from '@/utils/instanceVersion'
@@ -148,7 +149,9 @@ export default {
         }),
         // todo this event listener should be moved in the messaging.service.js
         eventListener (event) {
-            if (event.origin === this.instance.url) {
+            const { originsMatch } = useUrlHelper()
+
+            if (originsMatch(event.origin, this.instance.url)) {
                 // Forward iframe activity to the parent page so PostHog's idle timer
                 // is reset when the user is active inside the cross-origin iframe.
                 window.dispatchEvent(new MouseEvent('mousemove'))

frontend/src/composables/UrlHelper.ts

@@ -0,0 +1,31 @@
+export function useUrlHelper () {
+    /**
+     * Safely extracts the bare origin (scheme://host:port) from a URL string.
+     * Returns null if the URL cannot be parsed.
+     */
+    const safeOrigin = (url: string): string | null => {
+        try {
+            return new URL(url).origin
+        } catch {
+            return null
+        }
+    }
+
+    /**
+     * Compares two URLs (or origins) by their normalised origin.
+     * Returns false if either URL cannot be parsed.
+     */
+    const originsMatch = (a: string, b: string): boolean => {
+        const originA = safeOrigin(a)
+        const originB = safeOrigin(b)
+        if (!originA || !originB) {
+            return false
+        }
+        return originA === originB
+    }
+
+    return {
+        safeOrigin,
+        originsMatch
+    }
+}

frontend/src/stores/product-assistant.js

@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia'
 import SemVer from 'semver'
 
+import { useUrlHelper } from '@/composables/UrlHelper'
 import getAppOrchestrator from '@/services/app.orchestrator'
 import { useContextStore } from '@/stores/context.js'
 
@@ -302,11 +303,11 @@ export const useProductAssistantStore = defineStore('product-assistant', {
             // instance.url / device.editor.url can carry an editor path (httpAdminRoot) or a
             // trailing slash, but a MessageEvent's origin is always a bare scheme://host:port.
             // Reduce each entry to its origin so the comparison in handleMessage matches.
+            const { safeOrigin } = useUrlHelper()
             const addOrigin = (url) => {
-                try {
-                    allowedOrigins.add(new URL(url).origin)
-                } catch {
-                    // not a parseable URL - ignore
+                const origin = safeOrigin(url)
+                if (origin) {
+                    allowedOrigins.add(origin)
                 }
             }
             if (instance?.url) {