說到劫持，第一反應可能是什么不好的東西。函數劫持并不邪惡，關鍵是看使用的人。雖然這個概念在前端領域使用較少，但是在安全領域、自定義業務等場景下還是有一定的使用價值的。所以，動力節點的老師帶大家一起去了解一下JS中的函數劫持是什么，有什么用。

　　基本概念

　　函數劫持，顧名思義，即在一個函數運行之前把它劫持下來，添加我們想要的功能。當這個函數實際運行的時候，它已經不是原本的函數了，而是帶上了被我們添加上去的功能。這也是我們常見的鉤子函數的原理之一。

　　乍一看上去，這很像是函數的改寫。函數的改寫也可以理解為是函數劫持的一種，但是這種方式太惡心了。作為一個劫持者，在綁票獲得好處以后也應該遵守職業道德，把人原封不動地還回去，所以我們得在合適的地方把函數原本的功能給重新調用回來。

　　推而廣之，其實“劫持”這一概念我們經常會遇到，比方說某網站被運營商劫持了，在瀏覽該網站的時候會彈出運營商的廣告。

　　舉例分析

　　現在我們來舉個簡單的例子，劫持一下alert()函數，為它增添一點小小的功能：

　　1.let warn = alert 

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

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

　　4.} 

　　5. 

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

　　可以打開開發者工具嘗試一下這個例子，你會發現只有你在confirm里面點擊了OK，才會彈出Helpme...!!!。

　　接下來我們把這部分的內容封裝一下，成為一個通用的函數：

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

　　2.  let orig = obj[method] 

　　3.  obj[method] = fun(orig) 

　　4.}  

　　首先我們定義了一個hijack函數，它會先把原函數給保存下來，然后執行自定義函數，而原函數將會在自定義函數內部進行調用。

　　然后我們來劫持confirm()函數：

　　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.})  

　　這段函數的功能很簡單就不詳細說明了，直接調用confirm()你就知道了。

　　反劫持

　　新建一個頁面，打開你的開發者工具控制臺，輸入alert，你會看到這樣的輸出：

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

　　然后使用本文開頭的那段代碼，把alert()劫持一下，再重新在控制臺輸入alert，你會看到這樣的輸出：

　　1.function (t) => { 

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

　　3.}  

　　通過上述的例子可以知道，要看一個函數是否被劫持了，只需要直接把它打印出來即可。針對系統原生的函數，[nativecode]即代表它是純凈無污染的。

　　函數劫持的作用

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

　　后記

　　關于JS的函數劫持，也不是什么新鮮的東西，只是有同學在最近的工作中遇到了這個知識點感覺比較陌生，過來咨詢了一下，動力節點的Java老師花了一些時間總結了一下，如果同學們還有其他見解，可以關注動力節點的官方微信去調戲虎生的小師妹，給動寶兒留言。