@lingxiteam/ebe-utils 0.0.1

package/lib/public/src/utils/sandBoxLoadModule.ts

@@ -0,0 +1,216 @@
+import Sandbox from '@/utils/sandbox';
+import { isPlainObject, last } from 'lodash';
+import { createElement, Fragment } from 'react';
+
+const { hasOwnProperty } = Object.prototype;
+const hasOwn = (val: object, key: string | symbol): key is keyof typeof val =>
+  hasOwnProperty.call(val, key);
+
+interface LoadModuleConfig {
+  /**
+   * 上下文
+   */
+  context?: {
+    /**
+     * 包含某些上下文的key
+     */
+    include?: string[];
+
+    /**
+     * 排除某些key  优先级最高， 会排除包含的所有函数
+     */
+    exclude?: string[];
+
+    /**
+     * 增加额外的上下文
+     */
+    allowMap?: Record<string, any>;
+  };
+
+  /**
+   * 自定义执行函数
+   * @returns 执行结果
+   */
+  run?: (
+    code: string,
+    options: {
+      context: Record<string, any>;
+      dependencies: Record<string, any>;
+    },
+  ) => any;
+}
+
+// 这些key禁止修改
+export const forbidModifyKey = [
+  'data',
+  'globalData',
+  'urlParam',
+  'routerData',
+  'state',
+];
+
+export const defaultLoadModuleCtxKey = [
+  'data',
+  'globalData',
+  'urlParam',
+  'routerData',
+  'state',
+  'lcdpApi',
+  'appId',
+  'pageId',
+  'attrDataMap',
+  'moment',
+  '_',
+  'messageApi',
+  'api',
+  'customActionMap',
+  'LcdpTerminalType',
+  'utils',
+  'appInfo',
+  'utils.getLocaleEnv',
+  'utils.getLocaleLanguage',
+  'functorsMap',
+  'getValue',
+];
+
+// 缓存环境变量，防止过渡解析
+const environmentCacheMap = new Map<string, boolean>();
+
+const isDevelopment = () => {
+  if (environmentCacheMap.has(window.location.href)) {
+    return environmentCacheMap.get(window.location.href);
+  }
+
+  const [, search] = window.location.href.split('?') || [];
+  const qsKeys: Record<string, any> = {};
+
+  search.split('&').forEach((keyValues) => {
+    const [key, value] = keyValues?.split('=') || [];
+    if (key) {
+      qsKeys[key] = value;
+    }
+  });
+
+  const isDev = Object.keys(qsKeys).includes('debugToken');
+
+  environmentCacheMap.set(window.location.href, isDev);
+
+  return isDev;
+};
+
+// 创建require函数，构造一个require的浏览器环境
+const createRequires = (dependencies: Record<string, any> = {}) => {
+  return (name: string) => {
+    if (!dependencies[name]) {
+      throw new Error(`Module ${name} cannot be found.`);
+    }
+    return dependencies[name];
+  };
+};
+
+/**
+ * 获取上下文
+ * @param context
+ * @param config
+ * @param allowMap
+ * @returns
+ */
+const getAllowContext = (
+  context: Record<string, any>,
+  config?: LoadModuleConfig,
+  allowMap = {},
+) => {
+  let allowContextKeys = [...defaultLoadModuleCtxKey];
+
+  const {
+    context: { include = [], exclude = [], allowMap: userAllowMap = {} } = {},
+  } = config || {};
+
+  // 优先插入包含的key;
+  allowContextKeys.push(...include, ...Object.keys({ ...userAllowMap }));
+
+  const totalContext: Record<string, any> = {
+    ...context,
+    ...userAllowMap,
+    ...allowMap,
+  };
+
+  const isDEV = hasOwn(totalContext, 'urlParam')
+    ? totalContext.urlParam.debugToken
+    : isDevelopment();
+
+  // 移除exclude的key;
+  allowContextKeys = allowContextKeys.filter((key) => !exclude.includes(key));
+
+  // 调用方增加的上下文具有最高优先级，不允许被配置排除。
+  allowContextKeys.push(...Object.keys(allowMap));
+
+  const result: Record<string, any> = {};
+  allowContextKeys.forEach((key) => {
+    const path = key.split('.');
+    if (result[last(path)!]) {
+      throw new Error(`加载模块时，上下文遇到相同的key:${key}, 请检查配置`);
+    }
+    let value = path
+      .filter(Boolean)
+      .reduce((pre, current) => pre?.[current], totalContext);
+
+    // 对象在预览模式下禁止修改对象值
+    if (isPlainObject(value)) {
+      value = { ...value };
+      // 开发模式下 部分字段禁止修改
+      if (forbidModifyKey.includes(key) && isDEV && Object.freeze) {
+        Object.freeze(value);
+      }
+    }
+
+    result[last(path)!] = value;
+  });
+
+  return result;
+};
+
+/**
+ * 加载cjs或者模块
+ * @param code
+ * @param run 运行场景
+ * @param dependencies 依赖项
+ */
+export const sandBoxLoadModule = (
+  code: string,
+  context: Record<string, any>,
+  config?: LoadModuleConfig,
+  options?: {
+    dependencies?: Record<string, any>;
+    allowMap?: Record<string, any>;
+  },
+) => {
+  const { dependencies = {}, allowMap } = options || {};
+
+  const allowContext = getAllowContext(context, config, allowMap);
+  // 模拟requre函数
+  const mockRequire = createRequires(dependencies);
+
+  const exports = {};
+  const module = { exports };
+
+  // 模拟commonjs环境
+  const moduleContext = {
+    require: mockRequire,
+    exports,
+    module,
+    Lingxi: {
+      createVNode: createElement,
+      Fragment,
+    },
+  };
+
+  // 沙箱执行
+  Sandbox.run(code, {
+    ...allowContext,
+    ...moduleContext,
+  });
+
+  // 取出返回值
+  return module.exports;
+};

