---

提示

前言：沙箱，即sandbox，顾名思义，沙箱（Sandbox）是一种用于隔离正在运行程序的安全机制，通常用于执行未经测试或不受信任的程序或代码，它会为待执行的程序创建一个独立的执行环境，内部程序的执行不会影响到外部程序的运行。

例如：谷歌浏览器中的每一个标签页都是一个沙箱（sandbox）。渲染进程被沙箱（Sandbox）隔离，网页 web 代码内容必须通过 IPC 通道才能与浏览器内核进程通信，通信过程会进行安全的检查。沙箱设计的目的是为了让不可信的代码运行在一定的环境中，从而限制这些代码访问隔离区之外的资源。

沙箱环境

在浏览器端，我们通常会在引用一段外部js，或是使用在线代码编辑器等时候，采用沙箱，已防止其对本身页面造成影响，今天这篇文章就来记录一些较常使用的沙箱制作原理。

SnapshotSandbox

快照沙箱： 将主应用的window对象做浅拷贝，将window上的键值对都存进hash map中，无论当前的应用的window被如何改动，当前环境被卸载时将这个 hash map应用回window即可。缺点：需要遍历存储window属性，每次注入注销都要进行一次diff操作，开销大。

实现：

import type { SandBox } from '../interfaces';
import { SandBoxType } from '../interfaces';
function iter(obj: typeof window, callbackFn: (prop: any) => void) {
  // eslint-disable-next-line guard-for-in, no-restricted-syntax
  for (const prop in obj) {
    // patch for clearInterval for compatible reason, see #1490
    if (obj.hasOwnProperty(prop) || prop === 'clearInterval') {
      callbackFn(prop);
    }
  }
}
/**
 * 基于 diff 方式实现的沙箱，用于不支持 Proxy 的低版本浏览器
 */
export default class SnapshotSandbox implements SandBox {
  proxy: WindowProxy;
  name: string;
  type: SandBoxType;
  sandboxRunning = true;
  private windowSnapshot!: Window;
  private modifyPropsMap: Record<any, any> = {};
  constructor(name: string) {
    this.name = name;
    this.proxy = window;
    this.type = SandBoxType.Snapshot;
  }

  /**
   * 当环境注入时，创建一个对象，用于存储window上可迭代的属性。
   */
  active() {
    // 记录当前快照
    this.windowSnapshot = {} as Window;
    iter(window, (prop) => {
      this.windowSnapshot[prop] = window[prop];
    });
    // 恢复之前的变更
    Object.keys(this.modifyPropsMap).forEach((p: any) => {
      window[p] = this.modifyPropsMap[p];
    });

    this.sandboxRunning = true;
  }
  inactive() {
    this.modifyPropsMap = {};
    iter(window, (prop) => {
      if (window[prop] !== this.windowSnapshot[prop]) {
        // 记录变更，恢复环境
        this.modifyPropsMap[prop] = window[prop];
        window[prop] = this.windowSnapshot[prop];
      }
    });
    if (process.env.NODE_ENV === 'development') {
      console.info(`[qiankun:sandbox] ${this.name} origin window restore...`, Object.keys(this.modifyPropsMap));
    }
    this.sandboxRunning = false;
  }
}

• modifyPropsMap对象：用于记录子应用环境对window的变更。当主应用切回子应用时，将原本子应用挂载在window上的属性恢复。

SnapshotSandbox的使用

const diffSandbox = new SnapshotSandbox('diff沙箱');
diffSandbox.active();  // 激活沙箱
window.a = '1';
console.log('开启沙箱：', window.a);
diffSandbox.inactive(); //失活沙箱
console.log('失活沙箱：', window.a);
diffSandbox.active();   // 重新激活
console.log('再次激活', window.a);

LegacySandbox

LegacySandbox相对于SnapshotSandbox的缺点做了简化的处理：通过监听对 window 的修改来直接记录 Diff 内容

