2

你有用过 JavaScript 中的函数劫持么?

 2 years ago
source link: https://www.fly63.com/article/detial/11521
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

更新日期: 2022-05-18阅读量: 10标签: 函数分享

扫一扫分享

什么是函数劫持

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

// 原始函数
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';
// ture {name: 'Gopal'}  {name: 'Gopal'} 
console.log(b === a, a, b);

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

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

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

增强你的函数功能

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

追踪 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) {
  // 拿到攻击者相关信息，并上报
  report(alert.caller)
  _alert(s)
}
alert('test');

劫持 ajax 请求，实现 mock 功能

mock.js 中，就是通过对原生的 XMLHttpRequest(或 ActiveXObject)进行劫持，判断有没有找到匹配的数据模板，如果找到，则拦截 XHR 请求逻辑，执行自身规则对应的逻辑。如果未找到匹配的数据模板，则采用原生 XHR 发送请求。详细代码看这里。

JavaScript 中的函数劫持是一个增强原有函数的技巧，一般我们用来对原有的 JavaScript 全局方法做一些能力的增强。

来源： 前端杂货铺

链接: https://www.fly63.com/article/detial/11521


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK