Comments (5)
目前确实没有好的办法...
<script>
let handler = {
has(target, key) {
if (key in target) {
return target[key]
} else {
throw `无法访问属性或方法 ${key}, 详情请参考:https://www.google.com`
// throw new Error(`无法访问属性或方法 ${key}, 详情请参考:https://www.google.com`)
return undefined
}
}
}
let target = {
console: window.console,
Math: window.Math,
Date: window.Date,
name: "i am module"
}
let proxy = new Proxy(target, handler)
let moduleCode = `
console.log('this1:',this); // 非严格模式下,this指向proxy
function foo(){
console.log(name);
// this === window 非严格模式下,此写法会造成沙箱逃逸
console.log("this2:", this); // 非严格模式下,this是AO,ECMAScript规范规定AO作为this值返回时通常为null,this不能为null,重置为全局对象。
// console.log(this.document);
function bar(){
var b = 10;
console.log("b: ",b);
console.log(Math.random());
console.log(new Date());
console.log(document.getElementById('p'));
console.log(window);
}
bar();
}
foo()
`
let fun = new Function(`
with(this){
(function(){
"use strict";
${moduleCode}
})()
}
`)
fun.call(proxy)
</script>
此问题已解决,在严格模式下执行用户模块代码即可。
from front-end-articles.
学习了 🐂
from front-end-articles.
越看越觉得微前端的各种实现很 hack,项目复杂度一旦上来就会有各种问题。
from front-end-articles.
通过Proxy+Function+with这种形式建立的安全沙箱,如果code中的函数内通过this仍然可以访问到window,请问有什么好的办法解决这种写法造成的沙箱逃逸吗?
如下示例代码:
<script>
let handler = {
has(target, key) {
if (key in target) {
return target[key]
} else {
throw `无法访问属性或方法 ${key}, 详情请参考:https://www.google.com`
return undefined
}
}
}
let target = {
console: window.console,
Math: window.Math,
Date: window.Date,
name: "i am module"
}
let proxy = new Proxy(target, handler)
let moduleCode = `
function foo(){
console.log(name);
// this===window 此写法会造成沙箱逃逸
console.log("this:", this);
console.log(this.document);
}
foo()
`
let fun = new Function("window", `
"use stric";
with(window){
${moduleCode}
}
`)
fun.call(proxy, proxy)
</script>
from front-end-articles.
目前确实没有好的办法...
from front-end-articles.
Related Issues (20)
- 套件问题 HOT 2
- 如何适配呢? HOT 1
- 页面上不是经常容易出现顶部的swiper组件嘛 HOT 1
- 2021 年终总结:奔向北京,迎接 996! HOT 20
- 点击画布中的组件没有选中的8个点 HOT 1
- 可视化拖拽组件库一些技术要点原理分析(四) HOT 16
- markdown 编辑器实现双屏同步滚动 HOT 1
- 组合功能只有在画布上操作才可以实现,在其他组件上操作会拖动组件,可以在其他逐渐锁定的情况下进行拖拽组合吗 HOT 1
- 有个疑惑点,画布上拖拽的数据是根据componentData变化的还是curComponent,没发现两者的关联之处,求指导
- qwq HOT 1
- 协同文档 HOT 1
- > > > > 你好,关于发布的部分可以详细说明下吗? HOT 2
- 【开源自荐】每日更新的前端面试题库
- Vue 加载远程组件的解决方案 HOT 2
- 一个 git 仓库下拥有多个项目的 git hooks 配置方案
- 从零开始实现一个玩具版浏览器渲染引擎
- 低代码与大语言模型的探索实践 HOT 3
- 如何为 Nestjs 编写单元测试和 E2E 测试
- 前端性能优化:从系统分析到实践策略
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from front-end-articles.