From ac65e6ede095aacbb6840f88864ada256d0e38d3 Mon Sep 17 00:00:00 2001
From: lby <icesunex@hotmail.com>
Date: Sun, 23 Apr 2023 21:06:59 +0800
Subject: [PATCH 1/7] feat: sandbox alpha

---
 web/.vscode/settings.json                     |   5 +-
 .../molecules/PluginEditor/core/hooks.ts      |   6 +
 .../molecules/PluginEditor/core/index.tsx     |   2 +
 .../EarthEditor/core/CanvasArea/hooks.ts      |   5 +
 .../EarthEditor/core/CanvasArea/index.tsx     |   2 +
 .../PluginFrame/PluginIFrame/index.tsx        |  43 +++--
 .../Plugins/PluginFrame/SafeIFrame/hooks.ts   | 169 ++++++++++++++++++
 .../PluginFrame/SafeIFrame/index.stories.tsx  |  49 +++++
 .../Plugins/PluginFrame/SafeIFrame/index.tsx  |  79 ++++++++
 web/src/core/Crust/Plugins/hooks.ts           |   3 +
 web/src/core/Crust/Plugins/types.ts           |   2 +
 .../Crust/Plugins/useExperimentalSandbox.ts   |   6 +
 web/src/core/Crust/index.tsx                  |   1 +
 web/src/core/Visualizer/index.tsx             |   1 +
 14 files changed, 360 insertions(+), 13 deletions(-)
 create mode 100644 web/src/core/Crust/Plugins/PluginFrame/SafeIFrame/hooks.ts
 create mode 100644 web/src/core/Crust/Plugins/PluginFrame/SafeIFrame/index.stories.tsx
 create mode 100644 web/src/core/Crust/Plugins/PluginFrame/SafeIFrame/index.tsx
 create mode 100644 web/src/core/Crust/Plugins/useExperimentalSandbox.ts

diff --git a/web/.vscode/settings.json b/web/.vscode/settings.json
index 170b9e5d8..aab1ef6ee 100644
--- a/web/.vscode/settings.json
+++ b/web/.vscode/settings.json
@@ -3,5 +3,8 @@
     "yaml.schemas": {
         "https://json.schemastore.org/github-workflow": "/.github/workflows/**/*.yml"
     },
-    "vitest.commandLine": "yarn run vitest watch"
+    "vitest.commandLine": "yarn run vitest watch",
+    "i18n-ally.localesPaths": [
+        "src/i18n"
+    ]
 }
diff --git a/web/src/components/molecules/PluginEditor/core/hooks.ts b/web/src/components/molecules/PluginEditor/core/hooks.ts
index 8d66590d8..15460c6bf 100644
--- a/web/src/components/molecules/PluginEditor/core/hooks.ts
+++ b/web/src/components/molecules/PluginEditor/core/hooks.ts
@@ -187,6 +187,11 @@ export default () => {
     [],
   );
 
