javascript的函数劫持浅析

JavaScript的函数劫持指的是通过改变函数的执行环境，来获得对函数执行结果的控制。这个技术通常使用在针对其他人编写的代码，来改变目标代码的行为。下面是对JavaScript函数劫持的完整攻略：

什么是函数劫持？

函数劫持是指改变JavaScript函数的行为，使其执行方式符合我们的意愿。攻击者能够通过利用函数劫持的技术，在运行时改变目标函数的功能和输出，达到攻击目的的目的。

如何实现简单的函数劫持？

实现一个简单的函数劫持只需要两个步骤：

1. 保存原始函数的引用
2. 重新定义函数并且调用原始函数

// 保存原始函数引用
var originalFunc = window.alert;

// 重新定义函数
window.alert = function(msg) {
  // 新的功能（攻击者添加的代码）
  console.log('alerting...');

  // 调用原始函数
  originalFunc(msg);
}

在上面的代码中，我们保存了原始的 alert 函数到 originalFunc 变量中，并且重新定义了alert函数，添加了一个新的 console.log 语句，这个语句会在每次调用 alert 时都会执行。最后，我们调用原始函数 originalFunc 并且传递了 msg 参数。

示例1：使用函数劫持拦截AJAX请求

XMLHttpRequest.prototype.originalOpen = XMLHttpRequest.prototype.open;

XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {
  this.originalOpen(method, url, async, user, pass);

  // 在每一个 AJAX 请求中添加一个操作
  console.log('AJAX 请求方法：', method, ', 请求 URL：', url);
}

在这个例子中，我们保存了原始的 XMLHttpRequest.prototype.open 函数到 originalOpen 变量中，并且重新定义了该函数，添加了一个新的 console.log 语句来记录每一个 AJAX 请求的方法和请求 URL。最后，我们调用原始函数 originalOpen 并且传递相应的参数。

示例2：使用函数劫持实现输入框自动补全

// 保存原始函数引用
var originalFunc = document.getElementById;

// 重新定义函数
document.getElementById = function(id) {
  // 调用原始函数
  var result = originalFunc(id);

  // 如果找到相应的元素，则在输入框中自动补全
  if (result && result.tagName.toLowerCase() === 'input') {
    result.value = '默认值';
  }

  return result;
}

在本例中，我们保存了原始的 document.getElementById 函数到 originalFunc 变量中，并且重新定义了该函数。代码根据传入的 id 获取相应的元素。如果该元素中 tagName 属性等于 input，则为输入框自动设置默认值。最后，我们调用原始函数 originalFunc 并且传递相应的参数。

以上是JavaScript函数劫持的简单介绍和两个示例。为了避免这种攻击，我们应该在编写JavaScript代码时特别小心，尤其是当使用引用库并且无法完全控制重载的功能时。