详解vue3 沙箱机制
前言
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 js 沙箱机制就解释结束了,当初浏览器编译版本困扰了我很久,因为不知道 has 可以拦截 with 语句变量查询
参考
Proxy handler.has
说说 JS 中的沙箱
动手写 js 沙箱
到此这篇关于详解vue3 沙箱机制的文章就介绍到这了,更多相关vue3 沙箱机制内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- 这篇文章主要介绍了浅谈vue2的$refs在vue3组合式API中的替代方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
- 今天将从 Vue 的入口文件开始,看看声明了一个 Vue 的单文件之后是如何被 compile-core 编译核心模块编译成渲染函数的。下面小编讲解并附上代码分析展现在文章里,感兴趣的小伙伴不要错过奥...2021-09-25
- 这篇文章主要介绍了Vue3中的三种函数,分别对reactive函数toRef函数以及ref函数原理及使用作了简单介绍,有需要的朋友可以借鉴参考下...2021-09-24
- 这篇文章主要介绍了vue3弹出层V3Popup实例详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-04
- 源码的重要性相信不用再多说什么了吧,特别是用Vue 框架的,一般在面试的时候面试官多多少少都会考察源码层面的内容,下面这篇文章主要给大家介绍了关于vue3源码剖析之简单实现的相关资料,需要的朋友可以参考下...2021-09-07
- 这篇文章主要给大家分享的是Vue3的几个优势,Vue3仍然在源码、性能和语法 API 三个大的方面进行了优化,下面我们一起进入文章看看具体详情吧...2021-10-26
- 这篇文章主要介绍利用Vue3 创建Vue CLI 项目,下面文章内容附有官方文档链接,安装过程,需要的可以参考一下...2021-10-18
- 这篇文章主要介绍了利用vue3+ts实现管理后台(增删改查),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-10-30
- 这篇文章主要给大家介绍了关于vue3封装放大镜组件的相关资料,封装之后,使用起来就更简单了,一个组件一行就可以,文中通过示例代码介绍的非常详细,需要的朋友可以参考下...2021-09-20
- 这篇文章主要介绍了使用Vue3进行数据绑定及显示列表数据,整篇文章围绕Vue3进行数据绑定及显示列表数据的想换自来哦展开内容,需要的小伙伴可以参考一下...2021-10-23
- 这篇文章主要介绍了详解vue3 沙箱机制,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-15
- 这篇文章主要介绍了Vue3 响应式侦听与计算的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-11
- 这篇文章主要介绍了40行代码把Vue3的响应式集成进React做状态管理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-05-20
- 最近在使用Vue.js时候没有自动提示,就很难受,下面这篇文章主要给大家介绍了关于Vue3没有代码提示问题的解决办法,文中通过图文介绍的非常详细,需要的朋友可以参考下...2023-01-17
- 在vue3中对响应式数据的声明官方给出了ref()和reactive()这两种方式,这篇文章主要给大家介绍了关于Vue3.0中Ref与Reactive区别的相关资料,需要的朋友可以参考下...2021-07-07
- 这篇文章我们从 ast 生成时调用的 baseParse 函数分析,再到 baseParse 返回 createRoot 的调用结果,一直到细化的讲解了 parseChildren 解析子节点函数中的其中某一个具体解析器的执行过程。最后通过一个简单模板举例,需要的朋友可以参考下...2021-09-25
- 当我们不想每次跳转路由都会重新加载页面时(重新加载页面很耗时),就可以考虑使用keep-alive缓存页面了,这篇文章主要给大家介绍了关于vue3缓存页面keep-alive及路由统一处理的相关资料,需要的朋友可以参考下...2021-10-17
- 本文主要介绍了手摸手教你实现Vue3 Reactivity,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-08-25
- 这篇文章主要给大家介绍了关于vue3如何优雅的实现移动端登录注册模块的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 本文主要介绍了Vue3中key的作用和工作原理,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-08-08