@accelerated-agency/visual-editor 0.1.3 → 0.1.5

package/dist/index.js

@@ -1867,7 +1867,7 @@ import { useState as useState6, useCallback as useCallback6, useEffect as useEff
 import { useCallback as useCallback4, useEffect as useEffect4, useRef as useRef4, useState as useState4 } from "react";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var CHANNEL = "conversion-editor";
-function IframeCanvas({ url, password, onBridgeReady, onPong }) {
+function IframeCanvas({ url, password, proxyBaseUrl = "", onBridgeReady, onPong }) {
   const iframeElRef = useRef4(null);
   const setSelectedElement = useMutationsStore((s) => s.setSelectedElement);
   const addMutationToActive = useVariationsStore((s) => s.addMutationToActive);
@@ -1917,7 +1917,7 @@ function IframeCanvas({ url, password, onBridgeReady, onPong }) {
   if (url.toLowerCase() === "test") {
     resolvedUrl = "/test";
   } else if (url.startsWith("http")) {
-    resolvedUrl = `/api/proxy?password=${encodeURIComponent(password || "")}&url=${encodeURIComponent(url)}`;
+    resolvedUrl = `${proxyBaseUrl}/api/proxy?password=${encodeURIComponent(password || "")}&url=${encodeURIComponent(url)}`;
   } else {
     resolvedUrl = url;
   }
@@ -2185,7 +2185,7 @@ var VIEWPORT_LABELS = {
   tablet: "768 \xD7 1024",
   mobile: "375 \xD7 812"
 };
-function CanvasArea({ url, password, viewport, onBridgeReady, onPong }) {
+function CanvasArea({ url, password, viewport, proxyBaseUrl, onBridgeReady, onPong }) {
   const iframeWidth = VIEWPORT_WIDTHS[viewport];
   const isConstrained = viewport !== "desktop";
   const [dragOver, setDragOver] = useState6(false);
@@ -2289,7 +2289,7 @@ function CanvasArea({ url, password, viewport, onBridgeReady, onPong }) {
               maxWidth: "100%",
               boxShadow: isConstrained ? "0 4px 24px rgba(0,0,0,0.1)" : "none"
             },
-            children: /* @__PURE__ */ jsx6(IframeCanvas, { url, password, onBridgeReady, onPong })
+            children: /* @__PURE__ */ jsx6(IframeCanvas, { url, password, proxyBaseUrl, onBridgeReady, onPong })
           }
         ) }),
         dragOver && draggedSection && /* @__PURE__ */ jsx6(
@@ -4136,7 +4136,7 @@ function sendToPlatform(type, payload) {
     data: { channel: PLATFORM_CHANNEL, type, payload }
   }));
 }
-function EditorShell({ initialExperiment, embeddedMode }) {
+function EditorShell({ initialExperiment, embeddedMode, proxyBaseUrl }) {
   const [url, setUrl] = useState12("");
   const [password, setPassword] = useState12("");
   const [connectionStatus, setConnectionStatus] = useState12("disconnected");
@@ -4590,6 +4590,7 @@ function EditorShell({ initialExperiment, embeddedMode }) {
           url,
           password,
           viewport,
+          proxyBaseUrl,
           onBridgeReady: handleBridgeReady,
           onPong: handlePong
         }
@@ -4605,6 +4606,7 @@ import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
 function PlatformVisualEditor({
   channel = "conversion-platform",
   embeddedGlobalKey = "__CONVERSION_EMBEDDED__",
+  proxyBaseUrl = typeof import.meta !== "undefined" && import.meta.env?.VITE_API_BASE_URL || "",
   className = "fixed inset-0 z-[9999] flex flex-col bg-white",
   editorClassName = "flex-1 min-h-0",
   showHeader = true,
@@ -4816,7 +4818,7 @@ function PlatformVisualEditor({
         ) : null
       ] })
     ] }) : null,
-    /* @__PURE__ */ jsx13("div", { className: editorClassName, children: /* @__PURE__ */ jsx13(ToastProvider, { children: /* @__PURE__ */ jsx13(EditorShell, { initialExperiment: experiment, embeddedMode: true }) }) })
+    /* @__PURE__ */ jsx13("div", { className: editorClassName, children: /* @__PURE__ */ jsx13(ToastProvider, { children: /* @__PURE__ */ jsx13(EditorShell, { initialExperiment: experiment, embeddedMode: true, proxyBaseUrl }) }) })
   ] });
 }
 

package/dist/vite.js

@@ -1769,6 +1769,19 @@ var getDefaultAnthropicApiKey = () => {
 function createVisualEditorMiddleware(options) {
   const anthropicApiKey = options?.anthropicApiKey || getDefaultAnthropicApiKey();
   const enableGenerateTestApi = options?.enableGenerateTestApi ?? true;
+  const allowedFrameOrigins = options?.allowedFrameOrigins ?? ["*"];
+  function setFrameHeaders(req, res) {
+    const requestOrigin = req.headers?.["origin"] || req.headers?.["referer"] || "";
+    if (allowedFrameOrigins.includes("*")) {
+      const frameOrigin = requestOrigin ? new URL(requestOrigin).origin : "*";
+      res.setHeader("Content-Security-Policy", `frame-ancestors 'self' ${frameOrigin}`);
+    } else {
+      res.setHeader(
+        "Content-Security-Policy",
+        `frame-ancestors 'self' ${allowedFrameOrigins.join(" ")}`
+      );
+    }
+  }
   return async (req, res, next) => {
     const pathname = (req.url || "").split("?")[0];
     if (pathname === "/bridge.js") {
@@ -1780,7 +1793,7 @@ function createVisualEditorMiddleware(options) {
     if (pathname === "/vvveb-editor") {
       res.setHeader("Content-Type", "text/html; charset=utf-8");
       res.setHeader("Cache-Control", "no-store");
-      res.setHeader("X-Frame-Options", "SAMEORIGIN");
+      setFrameHeaders(req, res);
       res.end(buildVvvebEditorHtml());
       return;
     }
@@ -1996,7 +2009,7 @@ function createVisualEditorMiddleware(options) {
 </body>`) : html + bridgeScript;
         res.setHeader("Content-Type", "text/html; charset=utf-8");
         res.setHeader("Access-Control-Allow-Origin", "*");
-        res.setHeader("X-Frame-Options", "SAMEORIGIN");
+        setFrameHeaders(req, res);
         res.end(html);
       } catch (err) {
         res.statusCode = 500;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@accelerated-agency/visual-editor",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "private": false,
   "description": "Conversion visual editor as a reusable React package",
   "type": "module",