实现：

 import type { SandBox } from '../../interfaces';
 import { SandBoxType } from '../../interfaces';
 import { getTargetValue } from '../common';
 
 function isPropConfigurable(target: WindowProxy, prop: PropertyKey) {
   const descriptor = Object.getOwnPropertyDescriptor(target, prop);
   return descriptor ? descriptor.configurable : true;
 }
 
 export default class LegacySandbox implements SandBox {
   /** 沙箱期间新增的全局变量 */
   private addedPropsMapInSandbox = new Map<PropertyKey, any>();
 
   /** 沙箱期间更新的全局变量 */
   private modifiedPropsOriginalValueMapInSandbox = new Map<PropertyKey, any>();
 
   /** 持续记录更新的(新增和修改的)全局变量的 map，用于在任意时刻做 snapshot */
   private currentUpdatedPropsValueMap = new Map<PropertyKey, any>();
 
   name: string;
 
   proxy: WindowProxy;
 
   globalContext: typeof window;
 
   type: SandBoxType;
 
   sandboxRunning = true;
 
   latestSetProp: PropertyKey | null = null;
 
   private setWindowProp(prop: PropertyKey, value: any, toDelete?: boolean) {
     if (value === undefined && toDelete) {
       // eslint-disable-next-line no-param-reassign
       delete (this.globalContext as any)[prop];
     } else if (isPropConfigurable(this.globalContext, prop) && typeof prop !== 'symbol') {
       Object.defineProperty(this.globalContext, prop, { writable: true, configurable: true });
       // eslint-disable-next-line no-param-reassign
       (this.globalContext as any)[prop] = value;
     }
   }
 
   active() {
     if (!this.sandboxRunning) {
       this.currentUpdatedPropsValueMap.forEach((v, p) => this.setWindowProp(p, v));
     }
 
     this.sandboxRunning = true;
   }
 
   inactive() {
     if (process.env.NODE_ENV === 'development') {
       console.info(`[qiankun:sandbox] ${this.name} modified global properties restore...`, [
         ...this.addedPropsMapInSandbox.keys(),
         ...this.modifiedPropsOriginalValueMapInSandbox.keys(),
       ]);
     }
 
     // renderSandboxSnapshot = snapshot(currentUpdatedPropsValueMapForSnapshot);
     // restore global props to initial snapshot
     this.modifiedPropsOriginalValueMapInSandbox.forEach((v, p) => this.setWindowProp(p, v));
     this.addedPropsMapInSandbox.forEach((_, p) => this.setWindowProp(p, undefined, true));
 
     this.sandboxRunning = false;
   }
 
   constructor(name: string, globalContext = window) {
     this.name = name;
     this.globalContext = globalContext;
     this.type = SandBoxType.LegacyProxy;
     const { addedPropsMapInSandbox, modifiedPropsOriginalValueMapInSandbox, currentUpdatedPropsValueMap } = this;
 
     const rawWindow = globalContext;
     const fakeWindow = Object.create(null) as Window;
 
     const setTrap = (p: PropertyKey, value: any, originalValue: any, sync2Window = true) => {
       if (this.sandboxRunning) {
         if (!rawWindow.hasOwnProperty(p)) {
           addedPropsMapInSandbox.set(p, value);
         } else if (!modifiedPropsOriginalValueMapInSandbox.has(p)) {
           // 如果当前 window 对象存在该属性，且 record map 中未记录过，则记录该属性初始值
           modifiedPropsOriginalValueMapInSandbox.set(p, originalValue);
         }
 
         currentUpdatedPropsValueMap.set(p, value);
 
         if (sync2Window) {
           // 必须重新设置 window 对象保证下次 get 时能拿到已更新的数据
           (rawWindow as any)[p] = value;
         }
 
         this.latestSetProp = p;
 
         return true;
       }
 
       if (process.env.NODE_ENV === 'development') {
         console.warn(`[qiankun] Set window.${p.toString()} while sandbox destroyed or inactive in ${name}!`);
       }
 
       // 在 strict-mode 下，Proxy 的 handler.set 返回 false 会抛出 TypeError，在沙箱卸载的情况下应该忽略错误
       return true;
     };
 
     const proxy = new Proxy(fakeWindow, {
       set: (_: Window, p: PropertyKey, value: any): boolean => {
         const originalValue = (rawWindow as any)[p];
         
         return setTrap(p, value, originalValue, true);
       },
 
       get(_: Window, p: PropertyKey): any {
         // avoid who using window.window or window.self to escape the sandbox environment to touch the really window
         // or use window.top to check if an iframe context
         // see https://github.com/eligrey/FileSaver.js/blob/master/src/FileSaver.js#L13
         if (p === 'top' || p === 'parent' || p === 'window' || p === 'self') {
           return proxy;
         }
 
         const value = (rawWindow as any)[p];
         return getTargetValue(rawWindow, value);
       },
 
       // trap in operator
       // see https://github.com/styled-components/styled-components/blob/master/packages/styled-components/src/constants.js#L12
       has(_: Window, p: string | number | symbol): boolean {
         return p in rawWindow;
       },
 
       getOwnPropertyDescriptor(_: Window, p: PropertyKey): PropertyDescriptor | undefined {
         const descriptor = Object.getOwnPropertyDescriptor(rawWindow, p);
         // A property cannot be reported as non-configurable, if it does not exists as an own property of the target object
         if (descriptor && !descriptor.configurable) {
           descriptor.configurable = true;
         }
         return descriptor;
       },
 
       defineProperty(_: Window, p: string | symbol, attributes: PropertyDescriptor): boolean {
         const originalValue = (rawWindow as any)[p];
         const done = Reflect.defineProperty(rawWindow, p, attributes);
         const value = (rawWindow as any)[p];
         setTrap(p, value, originalValue, false);
 
         return done;
       },
     });
 
     this.proxy = proxy;
   }
 }

