一、HTTP 请求的拦截技术可以广泛地应用在反向代理、拦截 Ajax 通信、网页的在线翻译、网站改版重构等方面。而拦截根据位置可以分为服务器端和客户端两大类，客户端拦截借助 JavaScript 脚本技术可以方便地和浏览器的解释器及用户的操作进行交互，能够实现一些服务器端拦截不容易实现的功能。本文将重点介绍通过 JavaScript 脚本在客户端对页面内容进行拦截修改的一些原理和技术
二、方法简介
| 名称 |
特点 |
优点 |
缺点 |
| 利用浏览器的 Event |
通过对 [ 鼠标事件 ]，[ 键盘事件 ]，[HTML 事件 ]，[Mutation 事件 ] 的监听，可以对用户的交互，页面的变化，特别是标签节点的变化做出响应 |
浏览器自身支持，代码量小，几乎可以用来控制所有的 HTML 内容 |
此方法中的 Mutation Event，Firefox2.0 平台已支持，IE6.0 尚未支持 |
| 通过 AOP 技术拦截 |
可以拦截大部分对象的方法调用。 |
很多 JS 代码库和框架已经支持 AOP 技术，代码简单 |
ActiveX 对象无法有效拦截。无法拦截普通的函数。另外单独使用此项技术会造成插入点复杂。 |
| 覆盖函数进行拦截 |
通过编写同名方法覆盖系统定义，用户自定义的函数 ( 构造函数 )，达到拦截目的，对普通函数的拦截是对 AOP 的补充。 |
不依赖其他的代码库和 JS 框架，对系统函数的覆盖有很好的效果，可以拦截构造函数用来控制对象的生成。 |
拦截自定义函数会造成插入点复杂 |
| 通过动态代理进行拦截 |
主要用来解决 ActiveX 对象的拦截问题，通过构造 ActiveX 对象的代理对象，实现拦截和跟踪。 |
典型的例子如 IE 平台下 AJAX 通信的拦截 |
代码复杂，属性更新的同步机制可能导致某些应用异常。 |
| 通过自代理和 HTML 解析进行拦截 |
此方法主要解决的是拦截时机的问题，配合上面的方法，就可以实现很多功能，而不必要等待页面的 onload 事件。 |
实现浏览器端页面加载前拦截的好方法 |
代码复杂 |
三、方法的实现
1、覆盖系统类 / 方法进行拦截
覆盖已定义的函数是在原函数定义后，调用前通过定义同名函数，达到拦截和跟踪的目的。其一般形式多如下面 :
| var oriFunction = someFunction; someFunction = function () { return oriFunction(); //or oriFunction.call(x,); } |
第一步是（第一行代码）为了将指向原来函数的指针保存，以便后续使用。
第二步便是定义同名函数，在同名函数里面的适当位置调用原来的功能。这种方法不但可以跟踪原来函数，还可以修改和过滤函数的参数，甚至可以修改返回值。当需要操纵参数的时候，只需在新定义的函数中访问 arguments 对象即可。
例如：针对系统函数 window.open(URL,name,specs,replace) 我们可以通过下面的代码进行拦截：
| var oriWindowOpen = window.open; window.open = function(url,names,specs,replace) { url = "http://www.ibm.com"; //or arguments[0]="http://www.ibm.com"; return oriWindowOpen(url,names,specs,replace); } |
上面的拦截会导致所有的 window.open 调用全部打开 http://www.ibm.com 窗口 。
函数覆盖的适用范围较广，不但可以模拟 AOP 的实现，还可以对非对象函数进行操作。函数覆盖可以根据使用的差异分成若干情况 :
- 覆盖系统定义的函数、对象的方法：覆盖系统定义的函数或方法可以不用顾及代码插入点的问题，大可以将函数覆盖的代码放置在页面的最前边，并参照上面的形式进行操作。但是特别注意在 IE 平台下对 ActiveX 的对象的方法无效。
- 覆盖用户自定义的函数、对象的方法：覆盖用户自定义的函数，对象的方法需要考虑代码插入点的问题。正确的代码插入点的位置应该是在原函数定义之后，调用之前。
- 覆盖构造函数：覆盖构造函数是满足上面两种情况的一种特殊使用形式，跟踪对象创建之除，可以有效地针对对象的需要作出各种特殊的设置。
覆盖构造函数的一般形式 :
| var oriFunction = someFunction; someFunction = function () { temp = oriFunction(); //oriFunction.call(x,); return temp; } |
2、通过动态代理进行拦截
当在 IE6.0 平台遭遇 ActiveX 对象的时候，面对直接的函数覆盖不能奏效的时候，我们可以考虑通过另外一种办法，即动态代理 ActiveX 对象的方式实现拦截和跟踪。
首先我们通过覆盖构造函数的方法，将创建 XMLHttpRequest 对象的过程进行改造。
| var oriActiveXObject = ActiveXObject; ActiveXObject = function(param) { var obj = new oriActiveXObject(param); if(param == "Microsoft.XMLHTTP" || param=="Msxml2.XMLHTTP" || param == "Msxml2.XMLHTTP.4.0") { return createActiveXAgent(obj); } return obj; }; |
我们将构造过程拦截下来后，进行自己的改造，主要操作是创建对象，对象中设置与 ActiveX 对象相同的属性和方法，并且还需要同步属性方法。
function createActiveXAgent(ao) {
var agent = newObject;
agent.activeXObject = ao; //被包裹的内核，是真正的通信对象
agent.syncAttribute = function() { //syncAttribute是用来同步属性的
try{
this.readyState = this.activeXObject.readystate;
this.responseText = this.activeXObject.responseText;
this.responseXML = this.activeXObject.responseXML;
this.status = this.activeXObject.status;
this.statusText = this.activeXObject.statusText;
}catch(e) { }
};
agent.trigStateChange = function() { //模拟onreadystatechange
agent.syncAttribute();
if(agent.onreadystatechange != null) {
agent.onreadystatechange();
}
};
agent.activeXObject.onreadystatechange = agent.trigStateChange;
agent.abort = function() { //模拟abort
this.activeXObject.abort();
this.syncAttribute();
};
agent.getAllResponseHeaders =function() { //模拟内核对应的方法
var result = this.activeXObject.getAllResponseHeaders();
this.syncAttribute();
return result;
};
agent.getResponseHeader = function(headerLabel) { //模拟内核对应的方法
var result = this.activeXObject.getResponseHeader(headerLabel);
this.syncAttribute();
return result;
};
agent.open = function(method,url,asyncFlag,userName,password) {
//codetotraceandintercept;
url=getParamURL(url,method);
this.activeXObject.open(method,url,asyncFlag,userName,password);
this.syncAttribute();
};
agent.send = function(content) { //模拟内核对应的方法
this.activeXObject.send(content);
this.syncAttribute();
};
agent.setRequestHeader = function (label,value) { //模拟内核对应的方法
this.activeXObject.setRequestHeader(label,value);
this.syncAttribute();
};
return agent;
};
从上面的代码可以看出来，代理对象通过自身的方法模拟了原来 ActiveX 对象的方法。而更关键的属性问题，是通过在函数调用前后的属性同步函数实现的。即：在调用代理内核方法之前，将属性从代理对象同步给内核对象；在内核方法调用之后，将属性从内核对象同步给代理对象。
因为 AJAX 对象的属性几乎不被用户写入，故上面的实现只需要单向属性同步，即将内核属性同步给代理属性。对于复杂的应用，可以通过双向属性同步函数来解决属性的代理问题。
这种动态代理的方法将 ActiveX 对象像果核一样包裹起来，通过代理对象自身的同名属性和方法提供给外界进行访问，从而达到跟踪和拦截的目的。