llbzow 的摸鱼日记 (づ￣ 3￣)づ

1
export class ChildRealmSandbox {
2
  private fakeWindow: Record<string, any> = {};
3
  public readonly proxyWindow: Window;
4

5
  constructor(private hostWindow: Window, private componentRoot: ShadowRoot) {
6
    this.proxyWindow = new Proxy(this.fakeWindow, {
7
      get: (target, prop: string | symbol) => {
8
        // 1. 优先读取沙箱局部作用域
9
        if (prop in target) {
10
          return target[prop as string];
11
        }
12

13
        // 2. 拦截 document，强制限定在当前组件的 ShadowRoot 范围内
14
        if (prop === 'document') {
15
          return this.createScopedDocument();
16
        }
17

18
        // 3. 拦截特定全局方法，防止恶意弹出全屏或覆写路由
19
        if (prop === 'location' || prop === 'history') {
20
          return undefined;
21
        }
22

23
        // 4. 允许访问宿主的安全白名单只读属性 (如 Math, JSON, Array 等)
24
        const hostValue = (this.hostWindow as any)[prop];
25
        if (typeof hostValue === 'function' && !hostValue.prototype) {
26
          // 绑定 this 到宿主，防止丢失上下文
27
          return hostValue.bind(this.hostWindow);
28
        }
29
        return hostValue;
30
      },
31

32
      set: (target, prop: string | symbol, value: any) => {
33
        // 所有的写操作只落在局部 fakeWindow，绝不外溢到宿主
34
        target[prop as string] = value;
35
        return true;
36
      },
37

38
      has: (target, prop) => {
39
        return true; // 强制所有变量查找在当前代理闭环
40
      }
41
    }) as Window;
42
  }
43

44
  private createScopedDocument() {
45
    return new Proxy(this.componentRoot, {
46
      get: (root, prop) => {
47
        if (prop === 'getElementById' || prop === 'querySelector' || prop === 'querySelectorAll') {
48
          return (root as any)[prop].bind(root);
49
        }
50
        if (prop === 'body') {
51
          return root;
52
        }
53
        return (this.hostWindow.document as any)[prop];
54
      }
55
    });
56
  }
57

58
  public runCode(code: string, context: Record<string, any> = {}) {
59
    // 注入沙箱环境执行
60
    const fn = new Function('window', 'document', 'context', `
61
      with (window) {
62
        return (function() {
63
          ${code}
64
        }).call(context);
65
      }
66
    `);
67
    return fn(this.proxyWindow, this.proxyWindow.document, context);
68
  }
69
}

1
export class SandboxedComponentElement extends HTMLElement {
2
  private shadow: ShadowRoot;
3
  private sandbox: ChildRealmSandbox;
4

5
  constructor() {
6
    super();
7
    // 1. 开启独立的 Shadow DOM
8
    this.shadow = this.attachShadow({ mode: 'open' });
9
    // 2. 初始化脚本隔离沙箱
10
    this.sandbox = new ChildRealmSandbox(window, this.shadow);
11
  }
12

13
  connectedCallback() {
14
    this.render();
15
  }
16

17
  public updateSpec(props: Record<string, any>, cssText: string, templateHtml: string) {
18
    this.shadow.innerHTML = `
19
      <style>
20
        :host {
21
          display: block;
22
          box-sizing: border-box;
23
        }
24
        /* 注入组件专属样式，由于在 Shadow DOM 内，绝不会外溢到设计器宿主 */
25
        ${cssText}
26
      </style>
27
      <div class="component-inner-root">
28
        ${templateHtml}
29
      </div>
30
    `;
31

32
    // 绑定局部事件处理
33
    this.bindEvents(props);
34
  }
35

36
  private bindEvents(props: Record<string, any>) {
37
    const root = this.shadow.querySelector('.component-inner-root');
38
    if (props.onClickScript && root) {
39
      root.addEventListener('click', (e) => {
40
        // 阻断原生事件直接冒泡破坏外层设计器的拖拽监听
41
        e.stopPropagation();
42
        // 在沙箱内执行自定义脚本
43
        this.sandbox.runCode(props.onClickScript, { event: e, props });
44
      });
45
    }
46
  }
47
}
48

49
customElements.define('sandboxed-lowcode-node', SandboxedComponentElement);