源码实现很长，可能你没有耐心看完，但其原理我们在这做一个解释：

1. 创建了一个fakeWindow对象并对其代理，用于观察window的变化
2. 当window中属性发生新增时，将新增的属性记录到addedPropsMapInSandbox对象中。
3. 当window中属性发生修改时，将修改的属性记录到modifiedPropsOriginalValueMapInSandbox对象中，其键值为 属性：该属性的初始值。
4. 当window中属性发生新增或修改时，将该属性的最终值记录到currentUpdatedPropsValueMap对象中。
5. 当子应用卸载时，将modifiedPropsOriginalValueMapInSandbox对象内遍历覆盖初始化window，遍历addedPropsMapInSandbox对象将window中包含的键值对删除。
6. 当子应用注册时，将currentUpdatedPropsValueMap对象内记录的值重新赋到window上。

最终完成了单例沙盒的实现。

ProxySandbox

以上两种沙盒，其在微应用修改window时仍会污染到原有环境，为了避免真实的 window 被污染，qiankun 实现了 ProxySandbox。下面梳理一个基础版本的代理沙盒实现

其源码篇幅较长，先说一下其实现原理：

1. 把当前 window 的一些原生属性（如document, location等）拷贝出来，单独放在 fakeWindow 对象上
2. 之后对每个子应用分配一个 fakeWindow,这个fakeWindow经过Proxy代理到全局window上。
3. 当修改window的属性时，你实际上是修改的拷贝出来的fakeWindow，于是乎无论你如何修改，改的都是当前微应用下的fakewindow，从而避免了全局window的污染。

实现

/* eslint-disable no-param-reassign */
/**
 * @author Kuitos
 * @since 2020-3-31
 */
 import type { SandBox } from '../interfaces';
 import { SandBoxType } from '../interfaces';
 import { nativeGlobal, nextTask } from '../utils';
 import { getTargetValue, setCurrentRunningApp, getCurrentRunningApp } from './common';
 
 type SymbolTarget = 'target' | 'globalContext';
 
 type FakeWindow = Window & Record<PropertyKey, any>;
 
 /**
  * fastest(at most time) unique array method
  * @see https://jsperf.com/array-filter-unique/30
  */
 function uniq(array: Array<string | symbol>) {
   return array.filter(function filter(this: PropertyKey[], element) {
     return element in this ? false : ((this as any)[element] = true);
   }, Object.create(null));
 }
 
 // zone.js will overwrite Object.defineProperty
 const rawObjectDefineProperty = Object.defineProperty;
 
 const variableWhiteListInDev =
   process.env.NODE_ENV === 'development' || window.__QIANKUN_DEVELOPMENT__
     ? [
         // for react hot reload
         // see https://github.com/facebook/create-react-app/blob/66bf7dfc43350249e2f09d138a20840dae8a0a4a/packages/react-error-overlay/src/index.js#L180
         '__REACT_ERROR_OVERLAY_GLOBAL_HOOK__',
       ]
     : [];
 // who could escape the sandbox
 const variableWhiteList: PropertyKey[] = [
   // FIXME System.js used a indirect call with eval, which would make it scope escape to global
   // To make System.js works well, we write it back to global window temporary
   // see https://github.com/systemjs/systemjs/blob/457f5b7e8af6bd120a279540477552a07d5de086/src/evaluate.js#L106
   'System',
 
   // see https://github.com/systemjs/systemjs/blob/457f5b7e8af6bd120a279540477552a07d5de086/src/instantiate.js#L357
   '__cjsWrapper',
   ...variableWhiteListInDev,
 ];
 
 /*
  variables who are impossible to be overwrite need to be escaped from proxy sandbox for performance reasons
  */
 const unscopables = {
   undefined: true,
   Array: true,
   Object: true,
   String: true,
   Boolean: true,
   Math: true,
   Number: true,
   Symbol: true,
   parseFloat: true,
   Float32Array: true,
   isNaN: true,
   Infinity: true,
   Reflect: true,
   Float64Array: true,
   Function: true,
   Map: true,
   NaN: true,
   Promise: true,
   Proxy: true,
   Set: true,
   parseInt: true,
   requestAnimationFrame: true,
 };
 
 const useNativeWindowForBindingsProps = new Map<PropertyKey, boolean>([
   ['fetch', true],
   ['mockDomAPIInBlackList', process.env.NODE_ENV === 'test'],
 ]);
 
 function createFakeWindow(globalContext: Window) {
   // map always has the fastest performance in has check scenario
   // see https://jsperf.com/array-indexof-vs-set-has/23
   const propertiesWithGetter = new Map<PropertyKey, boolean>();
   const fakeWindow = {} as FakeWindow;
 
   /*
    copy the non-configurable property of global to fakeWindow
    see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/getOwnPropertyDescriptor
    > A property cannot be reported as non-configurable, if it does not exists as an own property of the target object or if it exists as a configurable own property of the target object.
    */
   Object.getOwnPropertyNames(globalContext)
     .filter((p) => {
       const descriptor = Object.getOwnPropertyDescriptor(globalContext, p);
       return !descriptor?.configurable;
     })
     .forEach((p) => {
       const descriptor = Object.getOwnPropertyDescriptor(globalContext, p);
       if (descriptor) {
         const hasGetter = Object.prototype.hasOwnProperty.call(descriptor, 'get');
 
         /*
          make top/self/window property configurable and writable, otherwise it will cause TypeError while get trap return.
          see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/get
          > The value reported for a property must be the same as the value of the corresponding target object property if the target object property is a non-writable, non-configurable data property.
          */
         if (
           p === 'top' ||
           p === 'parent' ||
           p === 'self' ||
           p === 'window' ||
           (process.env.NODE_ENV === 'test' && (p === 'mockTop' || p === 'mockSafariTop'))
         ) {
           descriptor.configurable = true;
           /*
            The descriptor of window.window/window.top/window.self in Safari/FF are accessor descriptors, we need to avoid adding a data descriptor while it was
            Example:
             Safari/FF: Object.getOwnPropertyDescriptor(window, 'top') -> {get: function, set: undefined, enumerable: true, configurable: false}
             Chrome: Object.getOwnPropertyDescriptor(window, 'top') -> {value: Window, writable: false, enumerable: true, configurable: false}
            */
           if (!hasGetter) {
             descriptor.writable = true;
           }
         }
 
         if (hasGetter) propertiesWithGetter.set(p, true);
 
         // freeze the descriptor to avoid being modified by zone.js
         // see https://github.com/angular/zone.js/blob/a5fe09b0fac27ac5df1fa746042f96f05ccb6a00/lib/browser/define-property.ts#L71
         rawObjectDefineProperty(fakeWindow, p, Object.freeze(descriptor));
       }
     });
 
   return {
     fakeWindow,
     propertiesWithGetter,
   };
 }
 
 let activeSandboxCount = 0;
 
 /**
  * 基于 Proxy 实现的沙箱
  */
 export default class ProxySandbox implements SandBox {
   /** window 值变更记录 */
   private updatedValueSet = new Set<PropertyKey>();
 
   name: string;
 
   type: SandBoxType;
 
   proxy: WindowProxy;
 
   globalContext: typeof window;
 
   sandboxRunning = true;
 
   latestSetProp: PropertyKey | null = null;
 
   private registerRunningApp(name: string, proxy: Window) {
     if (this.sandboxRunning) {
       const currentRunningApp = getCurrentRunningApp();
       if (!currentRunningApp || currentRunningApp.name !== name) {
         setCurrentRunningApp({ name, window: proxy });
       }
       // FIXME if you have any other good ideas
       // remove the mark in next tick, thus we can identify whether it in micro app or not
       // this approach is just a workaround, it could not cover all complex cases, such as the micro app runs in the same task context with master in some case
       nextTask(() => {
         setCurrentRunningApp(null);
       });
     }
   }
 
   active() {
     if (!this.sandboxRunning) activeSandboxCount++;
     this.sandboxRunning = true;
   }
 
   inactive() {
     if (process.env.NODE_ENV === 'development') {
       console.info(`[qiankun:sandbox] ${this.name} modified global properties restore...`, [
         ...this.updatedValueSet.keys(),
       ]);
     }
 
     if (--activeSandboxCount === 0) {
       variableWhiteList.forEach((p) => {
         if (this.proxy.hasOwnProperty(p)) {
           // @ts-ignore
           delete this.globalContext[p];
         }
       });
     }
 
     this.sandboxRunning = false;
   }
 
   constructor(name: string, globalContext = window) {
     this.name = name;
     this.globalContext = globalContext;
     this.type = SandBoxType.Proxy;
     const { updatedValueSet } = this;
 
     const { fakeWindow, propertiesWithGetter } = createFakeWindow(globalContext);
 
     const descriptorTargetMap = new Map<PropertyKey, SymbolTarget>();
     const hasOwnProperty = (key: PropertyKey) => fakeWindow.hasOwnProperty(key) || globalContext.hasOwnProperty(key);
 
     const proxy = new Proxy(fakeWindow, {
       set: (target: FakeWindow, p: PropertyKey, value: any): boolean => {
         if (this.sandboxRunning) {
           this.registerRunningApp(name, proxy);
           // We must kept its description while the property existed in globalContext before
           if (!target.hasOwnProperty(p) && globalContext.hasOwnProperty(p)) {
             const descriptor = Object.getOwnPropertyDescriptor(globalContext, p);
             const { writable, configurable, enumerable } = descriptor!;
             if (writable) {
               Object.defineProperty(target, p, {
                 configurable,
                 enumerable,
                 writable,
                 value,
               });
             }
           } else {
             // @ts-ignore
             target[p] = value;
           }
 
           if (variableWhiteList.indexOf(p) !== -1) {
             // @ts-ignore
             globalContext[p] = value;
           }
 
           updatedValueSet.add(p);
 
           this.latestSetProp = p;
 
           return true;
         }
 
         if (process.env.NODE_ENV === 'development') {
           console.warn(`[qiankun] Set window.${p.toString()} while sandbox destroyed or inactive in ${name}!`);
         }
 
         // 在 strict-mode 下，Proxy 的 handler.set 返回 false 会抛出 TypeError，在沙箱卸载的情况下应该忽略错误
         return true;
       },
 
       get: (target: FakeWindow, p: PropertyKey): any => {
         this.registerRunningApp(name, proxy);
 
         if (p === Symbol.unscopables) return unscopables;
         // avoid who using window.window or window.self to escape the sandbox environment to touch the really window
         // see https://github.com/eligrey/FileSaver.js/blob/master/src/FileSaver.js#L13
         if (p === 'window' || p === 'self') {
           return proxy;
         }
 
         // hijack globalWindow accessing with globalThis keyword
         if (p === 'globalThis') {
           return proxy;
         }
 
         if (
           p === 'top' ||
           p === 'parent' ||
           (process.env.NODE_ENV === 'test' && (p === 'mockTop' || p === 'mockSafariTop'))
         ) {
           // if your master app in an iframe context, allow these props escape the sandbox
           if (globalContext === globalContext.parent) {
             return proxy;
           }
           return (globalContext as any)[p];
         }
 
         // proxy.hasOwnProperty would invoke getter firstly, then its value represented as globalContext.hasOwnProperty
         if (p === 'hasOwnProperty') {
           return hasOwnProperty;
         }
 
         if (p === 'document') {
           return document;
         }
 
         if (p === 'eval') {
           return eval;
         }
 
         const value = propertiesWithGetter.has(p)
           ? (globalContext as any)[p]
           : p in target
           ? (target as any)[p]
           : (globalContext as any)[p];
         /* Some dom api must be bound to native window, otherwise it would cause exception like 'TypeError: Failed to execute 'fetch' on 'Window': Illegal invocation'
            See this code:
              const proxy = new Proxy(window, {});
              const proxyFetch = fetch.bind(proxy);
              proxyFetch('https://qiankun.com');
         */
         const boundTarget = useNativeWindowForBindingsProps.get(p) ? nativeGlobal : globalContext;
         return getTargetValue(boundTarget, value);
       },
 
       // trap in operator
       // see https://github.com/styled-components/styled-components/blob/master/packages/styled-components/src/constants.js#L12
       has(target: FakeWindow, p: string | number | symbol): boolean {
         return p in unscopables || p in target || p in globalContext;
       },
 
       getOwnPropertyDescriptor(target: FakeWindow, p: string | number | symbol): PropertyDescriptor | undefined {
         /*
          as the descriptor of top/self/window/mockTop in raw window are configurable but not in proxy target, we need to get it from target to avoid TypeError
          see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/getOwnPropertyDescriptor
          > A property cannot be reported as non-configurable, if it does not exists as an own property of the target object or if it exists as a configurable own property of the target object.
          */
         if (target.hasOwnProperty(p)) {
           const descriptor = Object.getOwnPropertyDescriptor(target, p);
           descriptorTargetMap.set(p, 'target');
           return descriptor;
         }
 
         if (globalContext.hasOwnProperty(p)) {
           const descriptor = Object.getOwnPropertyDescriptor(globalContext, p);
           descriptorTargetMap.set(p, 'globalContext');
           // A property cannot be reported as non-configurable, if it does not exists as an own property of the target object
           if (descriptor && !descriptor.configurable) {
             descriptor.configurable = true;
           }
           return descriptor;
         }
 
         return undefined;
       },
 
       // trap to support iterator with sandbox
       ownKeys(target: FakeWindow): ArrayLike<string | symbol> {
         return uniq(Reflect.ownKeys(globalContext).concat(Reflect.ownKeys(target)));
       },
 
       defineProperty(target: Window, p: PropertyKey, attributes: PropertyDescriptor): boolean {
         const from = descriptorTargetMap.get(p);
         /*
          Descriptor must be defined to native window while it comes from native window via Object.getOwnPropertyDescriptor(window, p),
          otherwise it would cause a TypeError with illegal invocation.
          */
         switch (from) {
           case 'globalContext':
             return Reflect.defineProperty(globalContext, p, attributes);
           default:
             return Reflect.defineProperty(target, p, attributes);
         }
       },
 
       deleteProperty: (target: FakeWindow, p: string | number | symbol): boolean => {
         this.registerRunningApp(name, proxy);
         if (target.hasOwnProperty(p)) {
           // @ts-ignore
           delete target[p];
           updatedValueSet.delete(p);
 
           return true;
         }
 
         return true;
       },
 
       // makes sure `window instanceof Window` returns truthy in micro app
       getPrototypeOf() {
         return Reflect.getPrototypeOf(globalContext);
       },
     });
 
     this.proxy = proxy;
 
     activeSandboxCount++;
   }
 }

