一、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、覆盖系统类 / 方法进行拦截
覆盖已定义的函数是在原函数定义后,调用前通过定义同名函数,达到拦截和跟踪的目的。其一般形式多如下面 :
|
第一步是(第一行代码)为了将指向原来函数的指针保存,以便后续使用。
第二步便是定义同名函数,在同名函数里面的适当位置调用原来的功能。这种方法不但可以跟踪原来函数,还可以修改和过滤函数的参数,甚至可以修改返回值。当需要操纵参数的时候,只需在新定义的函数中访问 arguments 对象即可。
例如:针对系统函数 window.open(URL,name,specs,replace) 我们可以通过下面的代码进行拦截:
|
上面的拦截会导致所有的 window.open 调用全部打开 http://www.ibm.com 窗口 。
函数覆盖的适用范围较广,不但可以模拟 AOP 的实现,还可以对非对象函数进行操作。函数覆盖可以根据使用的差异分成若干情况 :
- 覆盖系统定义的函数、对象的方法:覆盖系统定义的函数或方法可以不用顾及代码插入点的问题,大可以将函数覆盖的代码放置在页面的最前边,并参照上面的形式进行操作。但是特别注意在 IE 平台下对 ActiveX 的对象的方法无效。
- 覆盖用户自定义的函数、对象的方法:覆盖用户自定义的函数,对象的方法需要考虑代码插入点的问题。正确的代码插入点的位置应该是在原函数定义之后,调用之前。
- 覆盖构造函数:覆盖构造函数是满足上面两种情况的一种特殊使用形式,跟踪对象创建之除,可以有效地针对对象的需要作出各种特殊的设置。
覆盖构造函数的一般形式 :
|
2、通过动态代理进行拦截
当在 IE6.0 平台遭遇 ActiveX 对象的时候,面对直接的函数覆盖不能奏效的时候,我们可以考虑通过另外一种办法,即动态代理 ActiveX 对象的方式实现拦截和跟踪。
首先我们通过覆盖构造函数的方法,将创建 XMLHttpRequest 对象的过程进行改造。
|
我们将构造过程拦截下来后,进行自己的改造,主要操作是创建对象,对象中设置与 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 对象像果核一样包裹起来,通过代理对象自身的同名属性和方法提供给外界进行访问,从而达到跟踪和拦截的目的。