package/lib/public/src/utils/sandbox/browserCompatible.ts

@@ -0,0 +1,54 @@
+// 一个简易的浏览器能力检测，如需强大功能可考虑引入modernizr.js
+
+type BrowserCompatibleType =
+  | 'optionalChainingOperator'
+  | 'nullishCoalescingOperator'
+  | string;
+
+const testQueue: Record<BrowserCompatibleType, Function> = {};
+
+export const browserCompatible: Record<BrowserCompatibleType, boolean> = {};
+
+export const browserCompatibleTest = {
+  add: (key: string, testFun: Function) => {
+    testQueue[key] = testFun;
+  },
+  remove: (key: string) => {
+    if (testQueue[key]) {
+      delete testQueue[key];
+    }
+  },
+  run: (keys?: BrowserCompatibleType[]) => {
+    (keys || Object.keys(testQueue)).forEach((key) => {
+      if (typeof testQueue[key] === 'function') {
+        browserCompatible[key] = testQueue[key]();
+      }
+    });
+  },
+};
+
+// test optionalChainingOperator
+browserCompatibleTest.add('optionalChainingOperator', () => {
+  try {
+    // eslint-disable-next-line no-eval
+    eval('browserCompatible?.optionalChainingOperator');
+    return true;
+  } catch (e) {
+    return false;
+  }
+});
+
+// test nullishCoalescingOperator
+browserCompatibleTest.add('nullishCoalescingOperator', () => {
+  try {
+    // eslint-disable-next-line no-eval
+    eval('browserCompatible ?? true');
+    return true;
+  } catch (e) {
+    return false;
+  }
+});
+
+browserCompatibleTest.run();
+
+export default browserCompatible;

package/lib/public/src/utils/sandbox/compileCode.ts

