From 68f72153bf98253adb6b7455f8d5a7a100f117e8 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 25 Mar 2026 13:43:42 +0000
Subject: [PATCH 1/2] Initial plan


From 5a0de2aff182df68229e6871fb1af655e75b0b35 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 25 Mar 2026 13:46:18 +0000
Subject: [PATCH 2/2] fix: replace innerHTML with safe DOM construction in wix
 examples to prevent XSS

Co-authored-by: numbers-official <181934381+numbers-official@users.noreply.github.com>
Agent-Logs-Url: https://github.com/numbersprotocol/capture-eye/sessions/e9264c31-bfa3-4ca2-8702-beb989460f28
---
 examples/wix/capture-eye-element.js       |  7 ++-
 examples/wix/capture-eye-sytle-element.js | 60 ++++++++++++++++++-----
 2 files changed, 55 insertions(+), 12 deletions(-)

diff --git a/examples/wix/capture-eye-element.js b/examples/wix/capture-eye-element.js
index 6fc9e11..d3957cd 100644
--- a/examples/wix/capture-eye-element.js
+++ b/examples/wix/capture-eye-element.js
@@ -2,7 +2,12 @@ class CaptureEyeElement extends HTMLElement {
   connectedCallback() {
     const nid = this.getAttribute('nid');
     const thumbnail = this.getAttribute('thumbnail');
-    this.innerHTML = `<capture-eye nid="${nid}"><media-viewer src="${thumbnail}"/></capture-eye>`;
+    const captureEye = document.createElement('capture-eye');
+    captureEye.setAttribute('nid', nid);
+    const mediaViewer = document.createElement('media-viewer');
+    mediaViewer.setAttribute('src', thumbnail);
+    captureEye.appendChild(mediaViewer);
+    this.appendChild(captureEye);
   }
 }
 customElements.define('capture-eye-element', CaptureEyeElement);
diff --git a/examples/wix/capture-eye-sytle-element.js b/examples/wix/capture-eye-sytle-element.js
index 5a62681..2b4087b 100644
--- a/examples/wix/capture-eye-sytle-element.js
+++ b/examples/wix/capture-eye-sytle-element.js
@@ -20,17 +20,55 @@ function updateElement(elem) {
     'en-US',
     options
   );
-  elem.innerHTML = `<capture-eye nid="${_nid}"><div class="container"><img src="${thumbnail}" alt="Image" class="image">
-              <div class="text-container">
-                <p class="title">註冊時間</p>
-                <p class="description">${captureUpdatedDate}</p>
-                <p class="title">創建者</p>
-                <p class="description">${creator}</p>
-                <p class="title">簡介</p>
-                <p class="description">${headline}</p>
-                <p class="title">影像 Nid</p>
-                <p class="nid" onclick="window.open('https://asset.captureapp.xyz/${_nid}', '_blank')">${nid}</p>
-             </div></div></capture-eye>`;
+
+  // Clear existing content safely
+  while (elem.firstChild) {
+    elem.removeChild(elem.firstChild);
+  }
+
+  // Build DOM safely without innerHTML to prevent XSS
+  const captureEye = document.createElement('capture-eye');
+  captureEye.setAttribute('nid', _nid);
+
+  const container = document.createElement('div');
+  container.className = 'container';
+
+  const img = document.createElement('img');
+  img.setAttribute('src', thumbnail);
+  img.setAttribute('alt', 'Image');
+  img.className = 'image';
+
+  const textContainer = document.createElement('div');
+  textContainer.className = 'text-container';
+
+  const createParagraph = (className, text) => {
+    const p = document.createElement('p');
+    p.className = className;
+    p.textContent = text;
+    return p;
+  };
+
+  textContainer.appendChild(createParagraph('title', '註冊時間'));
+  textContainer.appendChild(createParagraph('description', captureUpdatedDate));
+  textContainer.appendChild(createParagraph('title', '創建者'));
+  textContainer.appendChild(createParagraph('description', creator));
+  textContainer.appendChild(createParagraph('title', '簡介'));
+  textContainer.appendChild(createParagraph('description', headline));
+  textContainer.appendChild(createParagraph('title', '影像 Nid'));
+
+  const nidP = createParagraph('nid', nid);
+  nidP.addEventListener('click', () => {
+    window.open(
+      `https://asset.captureapp.xyz/${encodeURIComponent(_nid)}`,
+      '_blank'
+    );
+  });
+  textContainer.appendChild(nidP);
+
+  container.appendChild(img);
+  container.appendChild(textContainer);
+  captureEye.appendChild(container);
+  elem.appendChild(captureEye);
 }
 
 class CaptureEyeStyleElement extends HTMLElement {