手写微前端micro-app(3)-沙箱前置知识

ops/2025/3/21 0:29:38/

沙箱,即sandbox,就是让程序跑在一个隔离的环境下,使用的都是自己独立的属性和方法,并且最重要的,不对外界的其他程序造成影响

1、eval,Function和(0,eval)

eval("console.log('hello world')")
//参数1:参数(可选)
//参数2:函数体,也就是具体要执行什么
Function('msg','console.log(msg)')('hello world');
//如果没有参数的话,可以直接运行
Function('console.log("hello world")')();

区别就是eval是直接执行,而Function其实是通过函数去执行。这是表面上的区别,如果有作用域的话,可以更清楚的看到两者的区别

const aaa = 10;
function fn(){const aaa = 0;eval('console.log("aaa:", aaa)'); // aaa:0Function('str', 'console.log(str, aaa)')('aaa:'); // aaa:10
}
fn()

eval 则是在当前作用域直接执行代码,代码可以直接访问当前作用域。而 Function 创建的函数只会在全局作用域中运行(除主动修改作用域:bindcall 等)

可以修改eval执行的作用域,使用(0,eval)()的这种方式,就可以让eval在全局作用域中运行

  const aaa = 10;function fn(){const aaa = 0;eval('console.log("aaa:", aaa)'); // aaa:0(0,eval)('console.log("aaa:", aaa)'); // aaa:10Function('str', 'console.log(str, aaa)')('aaa:') // aaa:10}fn()

2、with

with是JavaScript中的一个关键字,扩展一个语句的作用域链。with会在作用域链的顶端添加一个新的作用域,改作用域的变量会加入with传入的对象,因此在查找变量时会优先在该对象上进行查找。

with (console) {log("hello"); // hello
}
let obj = {a: 1,b: 2,c: 3,
};
with(obj){console.log(a)    //1console.log(b)    //2console.log(c)    //3
}

由于 with 定义的上下文会优先查找,具体做法是:

const obj = {a: 1,b: 2,c: 3,
};
const sandboxCode = `with(scope){console.log(a)}`
//Function的做法
new Function('scope', sandboxCode)(obj);
//eval的做法
(0,eval)(`(function(scope){${sandboxCode}}).call(obj,obj)`);

这里要解释一下上面的这个写法

(0,eval)(`(function(scope){${sandboxCode}}).call(obj,obj)`);

因为直接写eval,里面的this执行始终都是window,因此,将他封装在一个立即执行的函数中,确保this对象是外面传递的obj对象,可以参考下面的这个写法:

const obj = {a:2
}
var a = 1;//上面两个虽然也是用到了with,只不过是因为在函数中运行,获取的obj对象不一样,所以打印不一样
//不过this始终指向的是window
new Function('obj','with(obj){console.log(a);console.log(this)}')(obj);// 2
new Function('obj','with(obj){console.log(a);console.log(this)}')(window);// 1
//由于本身在全局运行eval和(0,eval)没什么区别
//eval优先with(obj)域查找a
eval('with(obj){console.log(a);console.log(this)}');// 2 window
//通过立即执行的函数,绑定this对象,
//call(obj,obj);第一个参数表示this的绑定对象,第二个参数表示函数需要传递的参数
eval('(function(obj){with(obj){console.log(a);console.log(this)}}).call(obj,obj)')// 2 obj{a:2}

但是with有一个比较致命的问题,在提供的上下文对象中没有找到某个变量时,代码仍会沿着作用域链向上查找

let globalVal = 100;
const obj = {a: 1,b: 2,c: 3,
};const sandboxCode = `with(scope){a = 10;globalVal = 1}`;
//Function的做法
new Function('scope', sandboxCode)(obj);
//eval的做法
(0,eval)(`(function(scope){${sandboxCode}}).call(obj,obj)`);
console.log(obj); // {a: 10, b: 2, c: 3}
console.log(globalVal); // 1

我们希望只在obj对象中查找,不要向上查找,但是obj对象只是一个普通对象。因此我们可以使用Proxy代理进行处理

let globalVal = 100;
const obj = {a: 1,b: 2,c: 3,
};let sandboxProxy = new Proxy(obj,{get(target, key) {return target[key]},has(target, key) {return true}
})const sandboxCode = `with(scope){a = 10;globalVal = 1}`;
// new Function('scope', sandboxCode)(sandboxProxy);
(0,eval)(`(function(scope){${sandboxCode}}).call(sandboxProxy,sandboxProxy)`);
console.log(obj); // {a: 10, b: 2, c: 3, globalVal: 1}
console.log(globalVal); // 100

在生成Proxy实例对象时,我们设置两个handle,一个get,一个has,当with中访问某个变量时,会首先触发has方法,我们都返回true,告诉系统这个属性我有,不要再去外层作用域查找了;然后进入get方法,返回代理的对象中的这个属性,如果没有返回undefined,当然我们这是是赋值,globalVal这个属性没有在obj中发现,就会直接将属性赋值给obj,这样在with中,就无法操纵外层作用域中的变量了,只能操作代理的target中给定的有限的变量。
注意,现在在const sandboxCode = with(scope){a = 10;globalVal = 1};这句代码里面就不能使用打印语句了

const sandboxCode = `with(scope){a = 10;globalVal = 1;console.log(a)}`
如果你使用console.log会报出下面的错误:
Uncaught TypeError: Cannot read properties of undefined (reading 'log')

因为我们已经使用Proxy拦截了所有,因此console对象在obj中也是找不到的,当然,你可以在obj中加上console属性

const obj = {a: 1,b: 2,c: 3,console:window.console
};

我们也可以将Proxy的get方法做一下判断,如果是console,alert等需要从window上进行获取

下面的代码我直接使用Reflect对象,Reflect提供的方法与Proxy对象的拦截器方法相对应。Reflect方法返回值与Proxy对象的拦截器方法返回值是相同的。这些方法包括Reflect.get()Reflect.set()Reflect.has()Reflect.deleteProperty()等等

let globalVal = 100;
const obj = {a: 1,b: 2,c: 3,// console:window.console
};let sandboxProxy = new Proxy(obj,{get(target, key) {// 优先从代理对象上取值if (Reflect.has(target, key)) {return Reflect.get(target, key)}// 否则兜底到window对象上取值const rawValue = Reflect.get(window, key)// 如果兜底的值为函数,则需要绑定window对象,如addEventListenerif (typeof rawValue === 'function') {const valueStr = rawValue.toString()// 如果 valueStr 不是以大写字母开头的函数名或以 class 开头的字符串,则执行其中的代码块// 简单来说就是排除构造函数和类if (!/^function\s+[A-Z]/.test(valueStr) && !/^class\s+/.test(valueStr)) {return rawValue.bind(window)}}// 其它情况直接返回return rawValue},has(target, key) {return true}
})console.log(sandboxProxy);const sandboxCode = `with(scope){a = 10;globalVal = 1;console.log(a)}`;
// new Function('scope', sandboxCode)(sandboxProxy);
(0,eval)(`(function(scope){${sandboxCode}}).call(sandboxProxy,sandboxProxy)`);
console.log(obj);
console.log(globalVal);

这里let sandboxProxy = new Proxy(obj,{......})代理的是普通对象obj,如果直接把代理对象换成window,那么其实,我们就直接代理了一个window对象

let sandboxProxy = new Proxy(window,{......})
console.log(sandboxProxy);
console.log(window);
let sandboxProxy = new Proxy({},{get(target,key){//优先从代理对象上取值if(Reflect.has(target,key)){return Reflect.get(target,key);}//如果找不到,就直接从window对象上取值const rawValue = Reflect.get(window,key);//如果兜底的是一个函数,需要绑定window对象,比如window.addEventListenerif(typeof rawValue === 'function'){const valueStr = rawValue.toString(); //转换为字符串//如果valueStr<<不是>>以大写字母开头的函数名或者以class开头的字符串,需要执行其中的代码块//简单来说,就是排除构造函数和类if(!/^function\s+[A-Z]/.test(valueStr) && !/^class\s+/.test(valueStr)){return rawValue.bind(window); //绑定window对象}}//其他情况直接返回return rawValue},set:(target,key,value)=>{Reflect.set(target,key,value);return true;}});window.globalStr = "hello 基座应用"const sandboxCode = `with(window){window.globalStr = "hello 子应用";console.log(window);console.log(this)}`;(0,eval)(`(function(window){${sandboxCode}}).call(sandboxProxy,sandboxProxy)`);console.log(window.globalStr);

http://www.ppmy.cn/ops/40159.html

相关文章

ESP32-C3工程搭建及编译运行

环境搭建&#xff1a; 官方指导文档&#xff1a; https://docs.espressif.com/projects/esp-idf/zh_CN/v5.1/esp32c3/get-started/index.html 我手动安装的WIN环境 安装完成后会有 ESP IDF的命令行&#xff1b;需要在此命令行执行命令 进入工程目录 执行 idf.py set-target …

【C++风云录】跨界融合:纺织工程与材料科学

工具库揭秘&#xff1a;洞察TexGen、MatLib、CGAL、Eigen、Boost Geometry和VTK的内核 前言 在这个技术日新月异的时代&#xff0c;各种工具库正如春笋般迅速崭露头角。本文将深入探讨六个重要的工具库&#xff1a;TexGen&#xff0c;MatLib&#xff0c;CGAL&#xff0c;Eige…

js手动实现unshift

js 手动实现数组的unshift unshift是什么&#xff1f; unshift() 方法可向数组的开头添加一个或更多元素&#xff0c;并返回新的长度。 注意&#xff1a; 该方法将改变数组的数目。 语法&#xff1a; array.unshift(item1,item2, ..., itemX)代码实现 首先&#xff0c;在…

关于Git的commit message规范

前几天在提交代码的时候突然发现自己的commit message写的有点问题&#xff0c;然后到网上查了下发现Git的commit message也是有规范的&#xff0c;下面我总结了三条我认为最重要的。 1.commit message需要简洁明了&#xff0c;突出变更的目的 2.提交信息的前缀用来表示你的这…

【Android】Kotlin学习之数据容器 -- 集合

一. 定义 List : 是一个有序列表, 可通过下标访问元素. 元素可以在list中出现多次, 元素可重复 Set : 是元素唯一的集合, 一般来说Set中元素的顺序并不重要, 无序集合. Map : 是一组键值对, 键是唯一的, 每个键刚好映射到一个值, 值可以重复 二. 集合创建 三. 示例 mutabl…

开源模型应用落地-模型记忆增强-概念篇(一)

一、前言 语言模型的记忆是基于其训练数据。具体而言,对于较长的文本,模型可能会遗忘较早的信息,因为它的记忆是有限的,并且更容易受到最近出现的内容的影响。模型无法跨越其固定的上下文窗口,而是根据当前上下文生成回应。 提升模型记忆能力有多种方法,比如改进模型的结…

JavaScript APIs

控制网页元素交互等各种网页交互效果。 一、Web API基本认知 声明数组和变量优先使用const 使用let声明变量的情况&#xff1a; 1、如果基本数据类型的值或者引用类型的地址发生变化的时候&#xff0c;需要用let 2、比如 一个变量进行加减运算&#xff0c;比如 for循环中的…

springAI框架学习总结

springAI 1.springAI基本介绍 springAI是一个AI工程应用框架&#xff0c;其目标是将 Spring 生态系统设计原则&#xff08;例如可移植性和模块化设计&#xff09;应用于 AI 领域&#xff0c;并推广使用 POJO 作为 AI 领域应用程序的构建块。 2.特性 灵活的AIP支持chat,text…