小程序安全指南之如何禁止外部直接跳轉(zhuǎn)到小程序某頁面
背景
小程序也需要注意安全性。例如某些頁面是業(yè)務流程中的「第二步」、「第三步」,而非「第一步」。如果外部小程序、外部二維碼、鏈接直接跳轉(zhuǎn)到了我們小程序的「第二步」、「第三步」,可能有超出預期的事情發(fā)生。
針對外部跳轉(zhuǎn)到小程序「第二步」、「第三步」頁面的,我們應該攔截掉,要么直接報錯:頁面來源非法,要么直接跳回首頁。
關(guān)鍵問題在于,這種邏輯該怎么實現(xiàn)最優(yōu)雅呢?
一種不是很好的解決方案
如果你的業(yè)務流程采用了狀態(tài)機模型,并在后端存儲了狀態(tài),那么可以在每一個頁面onLoad時,發(fā)送一個API請求,判斷當前狀態(tài)和當前頁面是否匹配,如果匹配,則正常訪問,如果不匹配,則跳回到狀態(tài)對應的頁面。
這依賴于后端實現(xiàn),不太合適。
更好的解決方案
我們考慮純前端的實現(xiàn)。
問題關(guān)鍵在于:我們要禁止外部直接跳轉(zhuǎn)到我們小程序的部分頁面。我們需要要區(qū)分:內(nèi)部跳轉(zhuǎn)、外部跳轉(zhuǎn)。
這部分頁面,只允許通過內(nèi)部跳轉(zhuǎn)API(wx.redirectTo
、wx.navigateTo
)來跳轉(zhuǎn),其它方式都不應跳轉(zhuǎn)到。
只要我們在調(diào)用wx.redirectTo
、wx.navigateTo
時,都加上一個特殊參數(shù)
。然后在頁面的onLoad里面判斷,是否包含了該特殊參數(shù)
,包含該特殊參數(shù)
,表明是內(nèi)部跳轉(zhuǎn),不包含該特殊參數(shù)
,表明是外部跳轉(zhuǎn)。
這個特殊參數(shù)
不可以被猜到,如果被猜到了,那么外部跳轉(zhuǎn)時帶上特殊參數(shù)
,該方案就失效了。
所以,這個特殊參數(shù)
必須不是固定的,要是隨機的。
我們可以參考WEB中針對CSRF的解決方案,如果使用隨機的特殊參數(shù)
,讓外部無法猜到這個特殊參數(shù)
,那么問題就解決了。
特殊參數(shù)
什么時候生成呢?可以在App onLaunch時生成,也可以在「第一步」頁面onLoad時生成。不過不論怎樣,這個特殊參數(shù)
都需要作為全局變量保存在內(nèi)存中,方便隨時引用和判斷。
具體怎么做?建議你先閱讀下文章:《如何全局重寫小程序 Page函數(shù) wx對象?》,學會這種方法,我們再來看下方的代碼。
全局改寫Page的onLoad生命周期,增加校驗
const WHITE_LIST = ['pages/index']; function onLoadProxy(onLoad) { return function (query) { const app = getApp(); // 以下是token攔截邏輯: if (WHITE_LIST.includes(this.route)) { // 在允許外部跳轉(zhuǎn)來的白名單頁面,生成隨機數(shù)validEntranceToken app.validEntranceToken = `${new Date().getTime()}${Math.random().toString(36)}`; } else if (query.validEntranceToken !== app.validEntranceToken) { // 其它頁面,校驗參數(shù)token是否與全局變量中token一致,若不一致,跳轉(zhuǎn)到報錯頁面 wx.redirectTo({ url: `/pages/fail` }); return; } // 未被攔截,表明是正常來源。以下是正常流程: if (onLoad) { return onLoad.call(this, query); } }; } const PageProxy = (Page) => function (options) { const newOptions = { ...options, onLoad: onLoadProxy(options.onLoad), }; Page(newOptions); }; Page = PageProxy(Page);
全局改寫wx.navigateTo方法,附帶參數(shù)
function addValidEntranceToken(url) { const app = getApp(); const symbol = url.includes('?') ? '&' : '?'; return `${url}${symbol}validEntranceToken=${app.validEntranceToken}`; } export function redirectToProxy(redirectTo) { return function (object) { return redirectTo({ ...object, url: addValidEntranceToken(object.url), }); }; } function wxProxy(wx) { const newWx = { ...wx }; newWx.navigateTo = redirectToProxy(wx.navigateTo); newWx.redirectTo = redirectToProxy(wx.redirectTo); return newWx; } wx = wxProxy(wx);
解釋
我們通過修改所有Page的onLoad方法,當用戶訪問「白名單」頁面時,不會做任何攔截,而是直接生成一個隨機的validEntranceToken
。當用戶訪問「白名單」以外的頁面時,則會判斷參數(shù)中是否包含正確的validEntranceToken
,若不包含,則會跳轉(zhuǎn)到報錯頁。若包含,則繼續(xù)執(zhí)行該頁面的其它邏輯。
此外,我們還修改了原生的wx.navigateTo
和wx.redirectTo
,當我們做內(nèi)部跳轉(zhuǎn)時,會自動帶上剛才提到的參數(shù)validEntranceToken
。
做好這些事情后,開發(fā)時,無需關(guān)心細節(jié)(意思是這套邏輯針對業(yè)務代碼是0侵入的),只需要關(guān)注「白名單」頁面有哪些即可。可謂是最優(yōu)雅的方案了。
總結(jié)
到此這篇關(guān)于小程序安全指南之如何禁止外部直接跳轉(zhuǎn)到小程序某頁面的文章就介紹到這了,更多相關(guān)小程序禁止外部直接跳轉(zhuǎn)某頁面內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
小程序卡片切換效果組件wxCardSwiper的實現(xiàn)
這篇文章主要介紹了小程序卡片切換效果組件wxCardSwiper的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-02-02uniapp使用scroll-view實現(xiàn)左右上下滑動功能
最近在用uni-app開發(fā)小程序時,需要用scroll-view做出左右上下滑動效果,所以下面這篇文章主要給大家介紹了關(guān)于uniapp使用scroll-view實現(xiàn)左右上下滑動功能的相關(guān)資料,需要的朋友可以參考下2022-11-11基于JS實現(xiàn)簡單的3D立方體自動旋轉(zhuǎn)
這篇文章主要為大家詳細介紹了如何利用JavaScript實現(xiàn)簡單的3D立方體自動旋轉(zhuǎn)的效果,文中的實現(xiàn)代碼講解詳細,感興趣的可以嘗試一下2022-06-06