@@ -0,0 +1,81 @@
+/* eslint-disable no-new-func */
+import SandBoxRules from './sandboxrules';
+import { isNativeFn } from './utils';
+
+// 语法兼容函数，用于作为轻量的babel处理一些意料外的新运算符
+const fiterCodeFun = (code: string) => {
+  let filterCode = code;
+  if (code !== '') {
+    // 按照SandBoxRules的定义，依次执行
+    SandBoxRules.forEach((loader) => {
+      filterCode = loader(filterCode);
+    });
+    return filterCode;
+  }
+  // 都是空字符串了，沙盒还执行什么，直接抛出
+  return '';
+};
+
+function checkSyntax(checkcode: string) {
+  try {
+    Function(`(${checkcode})`);
+    // 如果沙盒接收到有ES6 import语句的，那么在跑import的时候就会脱离沙盒限制，变成可以访问道全局上下文，目前未存在此使用场景
+    // if (/\bimport\s*(?:[(]|\/[*]|\/\/|<!--|-->)/.test(checkcode)) {
+    //   throw new Error('Dynamic imports are blocked');
+    // }
+  } catch (e) {
+    return {
+      result: false,
+      err: e,
+    };
+  }
+  return {
+    result: true,
+  };
+}
+
+const compile = {
+  general: (code: string, config?: { check: boolean }) => {
+    const { check = true } = config || {};
+    if (!check) {
+      return {
+        result: true,
+        err: null,
+        filterCode: code,
+      };
+    }
+    let filterCode = code;
+    // 预检测语法
+    let checkResult = checkSyntax(filterCode);
+
+    // 使用原始代码进行检查报错
+    if (!checkResult.result) {
+      // 尝试使用转换过的代码
+      filterCode = fiterCodeFun(code);
+      // 处理后再次检测
+      checkResult = checkSyntax(filterCode);
+    }
+
+    return {
+      ...checkResult,
+      filterCode,
+    };
+  },
+  ie: (code: string, config?: { check: boolean }) => {
+    const { check = true } = config || {};
+    return check ? fiterCodeFun(code) : code;
+  },
+};
+
+export const compileCode = (code: string, config?: { check: boolean }) => {
+  if (isNativeFn(window?.Proxy)) {
+    return compile.general(code, config);
+  }
+  return {
+    result: true,
+    err: null,
+    filterCode: compile.ie(code, config),
+  };
+};
+
+export default compile;

package/lib/public/src/utils/sandbox/index.ts

@@ -0,0 +1,5 @@
+import { Sandbox } from './sandbox';
+
+export { compileCode } from './compileCode';
+
+export default Sandbox;

package/lib/public/src/utils/sandbox/sandbox.ts

