From 5d984b5efe6d4ff051376ba0a7b69584d3df48cc Mon Sep 17 00:00:00 2001
From: "Leon.Schmidt" <leonmauricewill15@gmail.com>
Date: Tue, 11 Aug 2026 21:46:40 +0200
Subject: [PATCH] FIX - clone custom app frame messages

---
 frontend/src/components/CustomAppFrame.vue |  3 ++-
 frontend/src/utils/clone.test.ts           | 20 ++++++++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/utils/clone.test.ts

diff --git a/frontend/src/components/CustomAppFrame.vue b/frontend/src/components/CustomAppFrame.vue
index 1139e6f..bc6d973 100644
--- a/frontend/src/components/CustomAppFrame.vue
+++ b/frontend/src/components/CustomAppFrame.vue
@@ -33,6 +33,7 @@ import {
   getLbPhoneCallbackResource,
   usesLbPhoneHostRuntime,
 } from '@/utils/lbPhoneAppBridge'
+import { cloneJsonData } from '@/utils/clone'
 import { nuiCall } from '@/utils/nui'
 
 const props = defineProps<{
@@ -150,7 +151,7 @@ function postToFrame(payload: unknown): boolean {
   if (!target) return false
 
   try {
-    target.postMessage(payload, postMessageOrigin.value)
+    target.postMessage(cloneJsonData(payload), postMessageOrigin.value)
     return true
   } catch (error) {
     console.error(`[Custom apps] Could not message ${props.app.id}.`, error)
diff --git a/frontend/src/utils/clone.test.ts b/frontend/src/utils/clone.test.ts
new file mode 100644
index 0000000..2c4c8cf
--- /dev/null
+++ b/frontend/src/utils/clone.test.ts
@@ -0,0 +1,20 @@
+import { reactive } from 'vue'
+import { describe, expect, it } from 'vitest'
+
+import { cloneJsonData } from '@/utils/clone'
+
+describe('JSON data cloning', () => {
+  it('turns reactive custom app payloads into structured-cloneable data', () => {
+    const payload = reactive({
+      action: 'setSpeedCameras',
+      data: [{ id: 1, label: 'Alta Street' }],
+    })
+
+    expect(() => structuredClone(payload)).toThrow()
+
+    const cloned = cloneJsonData(payload)
+
+    expect(cloned).toEqual(payload)
+    expect(() => structuredClone(cloned)).not.toThrow()
+  })
+})