+  const useExperimentalSandbox = useMemo(
+    () => new URLSearchParams(window.location.search).has("useSandbox"),
+    [],
+  );
+
   return {
     sourceCode,
     layers,
@@ -197,6 +202,7 @@ export default () => {
     showAlignSystem,
     showInfobox,
     engineMeta,
+    useExperimentalSandbox,
     setSourceCode,
     setMode,
     setInfoboxSize,
diff --git a/web/src/components/molecules/PluginEditor/core/index.tsx b/web/src/components/molecules/PluginEditor/core/index.tsx
index 80aa20104..9511c7b65 100644
--- a/web/src/components/molecules/PluginEditor/core/index.tsx
+++ b/web/src/components/molecules/PluginEditor/core/index.tsx
@@ -19,6 +19,7 @@ const PluginEditor: React.FC = () => {
     showInfobox,
     layers,
     engineMeta,
+    useExperimentalSandbox,
     setSourceCode,
     setMode,
     setInfoboxSize,
@@ -48,6 +49,7 @@ const PluginEditor: React.FC = () => {
           widgetAlignSystem={widgets.alignSystem}
           layers={layers}
           meta={engineMeta}
+          useExperimentalSandbox={useExperimentalSandbox}
         />
         <div
           style={{
diff --git a/web/src/components/organisms/EarthEditor/core/CanvasArea/hooks.ts b/web/src/components/organisms/EarthEditor/core/CanvasArea/hooks.ts
index 9113816f4..892feac06 100644
--- a/web/src/components/organisms/EarthEditor/core/CanvasArea/hooks.ts
+++ b/web/src/components/organisms/EarthEditor/core/CanvasArea/hooks.ts
@@ -299,6 +299,10 @@ export default (isBuilt?: boolean) => {
     [],
   );
 
+  const useExperimentalSandbox = useMemo(() => {
+    return !!sceneProperty?.experimental?.experimental_sandbox;
+  }, [sceneProperty]);
+
   return {
     sceneId,
     rootLayerId,
@@ -319,6 +323,7 @@ export default (isBuilt?: boolean) => {
     widgetAlignEditorActivated,
     engineMeta,
     layerSelectionReason,
+    useExperimentalSandbox,
     selectLayer,
     selectBlock,
     onBlockChange,
diff --git a/web/src/components/organisms/EarthEditor/core/CanvasArea/index.tsx b/web/src/components/organisms/EarthEditor/core/CanvasArea/index.tsx
index 6d62c751d..bbc3a71e6 100644
--- a/web/src/components/organisms/EarthEditor/core/CanvasArea/index.tsx
+++ b/web/src/components/organisms/EarthEditor/core/CanvasArea/index.tsx
@@ -32,6 +32,7 @@ const CanvasArea: React.FC<Props> = ({ isBuilt, inEditor }) => {
     widgetAlignEditorActivated,
     engineMeta,
     layerSelectionReason,
+    useExperimentalSandbox,
     selectLayer,
     selectBlock,
     onBlockChange,
@@ -83,6 +84,7 @@ const CanvasArea: React.FC<Props> = ({ isBuilt, inEditor }) => {
         widgetAlignSystemEditing={widgetAlignEditorActivated}
         meta={engineMeta}
         layerSelectionReason={layerSelectionReason}
+        useExperimentalSandbox={useExperimentalSandbox}
         onLayerSelect={selectLayer}
         onCameraChange={onCameraChange}
         onWidgetLayoutUpdate={onWidgetUpdate}
diff --git a/web/src/core/Crust/Plugins/PluginFrame/PluginIFrame/index.tsx b/web/src/core/Crust/Plugins/PluginFrame/PluginIFrame/index.tsx
index 62d3ada2f..f01b27324 100644
--- a/web/src/core/Crust/Plugins/PluginFrame/PluginIFrame/index.tsx
+++ b/web/src/core/Crust/Plugins/PluginFrame/PluginIFrame/index.tsx
@@ -2,7 +2,9 @@ import { forwardRef, ForwardRefRenderFunction, IframeHTMLAttributes, ReactNode,
 import type { RefObject } from "react";
 import { createPortal } from "react-dom";
 
+import useExperimentalSandbox from "../../useExperimentalSandbox";
 import IFrame, { AutoResize } from "../IFrame";
+import SafeIframe from "../SafeIFrame";
 
 import useHooks, { Ref } from "./hooks";
 
@@ -50,21 +52,38 @@ const PluginIFrame: ForwardRefRenderFunction<Ref, Props> = (
     handleLoad,
   } = useHooks({ ready, ref, visible, type, enabled, onRender });
 
+  const experimentalSandbox = useExperimentalSandbox();
+
   const children = (
     <>
       {html ? (
-        <IFrame
-          ref={iFrameRef}
-          className={className}
-          iFrameProps={iFrameProps}
-          html={html}
-          autoResize={autoResize}
-          externalRef={externalRef}
-          onMessage={onMessage}
-          onClick={onClick}
-          onLoad={handleLoad}
-          {...options}
-        />
+        experimentalSandbox ? (
+          <SafeIframe
+            ref={iFrameRef}
+            className={className}
+            iFrameProps={iFrameProps}
+            html={html}
+            autoResize={autoResize}
+            externalRef={externalRef}
+            onMessage={onMessage}
+            onClick={onClick}
+            onLoad={handleLoad}
+            {...options}
+          />
+        ) : (
+          <IFrame
+            ref={iFrameRef}
+            className={className}
+            iFrameProps={iFrameProps}
+            html={html}
+            autoResize={autoResize}
+            externalRef={externalRef}
+            onMessage={onMessage}
+            onClick={onClick}
+            onLoad={handleLoad}
+            {...options}
+          />
+        )
       ) : renderPlaceholder ? (
         <>{renderPlaceholder}</>
       ) : null}
diff --git a/web/src/core/Crust/Plugins/PluginFrame/SafeIFrame/hooks.ts b/web/src/core/Crust/Plugins/PluginFrame/SafeIFrame/hooks.ts
new file mode 100644
index 000000000..818f085bb
--- /dev/null
+++ b/web/src/core/Crust/Plugins/PluginFrame/SafeIFrame/hooks.ts
@@ -0,0 +1,169 @@
+import {
+  IframeHTMLAttributes,
+  Ref,
+  RefObject,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+export type RefType = {
+  postMessage: (message: any) => void;
+  resize: (width: string | number | undefined, height: string | number | undefined) => void;
+};
+
+export type AutoResize = "both" | "width-only" | "height-only";
+
+export default function useHook({
+  autoResizeMessageKey = "___iframe_auto_resize___",
+  width,
+  height,
+  html,
+  ref,
+  autoResize,
+  visible,
+  iFrameProps,
+  onLoad,
+  onMessage,
+  onClick,
+  onAutoResized,
+}: {
+  width?: number | string;
+  height?: number | string;
+  autoResizeMessageKey?: string;
+  html?: string;
+  ref?: Ref<RefType>;
+  autoResize?: AutoResize;
+  visible?: boolean;
+  iFrameProps?: IframeHTMLAttributes<HTMLIFrameElement>;
+  onLoad?: () => void;
+  onMessage?: (message: any) => void;
+  onClick?: () => void;
+  onAutoResized?: () => void;
+} = {}): {
+  ref: RefObject<HTMLIFrameElement>;
+  props: IframeHTMLAttributes<HTMLIFrameElement>;
+  srcDoc: string;
+  onLoad?: () => void;
+} {
+  const loaded = useRef(false);
+  const iFrameRef = useRef<HTMLIFrameElement>(null);
+  const [iFrameSize, setIFrameSize] = useState<[string | undefined, string | undefined]>();
+  const pendingMesages = useRef<any[]>([]);
+
+  useImperativeHandle(
+    ref,
+    (): RefType => ({
+      postMessage: message => {
+        if (!loaded.current || !iFrameRef.current?.contentWindow) {
+          pendingMesages.current.push(message);
+          return;
+        }
+        iFrameRef.current.contentWindow.postMessage(message, "*");
+      },
+      resize: (width, height) => {
+        const width2 = typeof width === "number" ? width + "px" : width ?? undefined;
+        const height2 = typeof height === "number" ? height + "px" : height ?? undefined;
+        setIFrameSize(width2 || height2 ? [width2, height2] : undefined);
+      },
+    }),
+    [],
+  );
+
+  useEffect(() => {
+    const cb = (ev: MessageEvent<any>) => {
+      if (!iFrameRef.current || ev.source !== iFrameRef.current.contentWindow) return;
+      if (ev.data?.[autoResizeMessageKey]) {
+        const { width, height } = ev.data[autoResizeMessageKey];
+        if (typeof width !== "number" || typeof height !== "number") return;
+        setIFrameSize([width + "px", height + "px"]);
+        onAutoResized?.();
+      } else {
+        onMessage?.(ev.data);
+      }
+    };
+    window.addEventListener("message", cb);
+    return () => {
+      window.removeEventListener("message", cb);
+    };
+  }, [autoResize, autoResizeMessageKey, onMessage, onAutoResized]);
+
+  const onIframeLoad = useCallback(() => {
+    loaded.current = true;
+    onLoad?.();
+  }, [onLoad]);
+
+  const props = useMemo<IframeHTMLAttributes<HTMLIFrameElement>>(
+    () => ({
+      ...iFrameProps,
+      style: {
+        display: visible ? "block" : "none",
+        width: visible
+          ? !autoResize || autoResize == "height-only"
+            ? "100%"
+            : iFrameSize?.[0]
+          : "0px",
+        height: visible
+          ? !autoResize || autoResize == "width-only"
+            ? "100%"
+            : iFrameSize?.[1]
+          : "0px",
+        ...iFrameProps?.style,
+      },
+    }),
+    [autoResize, iFrameProps, iFrameSize, visible],
+  );
+
+  useEffect(() => {
+    const handleBlur = () => {
+      if (iFrameRef.current && iFrameRef.current === document.activeElement) {
+        onClick?.();
+      }
+    };
+    window.addEventListener("blur", handleBlur);
+    return () => {
+      window.removeEventListener("blur", handleBlur);
+    };
+  }, [onClick]);
+
+  useEffect(() => {
+    const w = typeof width === "number" ? width + "px" : width;
+    const h = typeof height === "number" ? height + "px" : height;
+    setIFrameSize(w || h ? [w, h] : undefined);
+  }, [width, height]);
+
+  const autoResizeScript = useMemo(() => {
+    return `<script id="_reearth_resize">
+      if ("ResizeObserver" in window) {         
+        new window.ResizeObserver(entries => {
+          const win = document.defaultView;
+          const html = document.body.parentElement;
+          const st = win.getComputedStyle(html, "");
+          horizontalMargin = parseInt(st.getPropertyValue("margin-left"), 10) + parseInt(st.getPropertyValue("margin-right"), 10);
+          verticalMargin = parseInt(st.getPropertyValue("margin-top"), 10) + parseInt(st.getPropertyValue("margin-bottom"), 10);
+          const width = html.offsetWidth + horizontalMargin;
+          const height = html.offsetHeight + verticalMargin;
+          if(parent){
+            parent.postMessage({
+              [${JSON.stringify(autoResizeMessageKey)}]: { width, height }
+            }, "*")
+          }
+        }).observe(document.body.parentElement);
+      }
+    </script>`;
+  }, [autoResizeMessageKey]);
+
+  const srcDoc = useMemo(() => {
+    return html ? `${html}${autoResizeScript}` : "";
+  }, [html, autoResizeScript]);
+
+  return {
+    ref: iFrameRef,
+    props,
+    srcDoc,
+    onLoad: onIframeLoad,
+  };
+}
diff --git a/web/src/core/Crust/Plugins/PluginFrame/SafeIFrame/index.stories.tsx b/web/src/core/Crust/Plugins/PluginFrame/SafeIFrame/index.stories.tsx
new file mode 100644
index 000000000..fed5416cd
--- /dev/null
+++ b/web/src/core/Crust/Plugins/PluginFrame/SafeIFrame/index.stories.tsx
@@ -0,0 +1,49 @@
+import { Meta, Story } from "@storybook/react";
+import { useRef } from "react";
+
+import Component, { Props, Ref } from ".";
+
+export default {
+  title: "atoms/Plugin/SafeIFrame",
+  component: Component,
+  argTypes: {
+    onLoad: { action: "onLoad" },
+    onMessage: { action: "onMessage" },
+  },
+  // parameters: { actions: { argTypesRegex: "^on.*" } },
+} as Meta;
+
+export const Default: Story<Props> = args => {
+  const ref = useRef<Ref>(null);
+  const postMessage = () => {
+    ref.current?.postMessage({ foo: new Date().toISOString() });
+  };
+  return (
+    <div style={{ background: "#fff" }}>
+      <Component {...args} ref={ref} />
+      <p>
+        <button onClick={postMessage}>postMessage</button>
+      </p>
+    </div>
+  );
+};
+
+Default.args = {
+  visible: true,
+  iFrameProps: {
+    style: {
+      width: "400px",
+      height: "300px",
+    },
+  },
+  html: `<h1>iframe</h1><script>
+  window.addEventListener("message", ev => {
+    if (ev.source !== parent) return;
+    const p = document.createElement("p");
+    p.textContent = JSON.stringify(ev.data);
+    document.body.appendChild(p);
+    parent.postMessage(ev.data, "*");
+  });
+  parent.postMessage("loaded", "*");
+</script>`,
+};
diff --git a/web/src/core/Crust/Plugins/PluginFrame/SafeIFrame/index.tsx b/web/src/core/Crust/Plugins/PluginFrame/SafeIFrame/index.tsx
new file mode 100644
index 000000000..9b86c0634
--- /dev/null
+++ b/web/src/core/Crust/Plugins/PluginFrame/SafeIFrame/index.tsx
@@ -0,0 +1,79 @@
+import composeRefs from "@seznam/compose-react-refs";
+import React, { IframeHTMLAttributes } from "react";
+import type { RefObject } from "react";
+
+import useHook, { RefType, AutoResize as AutoResizeType } from "./hooks";
+
+export type Ref = RefType;
+
+export type AutoResize = AutoResizeType;
+
+export type Props = {
+  autoResize?: AutoResize;
+  className?: string;
+  html?: string;
+  visible?: boolean;
+  iFrameProps?: IframeHTMLAttributes<HTMLIFrameElement>;
+  width?: string | number;
+  height?: string | number;
+  externalRef?: RefObject<HTMLIFrameElement>;
+  onLoad?: () => void;
+  onMessage?: (message: any) => void;
+  onClick?: () => void;
+  onAutoResized?: () => void;
+};
+
+const IFrame: React.ForwardRefRenderFunction<Ref, Props> = (
+  {
+    autoResize,
+    className,
+    html,
+    visible,
+    iFrameProps,
+    width,
+    height,
+    externalRef,
+    onLoad,
+    onMessage,
+    onClick,
+    onAutoResized,
+  },
+  ref,
+) => {
+  const {
+    ref: iFrameRef,
+    props,
+    onLoad: onIFrameLoad,
+    srcDoc,
+  } = useHook({
+    width,
+    height,
+    visible,
+    iFrameProps,
+    autoResize,
+    html,
+    ref,
+    onLoad,
+    onMessage,
+    onClick,
+    onAutoResized,
+  });
+
+  return html ? (
+    <iframe
+      frameBorder="no"
+      scrolling={autoResize ? undefined : "no"}
+      data-testid="iframe"
+      srcDoc={srcDoc}
+      key={html}
+      ref={composeRefs(iFrameRef, externalRef)}
+      className={className}
+      onLoad={onIFrameLoad}
+      sandbox="allow-scripts allow-downloads allow-popups allow-popups-to-escape-sandbox"
+      allow="geolocation"
+      {...props}
+    />
+  ) : null;
+};
+
+export default React.forwardRef(IFrame);
diff --git a/web/src/core/Crust/Plugins/hooks.ts b/web/src/core/Crust/Plugins/hooks.ts
index b19092f99..3334d26b7 100644
--- a/web/src/core/Crust/Plugins/hooks.ts
+++ b/web/src/core/Crust/Plugins/hooks.ts
@@ -38,6 +38,7 @@ export default function ({
   alignSystem,
   floatingWidgets,
   camera,
+  useExperimentalSandbox,
   overrideSceneProperty,
   onLayerEdit,
 }: Props) {
@@ -319,6 +320,7 @@ export default function ({
       overrideSceneProperty,
       pluginInstances,
       clientStorage,
+      useExperimentalSandbox,
     }),
     [
       engineName,
@@ -366,6 +368,7 @@ export default function ({
       overrideSceneProperty,
       pluginInstances,
       clientStorage,
+      useExperimentalSandbox,
     ],
   );
 
diff --git a/web/src/core/Crust/Plugins/types.ts b/web/src/core/Crust/Plugins/types.ts
index f490a7297..8d68e00e3 100644
--- a/web/src/core/Crust/Plugins/types.ts
+++ b/web/src/core/Crust/Plugins/types.ts
@@ -25,6 +25,7 @@ export type Props = PropsWithChildren<{
   viewport?: Viewport;
   alignSystem?: WidgetAlignSystem;
   floatingWidgets?: InternalWidget[];
+  useExperimentalSandbox?: boolean;
   overrideSceneProperty: (id: string, property: any) => void;
   camera?: Camera;
   onLayerEdit: (cb: (e: LayerEditEvent) => void) => void;
@@ -34,5 +35,6 @@ export type Context = {
   reearth: CommonReearth;
   pluginInstances: PluginInstances;
   clientStorage: ClientStorage;
+  useExperimentalSandbox?: boolean;
   overrideSceneProperty: (id: string, property: any) => void;
 };
diff --git a/web/src/core/Crust/Plugins/useExperimentalSandbox.ts b/web/src/core/Crust/Plugins/useExperimentalSandbox.ts
new file mode 100644
index 000000000..e91eae436
--- /dev/null
+++ b/web/src/core/Crust/Plugins/useExperimentalSandbox.ts
@@ -0,0 +1,6 @@
+import { usePluginContext } from "./context";
+
+export default (): boolean => {
+  const ctx = usePluginContext();
+  return !!ctx.useExperimentalSandbox;
+};
diff --git a/web/src/core/Crust/index.tsx b/web/src/core/Crust/index.tsx
index c62df8ffd..00f7ea14d 100644
--- a/web/src/core/Crust/index.tsx
+++ b/web/src/core/Crust/index.tsx
@@ -80,6 +80,7 @@ export type Props = {
   infoboxVisible?: boolean;
   // plugin
   externalPlugin: ExternalPluginProps;
+  useExperimentalSandbox?: boolean;
   // widget events
   onWidgetLayoutUpdate?: (
     id: string,
diff --git a/web/src/core/Visualizer/index.tsx b/web/src/core/Visualizer/index.tsx
index d4dbf87bf..6bc25c4d2 100644
--- a/web/src/core/Visualizer/index.tsx
+++ b/web/src/core/Visualizer/index.tsx
@@ -67,6 +67,7 @@ export type Props = {
     featureId?: string;
   };
   layerSelectionReason?: LayerSelectionReason;
+  useExperimentalSandbox?: boolean;
   selectedWidgetArea?: WidgetAreaType;
   hiddenLayers?: string[];
   zoomedLayerId?: string;

From c65b359a200ee4d80f74fdcc98c6ee0335843265 Mon Sep 17 00:00:00 2001
From: lby <icesunex@hotmail.com>
Date: Sun, 23 Apr 2023 21:15:11 +0800
Subject: [PATCH 2/7] chore: reverse

---
 web/.vscode/settings.json | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/web/.vscode/settings.json b/web/.vscode/settings.json
index aab1ef6ee..170b9e5d8 100644
--- a/web/.vscode/settings.json
+++ b/web/.vscode/settings.json
@@ -3,8 +3,5 @@
     "yaml.schemas": {
         "https://json.schemastore.org/github-workflow": "/.github/workflows/**/*.yml"
     },
-    "vitest.commandLine": "yarn run vitest watch",
-    "i18n-ally.localesPaths": [
-        "src/i18n"
-    ]
+    "vitest.commandLine": "yarn run vitest watch"
 }

From 6892c261aaac1f73d4f75735a815fbe70e0947a8 Mon Sep 17 00:00:00 2001
From: lby <icesunex@hotmail.com>
Date: Tue, 25 Apr 2023 15:34:01 +0800
Subject: [PATCH 3/7] refactor: missing params

---
 web/src/core/Crust/index.tsx      | 2 ++
 web/src/core/Visualizer/index.tsx | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/web/src/core/Crust/index.tsx b/web/src/core/Crust/index.tsx
index 00f7ea14d..c8905ebc0 100644
--- a/web/src/core/Crust/index.tsx
+++ b/web/src/core/Crust/index.tsx
@@ -139,6 +139,7 @@ export default function Crust({
   selectedBlockId,
   selectedWidgetArea,
   externalPlugin,
+  useExperimentalSandbox,
   onWidgetLayoutUpdate,
   onWidgetAlignmentUpdate,
   onWidgetAreaSelect,
@@ -187,6 +188,7 @@ export default function Crust({
       alignSystem={widgetAlignSystem}
       floatingWidgets={floatingWidgets}
       camera={camera}
+      useExperimentalSandbox={useExperimentalSandbox}
       overrideSceneProperty={overrideSceneProperty}
       onLayerEdit={onLayerEdit}>
       <ModalContainer
diff --git a/web/src/core/Visualizer/index.tsx b/web/src/core/Visualizer/index.tsx
index 6bc25c4d2..70b8c09e6 100644
--- a/web/src/core/Visualizer/index.tsx
+++ b/web/src/core/Visualizer/index.tsx
@@ -133,6 +133,7 @@ export default function Visualizer({
   pluginProperty,
   zoomedLayerId,
   layerSelectionReason,
+  useExperimentalSandbox,
   onLayerDrop,
   onLayerSelect,
   onCameraChange,
@@ -225,6 +226,7 @@ export default function Visualizer({
         floatingWidgets={floatingWidgets}
         mapRef={mapRef}
         externalPlugin={{ pluginBaseUrl, pluginProperty }}
+        useExperimentalSandbox={useExperimentalSandbox}
         onWidgetLayoutUpdate={onWidgetLayoutUpdate}
         onWidgetAlignmentUpdate={onWidgetAlignmentUpdate}
         onWidgetAreaSelect={onWidgetAreaSelect}

From d5c95d4febc543dec1dcf1f0db8653a614526235 Mon Sep 17 00:00:00 2001
From: lby <icesunex@hotmail.com>
Date: Mon, 8 May 2023 10:24:00 +0800
Subject: [PATCH 4/7] refactor: move auto resize script into body

---
 web/src/core/Crust/Plugins/PluginFrame/SafeIFrame/hooks.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/web/src/core/Crust/Plugins/PluginFrame/SafeIFrame/hooks.ts b/web/src/core/Crust/Plugins/PluginFrame/SafeIFrame/hooks.ts
index 818f085bb..669f53791 100644
--- a/web/src/core/Crust/Plugins/PluginFrame/SafeIFrame/hooks.ts
+++ b/web/src/core/Crust/Plugins/PluginFrame/SafeIFrame/hooks.ts
@@ -157,7 +157,12 @@ export default function useHook({
   }, [autoResizeMessageKey]);
 
   const srcDoc = useMemo(() => {
-    return html ? `${html}${autoResizeScript}` : "";
+    if (html === undefined) return "";
+    let htmlWithAutoResize = html?.replaceAll(/<\/body>/gi, `${autoResizeScript}</body>`);
+    if (htmlWithAutoResize === html) {
+      htmlWithAutoResize = `${html}${autoResizeScript}`;
+    }
+    return htmlWithAutoResize;
   }, [html, autoResizeScript]);
 
   return {

From d9f450c373a81311c89afb86ae4c859aaeb89f66 Mon Sep 17 00:00:00 2001
From: lby <icesunex@hotmail.com>
Date: Mon, 8 May 2023 10:29:15 +0800
Subject: [PATCH 5/7] refactor code

---
 web/src/core/Crust/Plugins/PluginFrame/SafeIFrame/hooks.ts | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/web/src/core/Crust/Plugins/PluginFrame/SafeIFrame/hooks.ts b/web/src/core/Crust/Plugins/PluginFrame/SafeIFrame/hooks.ts
index 669f53791..7a473cbc6 100644
--- a/web/src/core/Crust/Plugins/PluginFrame/SafeIFrame/hooks.ts
+++ b/web/src/core/Crust/Plugins/PluginFrame/SafeIFrame/hooks.ts
@@ -158,11 +158,8 @@ export default function useHook({
 
   const srcDoc = useMemo(() => {
     if (html === undefined) return "";
-    let htmlWithAutoResize = html?.replaceAll(/<\/body>/gi, `${autoResizeScript}</body>`);
-    if (htmlWithAutoResize === html) {
-      htmlWithAutoResize = `${html}${autoResizeScript}`;
-    }
-    return htmlWithAutoResize;
+    const htmlWithAutoResize = html?.replaceAll(/<\/body>/gi, `${autoResizeScript}</body>`);
+    return htmlWithAutoResize === html ? `${html}${autoResizeScript}` : htmlWithAutoResize;
   }, [html, autoResizeScript]);
 
   return {

From 43c1193a9d678e9a5ea0c0eaf9b1fd053ad11f63 Mon Sep 17 00:00:00 2001
From: lby <icesunex@hotmail.com>
Date: Mon, 8 May 2023 23:40:11 +0800
Subject: [PATCH 6/7] refactor: insert to body function

---
 .../Plugins/PluginFrame/SafeIFrame/hooks.ts   |  6 ++---
 .../PluginFrame/SafeIFrame/utils.test.ts      | 24 +++++++++++++++++++
 .../Plugins/PluginFrame/SafeIFrame/utils.ts   |  8 +++++++
 3 files changed, 35 insertions(+), 3 deletions(-)
 create mode 100644 web/src/core/Crust/Plugins/PluginFrame/SafeIFrame/utils.test.ts
 create mode 100644 web/src/core/Crust/Plugins/PluginFrame/SafeIFrame/utils.ts

diff --git a/web/src/core/Crust/Plugins/PluginFrame/SafeIFrame/hooks.ts b/web/src/core/Crust/Plugins/PluginFrame/SafeIFrame/hooks.ts
index 7a473cbc6..1e157ec81 100644
--- a/web/src/core/Crust/Plugins/PluginFrame/SafeIFrame/hooks.ts
+++ b/web/src/core/Crust/Plugins/PluginFrame/SafeIFrame/hooks.ts
@@ -10,6 +10,8 @@ import {
   useState,
 } from "react";
 
+import { insertToBody } from "./utils";
+
 export type RefType = {
   postMessage: (message: any) => void;
   resize: (width: string | number | undefined, height: string | number | undefined) => void;
@@ -157,9 +159,7 @@ export default function useHook({
   }, [autoResizeMessageKey]);
 
   const srcDoc = useMemo(() => {
-    if (html === undefined) return "";
-    const htmlWithAutoResize = html?.replaceAll(/<\/body>/gi, `${autoResizeScript}</body>`);
-    return htmlWithAutoResize === html ? `${html}${autoResizeScript}` : htmlWithAutoResize;
+    return insertToBody(html, autoResizeScript);
   }, [html, autoResizeScript]);
 
   return {
diff --git a/web/src/core/Crust/Plugins/PluginFrame/SafeIFrame/utils.test.ts b/web/src/core/Crust/Plugins/PluginFrame/SafeIFrame/utils.test.ts
new file mode 100644
index 000000000..190e5869b
--- /dev/null
+++ b/web/src/core/Crust/Plugins/PluginFrame/SafeIFrame/utils.test.ts
@@ -0,0 +1,24 @@
+import { expect, test } from "vitest";
+
+import { insertToBody } from "./utils";
+
+test("insertScriptToBody", () => {
+  const script = `<script id="insert-script"></script>`;
+  const html1 = `<div></div>`;
+  expect(insertToBody(html1, script)).toEqual(`<div></div><script id="insert-script"></script>`);
+
+  const html2 = `<html><body></body></html>`;
+  expect(insertToBody(html2, script)).toEqual(
+    `<html><body><script id="insert-script"></script></body></html>`,
+  );
+
+  const html3 = `<html><BODY></BODY></html>`;
+  expect(insertToBody(html3, script)).toEqual(
+    `<html><BODY><script id="insert-script"></script></BODY></html>`,
+  );
+
+  const html4 = `<html><body><script>const a = '<body></body>'</script></body></html>`;
+  expect(insertToBody(html4, script)).toEqual(
+    `<html><body><script>const a = '<body></body>'</script><script id="insert-script"></script></body></html>`,
+  );
+});
diff --git a/web/src/core/Crust/Plugins/PluginFrame/SafeIFrame/utils.ts b/web/src/core/Crust/Plugins/PluginFrame/SafeIFrame/utils.ts
new file mode 100644
index 000000000..1d3713468
--- /dev/null
+++ b/web/src/core/Crust/Plugins/PluginFrame/SafeIFrame/utils.ts
@@ -0,0 +1,8 @@
+export const insertToBody = (html: string | undefined, insertStr: string) => {
+  if (html === undefined) return "";
+  let lastBodyIndex = html.lastIndexOf("</body>");
+  if (lastBodyIndex < 0) lastBodyIndex = html.lastIndexOf("</BODY>");
+  return lastBodyIndex < 0
+    ? `${html}${insertStr}`
+    : `${html.substring(0, lastBodyIndex)}${insertStr}${html.substring(lastBodyIndex)}`;
+};

From db5ba1f4be3db429cde71d3da5ef439f6ccfbbdb Mon Sep 17 00:00:00 2001
From: lby <icesunex@hotmail.com>
Date: Fri, 12 May 2023 09:17:17 +0800
Subject: [PATCH 7/7] refactor: allow camera

---
 web/src/core/Crust/Plugins/PluginFrame/SafeIFrame/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/core/Crust/Plugins/PluginFrame/SafeIFrame/index.tsx b/web/src/core/Crust/Plugins/PluginFrame/SafeIFrame/index.tsx
index 9b86c0634..2f3b03b42 100644
--- a/web/src/core/Crust/Plugins/PluginFrame/SafeIFrame/index.tsx
+++ b/web/src/core/Crust/Plugins/PluginFrame/SafeIFrame/index.tsx
@@ -70,7 +70,7 @@ const IFrame: React.ForwardRefRenderFunction<Ref, Props> = (
       className={className}
       onLoad={onIFrameLoad}
       sandbox="allow-scripts allow-downloads allow-popups allow-popups-to-escape-sandbox"
-      allow="geolocation"
+      allow="geolocation; camera"
       {...props}
     />
   ) : null;