@@ -0,0 +1,324 @@
+// @ts-ignore
+import ES6Proxy from 'es6-proxy-polyfill';
+import compile from './compileCode';
+import { isNativeFn } from './utils';
+
+/* eslint-disable */
+const ESSandbox = (function () {
+  const run = (
+    code: string,
+    extendAllowMap: any,
+    config?: { check: boolean },
+  ) => {
+    if (!code || typeof code !== 'string') {
+      // 如果输入的字符串是空字符串，或者非法值，直接原样输出
+      return code;
+    }
+    try {
+      const { err, result, filterCode } = compile.general(code, config);
+
+      if (result) {
+        const handler = {
+          get(obj: any, prop: any) {
+            // 先从目标对象读取prop是否存在
+            let target = Reflect.has(obj, `${prop.toString()}__$`)
+              ? obj[`${prop.toString()}__$`]
+              : undefined;
+            // 如果不存在fallback到白名单版本的window
+            if (target === undefined) {
+              target = Reflect.has(obj.window__$, `${prop.toString()}`)
+                ? obj.window__$[`${prop.toString()}`]
+                : undefined;
+            }
+            return target;
+          },
+          set(obj: any, prop: any, value: any) {
+            return Reflect.set(obj, `${prop}__$`, value);
+          },
+          has(obj: any, prop: any) {
+            return (
+              obj &&
+              (Reflect.has(obj, `${prop.toString()}__$`) ||
+                Reflect.has(obj.window__$, `${prop.toString()}`))
+            );
+          },
+        };
+        const catchAllHandler = {
+          get(obj: any, prop: any) {
+            return Reflect.get(obj, prop);
+          },
+          set() {
+            return true;
+          },
+          has() {
+            return true;
+          },
+        };
+
+        const _console: any = {};
+
+        (function createMockConsole(_console) {
+          const allowConsoleProps = [
+            'debug',
+            'error',
+            'info',
+            'log',
+            'warn',
+            'dir',
+            'dirxml',
+            'table',
+            'trace',
+            'group',
+            'groupCollapsed',
+            'groupEnd',
+            'clear',
+            'count',
+            'countReset',
+            'assert',
+            'profile',
+            'profileEnd',
+            'time',
+            'timeLog',
+            'timeEnd',
+            'timeStamp',
+          ];
+
+          for (const property of allowConsoleProps) {
+            _console[property] = function () {
+              if (arguments.length > 1 && typeof arguments[0] === 'string') {
+                arguments[0] = arguments[0].replace(/%/g, '%%');
+              }
+              // @ts-ignore
+              return console[property](...arguments);
+            };
+          }
+        })(_console);
+
+        const allowList = {
+          __proto__: null,
+          console__$: _console,
+          alert__$() {
+            alert(`Sandboxed alert:${arguments[0]}`);
+          },
+          String__$: String,
+          Number__$: Number,
+          Array__$: Array,
+          Symbol__$: Symbol,
+          Math__$: Math,
+          RegExp__$: RegExp,
+          Object__$: Object,
+          eval__$(ecode: string) {
+            return Sandbox.run(`return ${ecode}`, {});
+          },
+          window__$: window as Window & {
+            appId?: string;
+            pageId?: string;
+            lcdpApi?: any;
+          }, // TODO 这里的window对象原则上需要限制，这是白名单的理由
+          parseInt__$: parseInt,
+          parseFloat__$: parseFloat,
+          // FIX: TypeError: Illegal invocation 原因是因为setTimeout、setInterval取到的函数this指向异常
+          setTimeout__$: window.setTimeout.bind(window),
+          setInterval__$: window.setInterval.bind(window),
+          clearTimeout__$: window.clearTimeout.bind(window),
+          clearInterval__$: window.clearInterval.bind(window),
+        };
+        if (allowList.window__$) {
+          allowList.window__$.appId = extendAllowMap.appId;
+          allowList.window__$.pageId = extendAllowMap.pageId;
+          // allowList.window__$._ = extendAllowMap.lodash;
+          (allowList.window__$ as any).lcdpApi =
+            extendAllowMap.lcdpApi || (window as any).lcdpApi;
+        }
+
+        if (extendAllowMap && typeof extendAllowMap === 'object') {
+          Object.keys(extendAllowMap).forEach((k) => {
+            const dkey: keyof typeof allowList = `${k}__$` as any;
+            if (!allowList[dkey]) {
+              // @ts-ignore
+              allowList[dkey] = extendAllowMap[k];
+            }
+          });
+        }
+        const proxy = new Proxy(allowList, handler);
+        const catchAllProxy = new Proxy(
+          {
+            __proto__: null,
+            proxy,
+            globalThis: new Proxy(allowList, handler),
+            window: new Proxy(allowList, handler),
+          },
+          catchAllHandler,
+        );
+
+        const output = Function(
+          'proxy',
+          'catchAllProxy',
+          `
+                    with(catchAllProxy) {
+                        with(proxy) {
+                            return (function(){
+                                "use strict";
+                                return ${filterCode}
+                            })();
+                        }
+                    }
+                `,
+        )(proxy, catchAllProxy);
+        return output;
+      } else {
+        throw err;
+      }
+    } catch (e) {
+      throw e;
+    }
+  };
+  return { run };
+})();
+
+// IE兼容版Sandbox，这个版本的Sandbox基本移除了原本的proxy能力
+// IE兼容版Sandbox在表达式里出现未定义的变量时无法直接转换为undefined，只能正常抛出报错。
+const IESandbox = (function () {
+  const run = (
+    code: string,
+    extendAllowMap: any,
+    config?: { check: boolean },
+  ) => /*  @__HOT_UPDATE__ @alias Sandbox.run */ {
+    if (!code || typeof code !== 'string') {
+      // 如果输入的字符串是空字符串，或者非法值，直接原样输出
+      return code;
+    }
+
+    try {
+      const filterCode = compile.ie(code, config);
+      if (true) {
+        const handler = {
+          get(obj: any, prop: any) {
+            // 先从目标对象读取prop是否存在
+            let target = Reflect.has(obj, prop.toString())
+              ? obj[prop.toString()]
+              : undefined;
+            // 如果不存在fallback到白名单版本的window
+            if (target === undefined) {
+              target = Reflect.has(obj.window, `${prop.toString()}`)
+                ? obj.window[`${prop.toString()}`]
+                : undefined;
+            }
+            return target;
+          },
+          set(obj: any, prop: any, value: any) {
+            return Reflect.set(obj, prop, value);
+          },
+        };
+
+        const _console = {};
+
+        (function createMockConsole(_console) {
+          const allowConsoleProps = [
+            'debug',
+            'error',
+            'info',
+            'log',
+            'warn',
+            'dir',
+            'dirxml',
+            'table',
+            'trace',
+            'group',
+            'groupCollapsed',
+            'groupEnd',
+            'clear',
+            'count',
+            'countReset',
+            'assert',
+            'profile',
+            'profileEnd',
+            'time',
+            'timeLog',
+            'timeEnd',
+            'timeStamp',
+          ];
+
+          for (const property of allowConsoleProps) {
+            // @ts-ignore
+            _console[property] = function () {
+              if (arguments.length > 1 && typeof arguments[0] === 'string') {
+                arguments[0] = arguments[0].replace(/%/g, '%%');
+              }
+              // @ts-ignore
+              return console[property](...arguments);
+            };
+          }
+        })(_console);
+
+        const allowList = {
+          console: _console,
+          alert() {
+            alert(`Sandboxed alert:${arguments[0]}`);
+          },
+          String: String,
+          Number: Number,
+          Array: Array,
+          Symbol: Symbol,
+          Math: Math,
+          RegExp: RegExp,
+          Object: Object,
+          eval(ecode: string) {
+            return Sandbox.run(`return ${ecode}`, {});
+          },
+          window: window as Window & {
+            appId?: string;
+            pageId?: string;
+            lcdpApi?: any;
+          }, // TODO 这里的window对象原则上需要限制，这是白名单的理由
+          parseInt: parseInt,
+          parseFloat: parseFloat,
+          setTimeout,
+          setInterval,
+        };
+
+        if (allowList.window) {
+          allowList.window.appId = extendAllowMap.appId;
+          allowList.window.pageId = extendAllowMap.pageId;
+          // allowList.window._ = extendAllowMap.lodash;
+          (allowList.window as any).lcdpApi =
+            extendAllowMap.lcdpApi || (window as any).lcdpApi;
+        }
+
+        if (extendAllowMap && typeof extendAllowMap === 'object') {
+          Object.keys(extendAllowMap).forEach((k) => {
+            const dkey: keyof typeof allowList = k as any;
+            if (!allowList[dkey]) {
+              allowList[dkey] = extendAllowMap[k];
+            }
+          });
+        }
+        const proxy = new ES6Proxy(allowList, handler);
+        // 注意：解析数据，防止return的第一个字符是分号或者\n 导致返回数据为空
+        const output = Function(
+          'proxy',
+          `
+            with(proxy) {
+                return (${filterCode});
+            }
+        `,
+        )(proxy);
+        return output;
+      }
+    } catch (e) {
+      throw e;
+    }
+  };
+  return { run };
+})();
+
+/* @__HOT_UPDATE__ */
+const Sandbox = (function () {
+  if (isNativeFn(window?.Proxy)) {
+    return ESSandbox;
+  } else {
+    return IESandbox;
+  }
+})();
+
+export { Sandbox };