iframe

iframe本身就已是一个非常成熟安全的沙箱，这里我从优秀的老哥处扣了一段iframe通信的统一处理。宿主环境中通过实例化 new ProxySandbox() 操作来创建加载 Iframe， Iframe 加载完毕后会监听来自宿主的消息，诸如执行代码、加载依赖。内部也可以通过 postMessage 向宿主环境发送消息

let uid = 1;
export interface LoadDependencies {
    dependencies: Record<string, string>,
    types?: Record<string, string>,
    name?:string;
}
export class PreviewProxy {
    iframe: HTMLIFrameElement
    handlers: Record<string, Function>
    pending_cmds: Map<
        number,
        { resolve: (value: unknown) => void; reject: (reason?: any) => void }
        >
    handle_event: (e: any) => void

    constructor(iframe: HTMLIFrameElement, handlers: Record<string, Function>) {
        this.iframe = iframe;
        this.handlers = handlers;

        this.pending_cmds = new Map();

        this.handle_event = (e) => this.handle_repl_message(e);
        window.addEventListener('message', this.handle_event, false);
    }

    destroy() {
        window.removeEventListener('message', this.handle_event);
    }

    iframe_command(action: string, args: any) {
        return new Promise((resolve, reject) => {
            const cmd_id = uid++;

            this.pending_cmds.set(cmd_id, { resolve, reject });

            this.iframe.contentWindow!.postMessage({ action, cmd_id, args }, '*');
        });
    }

