說(shuō)到劫持，第一反應(yīng)可能是什么不好的東西。函數(shù)劫持并不邪惡，關(guān)鍵是看使用的人。雖然這個(gè)概念在前端領(lǐng)域使用較少，但是在安全領(lǐng)域、自定義業(yè)務(wù)等場(chǎng)景下還是有一定的使用價(jià)值的。所以，動(dòng)力節(jié)點(diǎn)的老師帶大家一起去了解一下JS中的函數(shù)劫持是什么，有什么用。

　　基本概念

　　函數(shù)劫持，顧名思義，即在一個(gè)函數(shù)運(yùn)行之前把它劫持下來(lái)，添加我們想要的功能。當(dāng)這個(gè)函數(shù)實(shí)際運(yùn)行的時(shí)候，它已經(jīng)不是原本的函數(shù)了，而是帶上了被我們添加上去的功能。這也是我們常見(jiàn)的鉤子函數(shù)的原理之一。

　　乍一看上去，這很像是函數(shù)的改寫(xiě)。函數(shù)的改寫(xiě)也可以理解為是函數(shù)劫持的一種，但是這種方式太惡心了。作為一個(gè)劫持者，在綁票獲得好處以后也應(yīng)該遵守職業(yè)道德，把人原封不動(dòng)地還回去，所以我們得在合適的地方把函數(shù)原本的功能給重新調(diào)用回來(lái)。

　　推而廣之，其實(shí)“劫持”這一概念我們經(jīng)常會(huì)遇到，比方說(shuō)某網(wǎng)站被運(yùn)營(yíng)商劫持了，在瀏覽該網(wǎng)站的時(shí)候會(huì)彈出運(yùn)營(yíng)商的廣告。

　　舉例分析

　　現(xiàn)在我們來(lái)舉個(gè)簡(jiǎn)單的例子，劫持一下alert()函數(shù)，為它增添一點(diǎn)小小的功能：

　　1.let warn = alert 

　　2.window.alert = (t) => { 

　　3.    if (confirm('How are you?')) warn(t) 

　　4.} 

　　5. 

　　6.alert('Help me...!!!')  

　　可以打開(kāi)開(kāi)發(fā)者工具嘗試一下這個(gè)例子，你會(huì)發(fā)現(xiàn)只有你在confirm里面點(diǎn)擊了OK，才會(huì)彈出Helpme...!!!。

　　接下來(lái)我們把這部分的內(nèi)容封裝一下，成為一個(gè)通用的函數(shù)：

　　1.const hijack = (obj, method, fun) => { 

　　2.  let orig = obj[method] 

　　3.  obj[method] = fun(orig) 

　　4.}  

　　首先我們定義了一個(gè)hijack函數(shù)，它會(huì)先把原函數(shù)給保存下來(lái)，然后執(zhí)行自定義函數(shù)，而原函數(shù)將會(huì)在自定義函數(shù)內(nèi)部進(jìn)行調(diào)用。

　　然后我們來(lái)劫持confirm()函數(shù)：

　　1.hijack(window, 'confirm', (orig) => { 

　　2.  return (text) => { 

　　3.    alert('HELP ME PLZ!!!') 

　　4.    if (orig.call(this, text)) { 

　　5.      alert('YOU SEEMS FINE AND I AM LEAVING, GOOD BYE!') 

　　6.    } else { 

　　7.      alert('HOLD ON! I AM COMING!!') 

　　8.    } 

　　9.  } 

　　10.})  

　　這段函數(shù)的功能很簡(jiǎn)單就不詳細(xì)說(shuō)明了，直接調(diào)用confirm()你就知道了。

　　反劫持

　　新建一個(gè)頁(yè)面，打開(kāi)你的開(kāi)發(fā)者工具控制臺(tái)，輸入alert，你會(huì)看到這樣的輸出：

　　1.function alert() { [native code] } 

　　然后使用本文開(kāi)頭的那段代碼，把a(bǔ)lert()劫持一下，再重新在控制臺(tái)輸入alert，你會(huì)看到這樣的輸出：

　　1.function (t) => { 

　　2.    if (confirm('How are you?')) warn(t) 

　　3.}  

　　通過(guò)上述的例子可以知道，要看一個(gè)函數(shù)是否被劫持了，只需要直接把它打印出來(lái)即可。針對(duì)系統(tǒng)原生的函數(shù)，[nativecode]即代表它是純凈無(wú)污染的。

　　函數(shù)劫持的作用

　　除了為函數(shù)增加功能以外，還能夠利用函數(shù)劫持去追蹤惡意用戶的信息。一般的XSS攻擊會(huì)先利用alert()等能夠輸出信息的方法進(jìn)行測(cè)試，這時(shí)候我們可以先對(duì)原生alert()進(jìn)行劫持，向其輸入追蹤信息的代碼，然后才把原函數(shù)釋放出去。當(dāng)惡意用戶在測(cè)試alert()的時(shí)候就會(huì)立即被我們追蹤，而他本人卻無(wú)從察覺(jué)。

　　后記

　　關(guān)于JS的函數(shù)劫持，也不是什么新鮮的東西，只是有同學(xué)在最近的工作中遇到了這個(gè)知識(shí)點(diǎn)感覺(jué)比較陌生，過(guò)來(lái)咨詢了一下，動(dòng)力節(jié)點(diǎn)的Java老師花了一些時(shí)間總結(jié)了一下，如果同學(xué)們還有其他見(jiàn)解，可以關(guān)注動(dòng)力節(jié)點(diǎn)的官方微信去調(diào)戲虎生的小師妹，給動(dòng)寶兒留言。