#yyds干货盘点#什么是JavaScript 中的函数劫持

Posted 2022-07-08 尼羲

什么是函数劫持

最近业务上看到一段逻辑，找了好久，没发现它是怎么被触发的，后来发现其实使用了函数劫持，大致如下：

// 原始函数
var saveLog = function (log) 
  console.log(`我保存了日志：$log`);


// 1-保存原有函数
var originSaveLog = saveLog;

// 2-改写原有函数
saveLog = function () 
  const args = Array.prototype.slice.call(arguments);
  // 3-在改写后的函数中执行原有函数的逻辑
  originSaveLog.apply(null, args);
  console.log(我要劫持你这个函数，用来做自己的事情);


saveLog(test Save Log);

大致实现的逻辑就是在每次调用保存日志的同时执行自己的逻辑，比如格式化、通知等。

函数劫持，在一个函数运行之前就把它劫持下来，添加我们想要的功能。当这个函数实际运行的时候，它已经不是原本的函数了，而是被我们添加上去的功能。这也是我们常见的钩子函数的原理之一。

如上面的示例，一般函数劫持会分成三步 :

• 使用新的变量保存被劫持函数
• 新函数中改写被劫持函数
• 新函数中调用原有的函数（保存在变量中的函数）

为什么可以这么做

一开始，我看上面这段代码还有疑惑，当重新给 saveLog 赋值的时候，不会改变 originSaveLog 的引用指向么？事实上是不会的，只会将 saveLog 指向另外一个引用地址。

可以看下面的例子就很容易理解了：

let a = ;
let b = a;
a.name = Gopal; 
console.log(b === a, a, b);
// ture name: Gopal  name: Gopal

基础：两个对象指向同一个地址的时候，修改某个对象的属性，另外一个对象也会随之变化。

let a = ;
let b = a;
a = name: Gopal;
console.log(b === a, a, b);
// false name: Gopal 

基础：将新的对象赋值给对象变量的时候，该对象变量就指向了新对象的引用地址，跟旧引用切断关联。

​

应用场景

增强你的函数功能

如上面的第一个例子，在原有的函数之上，实现特定的逻辑。

追踪 XSS

​一般 XSS 会先利用 ​​​alert()​​​ 等方法输出信息进行测试，这个时候，我们可以对原先的 ​​​alert()​​​ 进行劫持，向其输入追踪信息的代码，最后才把原函数执行。​

如下所示：

function report(caller) 
  var img=new Image();
  img.src=`http://www.site.com/getReport.php?caller=$encodeURIComponent(caller)`;

var _alert = window.alert;
window.alert = function (s) 
  // 拿到xss发起者相关信息，并上报
  report(alert.caller)
  _alert(s)

alert(test);