    handle_command_message(cmd_data: any) {
        const action = cmd_data.action;
        const id = cmd_data.cmd_id;
        const handler = this.pending_cmds.get(id);

        if (handler) {
            this.pending_cmds.delete(id);
            if (action === 'cmd_error') {
                const { message, stack } = cmd_data;
                const e = new Error(message);
                e.stack = stack;
                handler.reject(e);
            }

            if (action === 'cmd_ok') {
                handler.resolve(cmd_data.args);
            }
        } else if (action !== 'cmd_error' && action !== 'cmd_ok') {
            console.error('command not found', id, cmd_data, [
                ...this.pending_cmds.keys()
            ]);
        }
    }

    handle_repl_message(event: any) {
        if (event.source !== this.iframe.contentWindow) return;

        const { action, args } = event.data;
        this.handlers.on_default_event(event);
        switch (action) {
            case 'cmd_error':
            case 'cmd_ok':
                return this.handle_command_message(event.data);
            case 'fetch_progress':
                return this.handlers.on_fetch_progress(args.remaining);
            case 'error':
                return this.handlers.on_error(event.data);
            case 'unhandledrejection':
                return this.handlers.on_unhandled_rejection(event.data);
            case 'console':
                return this.handlers.on_console(event.data);
            case 'console_group':
                return this.handlers.on_console_group(event.data);
            case 'console_group_collapsed':
                return this.handlers.on_console_group_collapsed(event.data);
            case 'console_group_end':
                return this.handlers.on_console_group_end(event.data);
        }
    }

