拦截和跟踪HTTP请求的主要方法及实现

阅读更多

一、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 对象像果核一样包裹起来，通过代理对象自身的同名属性和方法提供给外界进行访问，从而达到跟踪和拦截的目的。