詳解vue3沙箱機制

更新時間：2021年04月15日 11:53:53 作者：不知道寫啥筆名

這篇文章主要介紹了詳解vue3 沙箱機制，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

前言

vue3 沙箱主要分兩種

瀏覽器編譯版本，瀏覽器版本是使用with語法加上proxy代理攔截
本地預編譯版本，通過在模版預編譯階段轉換階段，使用轉換插件transformExpression將非白名單標識符掛在在組件代理對象下

瀏覽器編譯版本

render 函數編譯結果

<div>{{test}}</div>
<div>{{Math.floor(1)}}</div>

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 */
      )
    );
  }
};

從上面的代碼，我們能發(fā)現，變量標識符沒有增加前綴，只是用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，不觸發(fā)get 攔截，從上一層作用域查找變量
    // 如果不是 全局對象 返回true，觸發(fā)get 攔截
    return !isGloballyWhitelisted(key);
  },
});

代碼很簡單，為什么這么簡單的代碼就能做到攔截？
因為 with 語句會觸發(fā) has 攔截，當 has 返回 true，就會觸發(fā)代理對象 get 攔截，如果返回 false，則代理對象 get 攔截不會觸發(fā)，變量不在當前代理對象查找，直接查找更上一層作用域

本地預編譯版本

<div>{{test}}</div>
<div>{{Math.floor(1)}}</div>

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 */
    )
  );
}

從上面的代碼我們可以發(fā)現，非白名單標識符都添加了_ctx 變量前綴，那么是如何做到的呢？當本地編譯 template 時，處于轉換階段時會對變量表達式節(jié)點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 沙箱機制內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

vue3
沙箱

vue+render+jsx實現可編輯動態(tài)多級表頭table的實例代碼
這篇文章主要介紹了vue+render+jsx實現可編輯動態(tài)多級表頭table的實例代碼，本文通過實例代碼給大家介紹的非常詳細，對大家的工作或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2020-04-04
VueX如何實現數據共享
這篇文章主要介紹了VueX如何實現數據共享問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-08-08
vue3.x對echarts的二次封裝之按需加載過程詳解
echarts是我們后臺系統中最常用的數據統計圖形展示,外界對它的二次封裝也不計層數,這篇文章主要介紹了vue3.x對echarts的二次封裝之按需加載,需要的朋友可以參考下
2023-09-09
vue綁定class與行間樣式style詳解
這篇文章主要介紹了vue綁定class與行間樣式style的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-08-08
Vue實現帶進度條的文件拖動上傳功能
這篇文章主要介紹了Vue實現帶進度條的文件拖動上傳功能,本文通過實例代碼給大家介紹的非常詳細，具有參考借鑒價值，需要的朋友可以參考下
2018-02-02
antd Form組件表單在vue3中的使用方式
這篇文章主要介紹了antd Form組件表單在vue3中的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04
Vue中CSS?scoped的原理詳細講解
在組件中增加的css加了scoped屬性之后,就在會在當前這個組件的節(jié)點上增加一個data-v-xxx屬性,下面這篇文章主要給大家介紹了關于Vue中CSS?scoped原理的相關資料,需要的朋友可以參考下
2023-01-01
詳解vue3.0 的 Composition API 的一種使用方法
這篇文章主要介紹了vue3.0 的 Composition API 的一種使用方法,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-10-10
Vue使用三方工具vueUse實現虛擬列表
其實采用vueUse中的useVirtualList方法同樣可以實現虛擬列表,這篇文章小編就來和大家詳細介紹一下如何使用vueUse實現簡單的虛擬列表效果吧
2024-04-04
Vue中的循環(huán)及修改差值表達式的方法
這篇文章主要介紹了Vue中的循環(huán)及修改差值表達式的方法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-08-08