脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue3 沙箱机制

详解vue3的沙箱机制

 更新时间：2021年04月15日 10:19:32   作者：不知道写啥笔名  
这篇文章主要介绍了vue3的沙箱机制的相关资料，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下

前言

vue3 沙箱主要分两种

  1. 浏览器编译版本，浏览器版本是使用with语法加上proxy代理拦截
  2. 本地预编译版本，通过在模版预编译阶段转换阶段，使用转换插件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 语句变量查询

以上就是详解vue3的沙箱机制的详细内容，更多关于vue3 沙箱机制的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • vue.js中修饰符.stop的用法解析

    vue.js中修饰符.stop的用法解析

    这篇文章主要介绍了vue.js中修饰符.stop的用法解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-03-03
  • Vue中的无限加载vue-infinite-loading的方法

    Vue中的无限加载vue-infinite-loading的方法

    本篇文章主要介绍了Vue中的无限加载vue-infinite-loading的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • vue中实现滚动加载更多的示例

    vue中实现滚动加载更多的示例

    下面小编就为大家带来一篇vue中实现滚动加载更多的示例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • Vue.js暴露方法给WebView的使用操作

    Vue.js暴露方法给WebView的使用操作

    这篇文章主要介绍了Vue.js暴露方法给WebView的使用操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • 详解vue.js下引入百度地图jsApi的两种方法

    详解vue.js下引入百度地图jsApi的两种方法

    这篇文章主要介绍了详解vue.js下引入百度地图jsApi的两种方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • Vue3中的常见组件通信之mitt使用详解

    Vue3中的常见组件通信之mitt使用详解

    这篇文章主要介绍了Vue3中的常见组件通信之mitt使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-04-04
  • 解决前端调用后端接口返回200但数据返回的是html标签

    解决前端调用后端接口返回200但数据返回的是html标签

    这篇文章主要给大家介绍了关于如何解决前端调用后端接口返回200但数据返回的是html标签的相关资料,文中通过图文将解决的过程介绍的非常详细,对同样遇到这个问题的朋友具有一定的参考解决价值,需要的朋友可以参考下
    2024-05-05
  • vue中的双向数据绑定原理与常见操作技巧详解

    vue中的双向数据绑定原理与常见操作技巧详解

    这篇文章主要介绍了vue中的双向数据绑定原理与常见操作技巧,结合实例形式详细分析了vue中双向数据绑定的概念、原理、常见操作技巧与相关注意事项,需要的朋友可以参考下
    2020-03-03
  • vue实现右键弹出菜单

    vue实现右键弹出菜单

    这篇文章主要为大家详细介绍了vue实现右键弹出菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • elementui实现表格自定义排序的示例代码

    elementui实现表格自定义排序的示例代码

    本文主要介绍了elementui实现表格自定义排序的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07

最新评论