如果產(chǎn)品經(jīng)理要求系統(tǒng)中某個頁面的輸入框做防止篡改處理,你會怎么做呢?psu28資訊網(wǎng)——每日最新資訊28at.com
需求梳理
簡單來說,就是用戶輸入input框值,我們傳給后端的值就是用戶輸入的psu28資訊網(wǎng)——每日最新資訊28at.com
- 正常情況下用戶輸入input框值,就是我們傳遞給后端的值,但是部分瀏覽器插件或者惡意腳本會更改用戶輸入的值
常見針對的是輸入的錢包地址,我們需要防范被瀏覽器插件和惡意腳本更改psu28資訊網(wǎng)——每日最新資訊28at.com
因為實現(xiàn)的效果需要對已有的業(yè)務(wù)無任何侵入性,保證原有業(yè)務(wù)的正常運行psu28資訊網(wǎng)——每日最新資訊28at.com
這里的需求背景在nuxt2技術(shù)棧psu28資訊網(wǎng)——每日最新資訊28at.com
最終效果
圖片psu28資訊網(wǎng)——每日最新資訊28at.com
實現(xiàn)思路
- 我們?nèi)绾伪WC對原有的代碼沒有侵入性,保證不影響原有的功能?對此我們想到一個自定義指令,在指令里面操作。但是一般指令都是直接寫在組件里面的,并不是寫在真實的 input 標(biāo)簽上,對此,我們要變更我們的指令,讓其去找到真正的 input 標(biāo)簽。
// 通常情況下, 這是一個Input組件,我們需要給這個指令找到其真正的 input 標(biāo)簽<Input v-xxx/>
- 這里的代碼實現(xiàn)的是如何找到真實的 input 標(biāo)簽。
圖片psu28資訊網(wǎng)——每日最新資訊28at.com
- 如何在指令里面發(fā)送請求給后端?對此,我們在指令里面使用自定義事件,讓真實的 input 標(biāo)簽綁定上自定義事件
- 里面涉及2個知識點
- 如何給綁定過的 input標(biāo)簽解綁事件?
- 如何在指令里面調(diào)用請求的方法
- 問題1答案,我們在指令的節(jié)點node, 在 vnode綁定上一個自定義函數(shù),此自定義函數(shù)在解綁事件的時候在調(diào)用
- 問題2答案,我們在vnode.context調(diào)用自定義方法tamperFn(); 這里的vnode.context 就是 this,相當(dāng)于我們調(diào)用了 this.tamperFn(); 此處的this就是 Vue實例 (在下面的代碼事例中有個屬性 isTrusted 至關(guān)重要)
圖片psu28資訊網(wǎng)——每日最新資訊28at.com
圖片psu28資訊網(wǎng)——每日最新資訊28at.com
- 至此,我們已經(jīng)實現(xiàn)如何不侵入業(yè)務(wù)的情況下找到 input 標(biāo)簽 & 如何在找到的 input 標(biāo)簽綁定事件并且發(fā)送請求出去 & 解綁事件 (有個核心問題,到目前為止沒有看到如何區(qū)分提交的表單數(shù)據(jù)是用戶寫的還是被瀏覽器插件惡意改的,且繼續(xù)往下看)
- js 的 event 有個屬性 isTrusted
圖片psu28資訊網(wǎng)——每日最新資訊28at.com
- 首先要對所有的 input 標(biāo)簽使用Object.getOwnPropertyDescriptor 進行劫持,找到 input 標(biāo)簽的 set 屬性,此時,當(dāng)變更 input 的輸入值我們都可以監(jiān)控到變化,當(dāng)有js變更input輸入框的值都會觸發(fā) set 方法。
圖片psu28資訊網(wǎng)——每日最新資訊28at.com
- 上述的功能代碼是一個完整的 config.js, 啟動項目的時候直接在 nuxt.config.js 加載這個 config.js 即可,業(yè)務(wù)團隊使用一個指令即可完成需求。
總結(jié)
我們來梳理下流程:psu28資訊網(wǎng)——每日最新資訊28at.com
- 首先使用Object.getOwnPropertyDescriptor 進行劫持所有的 input 標(biāo)簽, 在里面會觸發(fā)自定義事件dispatchTamper
- 自定義事件綁定在真實的 input 標(biāo)簽上,在瀏覽器執(zhí)行js階段完成了綁定事件。通過 vnode.context 我們可以調(diào)用 Vue.prototype.tamperFn 方法。在 tamperFn 里面拿到 isTrusted 來區(qū)分是不是被篡改的值。
- 我們在綁定 input 標(biāo)簽的事情同時,設(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%2FisTrustedpsu28資訊網(wǎng)——每日最新資訊28at.com
本文鏈接:http://www.www897cc.com/showinfo-26-77688-0.html產(chǎn)品經(jīng)理:前端實現(xiàn)網(wǎng)頁防篡改,你會怎么做?
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。郵件:2376512515@qq.com
上一篇: 探索C++編程的利器:全面解析pragma的妙用
下一篇: 學(xué)會使用aiofiles模塊,讓Python文件操作更高效!
標(biāo)簽: