今天就跟大家聊聊有关vue3的沙箱机制是什么，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
浏览器编译版本，浏览器版本是使用with语法加上proxy代理拦截
本地预编译版本，通过在模版预编译阶段转换阶段，使用转换插件transformExpression将非白名单标识符挂在在组件代理对象下
render 函数编译结果
计算
安全
数据库
网络和加速
企业服务
<div>{{test}}</div>
<div>{{Math.floor(1)}}</div>to
const _Vue = Vue;
return function render(_ctx, _cache, $props, $setup, $data, $options) {
with (_ctx) {
const {
toDisplayString: _toDisplayString,
createVNode: _createVNode,
Fragment: _Fragment,
openBlock: _openBlock,
createBlock: _createBlock,
} = _Vue;
return (
_openBlock(),
_createBlock(
_Fragment,
null,
[
_createVNode("div", null, _toDisplayString(test), 1 /* TEXT */),
_createVNode(
"div",
null,
_toDisplayString(Math.floor(1)),
1 /* TEXT */
),
],
64 /* STABLE_FRAGMENT */
)
);
}
};从上面的代码，我们能发现，变量标识符没有增加前缀，只是用with语法包裹了一下，延长作用域链，那么是如何做到 js 沙箱拦截的呢？例如变量test，理论上说，当前作用域链没有test变量，变量会从上一层作用域查找，直到查找到全局作用域，但是，实际上只会在_ctx上查找，原理很简单，_ctx是一个代理对象，那么我们如何使用Proxy做拦截，示例代码如下：
const GLOBALS_WHITE_LISTED =
"Infinity,undefined,NaN,isFinite,isNaN,parseFloat,parseInt,decodeURI," +
"decodeURIComponent,encodeURI,encodeURIComponent,Math,Number,Date,Array," +
"Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt";
const isGloballyWhitelisted = (key) => {
return GLOBALS_WHITE_LISTED.split(",").includes(key);
};
const hasOwn = (obj, key) => {
return Object.prototype.hasOwnProperty.call(obj, key);
};
const origin = {};
const _ctx = new Proxy(origin, {
get(target, key, reciever) {
if (hasOwn(target, key)) {
Reflect.get(target, key, reciever);
} else {
console.warn(
`Property ${JSON.stringify(key)} was accessed during render ` +
`but is not defined on instance.`
);
}
},
has(target, key) {
// 如果是 全局对象 返回false，不触发get 拦截，从上一层作用域查找变量
// 如果不是 全局对象 返回true，触发get 拦截
return !isGloballyWhitelisted(key);
},
});代码很简单，为什么这么简单的代码就能做到拦截？
因为 with 语句会触发 has 拦截，当 has 返回 true，就会 触发代理对象 get 拦截，如果返回 false， 则代理对象 get 拦截不会触发，变量不在当前代理对象查找，直接查找更上一层作用域
<div>{{test}}</div>
<div>{{Math.floor(1)}}</div>to
import {
toDisplayString as _toDisplayString,
createVNode as _createVNode,
Fragment as _Fragment,
openBlock as _openBlock,
createBlock as _createBlock,
} from "vue";
export function render(_ctx, _cache, $props, $setup, $data, $options) {
return (
_openBlock(),
_createBlock(
_Fragment,
null,
[
_createVNode("div", null, _toDisplayString(_ctx.a), 1 /* TEXT */),
_createVNode(
"div",
null,
_toDisplayString(Math.floor(1)),
1 /* TEXT */
),
],
64 /* STABLE_FRAGMENT */
)
);
}从上面的代码我们可以发现，非白名单标识符都添加了_ctx 变量前缀，那么是如何做到的呢？当本地编译 template 时，处于转换阶段时会对 变量表达式节点NodeTypes.SIMPLE_EXPRESSION进行添加前缀处理，示例代码如下：
const GLOBALS_WHITE_LISTED =
"Infinity,undefined,NaN,isFinite,isNaN,parseFloat,parseInt,decodeURI," +
"decodeURIComponent,encodeURI,encodeURIComponent,Math,Number,Date,Array," +
"Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt";
const isGloballyWhitelisted = (key) => {
return GLOBALS_WHITE_LISTED.split(",").includes(key);
};
const isLiteralWhitelisted = (key)=>{
return 'true,false,null,this'.split(',').includes(key)
}
export function processExpression(
node
) {
const rewriteIdentifier = (raw) => {
return `_ctx.${raw}`
}
const rawExp = node.content
if (isSimpleIdentifier(rawExp)) {
const isAllowedGlobal = isGloballyWhitelisted(rawExp)
const isLiteral = isLiteralWhitelisted(rawExp)
if (!isAllowedGlobal && !isLiteral) {
node.content = rewriteIdentifier(rawExp)
}
return node
}当然上面的代码只是简化版本，原版插件还做了精确到了__props $setup，减短变量查询路径，提高性能，还有通过babel编译复杂表达式比如：箭头函数。
看完上述内容，你们对vue3的沙箱机制是什么有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注亿速云行业资讯频道，感谢大家的支持。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
