如果產(chǎn)品經(jīng)理要求系統(tǒng)中某個(gè)頁面的輸入框做防止篡改處理，你會怎么做呢？

需求梳理

• 首先，什么是防篡改？

簡單來說，就是用戶輸入input框值，我們傳給后端的值就是用戶輸入的

• 正常情況下用戶輸入input框值，就是我們傳遞給后端的值，但是部分瀏覽器插件或者惡意腳本會更改用戶輸入的值
• 常見針對的是輸入的錢包地址，我們需要防范被瀏覽器插件和惡意腳本更改
• 因?yàn)閷?shí)現(xiàn)的效果需要對已有的業(yè)務(wù)無任何侵入性，保證原有業(yè)務(wù)的正常運(yùn)行
• 這里的需求背景在nuxt2技術(shù)棧

最終效果

• 業(yè)務(wù)方只需要加上這個(gè)指令就可以

圖片

實(shí)現(xiàn)思路

• 我們?nèi)绾伪ＷC對原有的代碼沒有侵入性，保證不影響原有的功能？對此我們想到一個(gè)自定義指令，在指令里面操作。但是一般指令都是直接寫在組件里面的，并不是寫在真實(shí)的 input 標(biāo)簽上，對此，我們要變更我們的指令，讓其去找到真正的 input 標(biāo)簽。

// 通常情況下， 這是一個(gè)Input組件，我們需要給這個(gè)指令找到其真正的 input 標(biāo)簽
<Input v-xxx/>

• 這里的代碼實(shí)現(xiàn)的是如何找到真實(shí)的 input 標(biāo)簽。

圖片

• 如何在指令里面發(fā)送請求給后端？對此，我們在指令里面使用自定義事件，讓真實(shí)的 input 標(biāo)簽綁定上自定義事件
• 里面涉及2個(gè)知識點(diǎn)

1. 如何給綁定過的 input標(biāo)簽解綁事件？
2. 如何在指令里面調(diào)用請求的方法

• 問題1答案，我們在指令的節(jié)點(diǎn)node， 在 vnode綁定上一個(gè)自定義函數(shù)，此自定義函數(shù)在解綁事件的時(shí)候在調(diào)用
• 問題2答案，我們在vnode.context調(diào)用自定義方法tamperFn(); 這里的vnode.context 就是 this，相當(dāng)于我們調(diào)用了 this.tamperFn(); 此處的this就是 Vue實(shí)例 (在下面的代碼事例中有個(gè)屬性 isTrusted 至關(guān)重要)

圖片

圖片

• 至此，我們已經(jīng)實(shí)現(xiàn)如何不侵入業(yè)務(wù)的情況下找到 input 標(biāo)簽 & 如何在找到的 input 標(biāo)簽綁定事件并且發(fā)送請求出去 & 解綁事件 (有個(gè)核心問題，到目前為止沒有看到如何區(qū)分提交的表單數(shù)據(jù)是用戶寫的還是被瀏覽器插件惡意改的，且繼續(xù)往下看)
• js 的 event 有個(gè)屬性 isTrusted

• 點(diǎn)擊鏈接了解 isTrusted[1]

圖片

• 首先要對所有的 input 標(biāo)簽使用Object.getOwnPropertyDescriptor 進(jìn)行劫持，找到 input 標(biāo)簽的 set 屬性，此時(shí)，當(dāng)變更 input 的輸入值我們都可以監(jiān)控到變化，當(dāng)有js變更input輸入框的值都會觸發(fā) set 方法。

圖片

• 上述的功能代碼是一個(gè)完整的 config.js, 啟動項(xiàng)目的時(shí)候直接在 nuxt.config.js 加載這個(gè) config.js 即可，業(yè)務(wù)團(tuán)隊(duì)使用一個(gè)指令即可完成需求。

總結(jié)

我們來梳理下流程:

1. 首先使用Object.getOwnPropertyDescriptor 進(jìn)行劫持所有的 input 標(biāo)簽， 在里面會觸發(fā)自定義事件dispatchTamper
2. 自定義事件綁定在真實(shí)的 input 標(biāo)簽上，在瀏覽器執(zhí)行js階段完成了綁定事件。通過 vnode.context 我們可以調(diào)用 Vue.prototype.tamperFn 方法。在 tamperFn 里面拿到 isTrusted 來區(qū)分是不是被篡改的值。
3. 我們在綁定 input 標(biāo)簽的事情同時(shí)，設(shè)置了 node.cusFn = cusFn， 用來解綁事件。

Reference

[1]https://developer.mozilla.org/zh-CN/docs/Web/API/Event/isTrusted: https://link.juejin.cn?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FAPI%2FEvent%2FisTrusted