    eval(script: string | string[]) {
        return this.iframe_command('eval', { script });
    }

    handle_links() {
        return this.iframe_command('catch_clicks', {});
    }

    load_depend(options: LoadDependencies) {
        return this.iframe_command('load_dependencies', options);
    }
}

<iframe frameBorder="0" id="codeIframe" sandbox="allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation"></iframe>

缺点： iframe样式兼容问题。分别为功能性兼容性以及业务性兼容性的问题。可能会存在一些安全问题。postmessage可以试出来。

• 主应用劫持快捷键操作
• 事件无法冒泡顶层，针对整个应用统一处理时效
• iframe 内元素会被限制在文档树中，视窗宽高限制问题
• 无法共享基础库进一步减少包体积
• 事件通信繁琐且限制多（https://blog.csdn.net/willspace/article/details/49003963 (opens new window)）

优点：实现起来简单，自带沙盒特性

小结

今日的文章记录了前端实现沙箱的常用方式，这也是目前的微前端采用的组合式应用路由开发的技术方案，以实现了JS的沙盒环境。对于CSS来说：

css冲突解决方案：

相比于JS的沙盒环境来说，css的解决冲突的方案有很多，并且实现起来不是很复杂。

1. 类似于vue的scoped。在打包的时候，对css选择器加上响应的属性，属性的key值是一些不重复的hash值，然后在选择的时候，使用属性选择器进行选择。
2. 可以自定义前缀。在开发子模块之前，需要确定一个全局唯一的css前缀，然后在书写的过程中同一添加此前缀，或在根root上添加此前缀，使用less或sass作用域嵌套即可解。例如：

<div class='rootA'>
 <span class='rootA-span'></span>  
</div>
<style>
.root{
  .rootA-span{
    // 书写你的css
  }
}    
</style>

了解了今日的内容，本周计划为了解web components的沙箱机制及其为当下全框架实用组件库的发展带来的影响。