异步 JS拦截技术

最新推荐文章于 2023-10-03 01:02:49 发布
最新推荐文章于 2023-10-03 01:02:49 发布
阅读量2.5k 收藏 1
点赞数
分类专栏： javascript基础 文章标签： xmlhttprequest function aop html 浏览器 javascript

JS拦截技术

HTTP 请求的拦截技术可以广泛地应用在反向代理、拦截 Ajax 通信、网页的在线翻译、网站改版重构等方面。而拦截根据位置可以分为服务器端和客户端两大类，客户端拦截借助 JavaScript 脚本技术可以方便地和浏览器的解释器及用户的操作进行交互，能够实现一些服务器端拦截不容易实现的功能。本文将重点介绍通过 JavaScript 脚本在客户端对页面内容进行拦截修改的一些原理和技术。


在浏览器端的拦截和跟踪主要是利用 JavaScript 的脚本环境完成，根据笔者的经验，主要寻找并总结了如下的方法。这些方法的使用效果和支持平台可以互相弥补。

名称特点优点缺点
利用浏览器的 Event通过对 [ 鼠标事件 ]，[ 键盘事件 ]，[HTML 事件 ]，[Mutation 事件 ] 的监听，可以对用户的交互，页面的变化，特别是标签节点的变化做出响应浏览器自身支持，代码量小，几乎可以用来控制所有的 HTML 内容此方法中的 Mutation Event，Firefox2.0 平台已支持，IE6.0 尚未支持
通过 AOP 技术拦截可以拦截大部分对象的方法调用。很多 JS 代码库和框架已经支持 AOP 技术，代码简单ActiveX 对象无法有效拦截。无法拦截普通的函数。另外单独使用此项技术会造成插入点复杂。
覆盖函数进行拦截通过编写同名方法覆盖系统定义，用户自定义的函数 ( 构造函数 )，达到拦截目的，对普通函数的拦截是对 AOP 的补充。不依赖其他的代码库和 JS 框架，对系统函数的覆盖有很好的效果，可以拦截构造函数用来控制对象的生成。拦截自定义函数会造成插入点复杂
通过动态代理进行拦截主要用来解决 ActiveX 对象的拦截问题，通过构造 ActiveX 对象的代理对象，实现拦截和跟踪。典型的例子如 IE 平台下 AJAX 通信的拦截代码复杂，属性更新的同步机制可能导致某些应用异常。
通过自代理和 HTML 解析进行拦截此方法主要解决的是拦截时机的问题，配合上面的方法，就可以实现很多功能，而不必要等待页面的 onload 事件。实现浏览器端页面加载前拦截的好方法代码复杂

利用浏览器的 Event

浏览器的事件也可以很好地用来拦截和跟踪页面。 鼠标和键盘的交互事件这里暂不介绍。比较常用的是 onload，onunload 事件和 Mutation Events 事件。 onload 和 onunload 事件可以作用在 window，frame，img 和 object 等对象上，利用 onload 可以在对象载入前执行一些操作 ,onunload 事件可以跟踪浏览器关闭前执行操作。

在浏览器的 Event 中，Mutation Eventsii 是更加重要的跟踪工具之一。 Mutation Events 是 DOM2.0 标准的一部分，目前 Firefox2.x 已经开始支持 Mutation Events, IE6.0 目前尚不支持。 在 IE6.0 中可以是通过使用 onpropertychange 事件及覆盖节点的方法弥补部分的不足。这里重点介绍一下 Mutation Events 。

Mutation Event 主要包括了七种事件，如下所示。

  • DOMAttrModified：跟踪 DOM 节点属性的变化;
  • DOMCharacterDataModified：DOM 节点字符数据的变化;
  • DOMNodeInserted：DOM 新节点被插入到给定的父节点;
  • DOMNodeInsertedIntoDocument：DOM 节点被直接或随着祖先节点而插入;
  • DOMNodeRemoved：DOM 节点被从父节点删除;
  • DOMNodeRemovedFromDocument：DOM 节点被直接或跟随祖先节点被删除;
  • DOMSubtreeModified：DOM 元素或文档变化。

可以说利用 Onload 事件的拦截，我们基本上解决了静态 HTML 内容的拦截，而对于脚本操作的 HTML 变化，我们就可以通过 Mutation Event 来进行解决。

下面类似的实现框架可以用来跟踪 src、action、href 等属性的变化。

document.addEventListener("DOMAttrModified", AttributeNodeModified, false); function AttributeNodeModified(evt) { if(evt.attrName == "href") { } if(evt.attrName == "src") { } if(evt.attrName == "action") { } }

通过 DOMAttrModified、DOMNodeInserted 等事件可以很好地跟踪和拦截 HTML 的变化。只可惜在 IE6.0 平台上还不能支持 Mutation Event，导致在 IE6.0 上进行拦截和跟踪的效果大打折扣。针对此平台，通过覆盖 document.write/DomNode.appendChild/DomNode.insertBefore 等方法和利用 onpropertychange 事件可以有限度地支持拦截和跟踪 HTML。

通过 AOP 技术拦截

针对对象方法调用的拦截，比较成熟的方案是使用 JavaScript 平台下的 AOP 技术。

目前，JavaScript 平台上的 AOP 方案主要有 Ajaxpectiii、jQuery AOPiv、Dojo AOPv 等。这些代码库主要功能是给指定对象的指定方法添加 Before, After,Around 等通知，从而达到拦截对象方法调用的目的 , 并且支持正则搜索方法名称。

Ajaxpect 的示例代码如下 :

var thing = { makeGreeting: function(text) { return 'Hello ' + text + '!'; }}function aopizeAdvice(args) { args[0] = 'AOP ' + args[0];return args;}function shoutAdvice(result) { return result.toUpperCase();} Ajaxpect.addBefore(thing, 'makeGreeting', aopizeAdvice); Ajaxpect.addAfter(thing, /make*/, shoutAdvice);

当然，在不方便使用上述代码库并且需求简单的时候，我们同样可以通过对象的方法覆盖的方式达到同样的效果。但是无论 AOP 还是方法覆盖， 都存在一个问题， 就是拦截代码的插入点不能做到很简捷，因为拦截代码的存在位置直接影响了代码的执行效果，因此在使用上还有一定的不方便。另外，针对 IE 平台的 ActiveX 对象，代码库不能很好的发挥功效，这是一些不足的地方。

覆盖系统类 / 方法进行拦截

覆盖已定义的函数是一种比 AOP 更直接的拦截和跟踪脚本调用的方式。

其原理是在原函数定义后，调用前通过定义同名函数，达到拦截和跟踪的目的。其一般形式多如下面 :

1： var oriFunction = someFunction; 2： someFunction = function () {3： return oriFunction(); //or oriFunction.call(x,);4： }

第一步是（第一行代码）为了将指向原来函数的指针保存，以便后续使用。

第二步便是定义同名函数，在同名函数里面的适当位置调用原来的功能。这种方法不但可以跟踪原来函数，还可以修改和过滤函数的参数，甚至可以修改返回值。当需要操纵参数的时候，只需在新定义的函数中访问 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;}

下面结合动态代理的方法给出 IE/Firefox 平台的 Ajax 通信拦截的一种简单实现。

Ajax 通信的核心是通过 XMLHttpRequest 对象和 HTTP Server 进行通信 ( 同步 / 异步 )，Firefox 和 IE 平台对 XMLHttpRequest 对象的实现不一样，因此两种浏览器的拦截方案也大相径庭。我们通过上面的技术将对 XMLHttpRequest 对象的方法进行跟踪。

拦截方法调用，我们可以使用 AOP，当然也可以直接覆盖函数。

在 Firefox 平台，我们可以通过下面的代码实现拦截 Ajax 对象的通信：

var oriXOpen = XMLHttpRequest.prototype.open; XMLHttpRequest.prototype.open = function(method,url,asncFlag,user,password) { //code to trace or intercept oriXOpen.call(this,method,url,asncFlag,user,password); };

但是在 IE 6.0 平台，上面的代码将不会有作用，因为在 IE 6.0 平台，Ajax 通信对象是通过 ActiveX 对象完成的，JS 中的函数覆盖不能起到作用。

通过动态代理进行拦截

当在 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 = new Object; 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) { //code to trace and intercept; 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 对象像果核一样包裹起来，通过代理对象自身的同名属性和方法提供给外界进行访问，从而达到跟踪和拦截的目的。

通过自代理和 HTML 解析进行拦截

当代码拦截点需要简单可靠的时候，上面的方法无法很好的满足需求。于是我们需要新的思路来解决代码的拦截点问题。

自代理和 HTML 解析是通过拦截原有的 HTTP 通信，通过重新通信获得内容后，在浏览器解析前通过我们自己的代码进行简单解析过滤的方式进行代码处理的方案。

首先是拦截原有的解析，重新加载新的内容：

var s = document.location.href;var comm = new ActiveXObject("Microsoft.XMLHTTP"); comm.open('get',s,false); comm.onreadystatechange = function() { if(comm.readyState == 4) { document.execCommand("stop"); var retText = removeMe(comm.responseText); retText = processContent(retText); } } comm.send(null);

如果将上面的代码写在一个 js 文件里，然后通过 <script> 标签插入到页面的最开始位置（<HTML> 后面）。

在 IE6.0 的浏览器下面，上面的代码因为使用了 XMLHTTP 的同步通信机制，因此代码会阻塞在 comm.send(null) 处，当通信结束得到完整的页面之后，会触发 stop 导致浏览器停止解析，转而执行我们的 processContent. removeMe 的意义在于重新获得的片面中去除这段代码自身，防止无穷迭代。

在 Firefox 下，我们需要使用 window.stop 代替上面的 execCommand.

当我们抢在浏览器之前拿到 HTML 内容后，我们下面的任务就是分析 HTML. 目前尚没有成熟的 JS 分析 HTML 的框架。因此我们可以选择将 HTML 转换成 XML, 然后借助 DOM 进行分析，也可以实现我们自己的 HTML 分析方案 .

我们可以将 HTML 的页面分析成节点如下的一颗树：

节点 { 父节点 ; 属性个数 ; 属性集合 ; 子节点个数 ; 子节点集合 }

JS拦截技术 - yong1202 - 蚂蚁的博客

图 2 是个简单的 HTML 文本分析状态图，不支持 HTML 的 & 字符串拼接功能。可以反复调用这个模块用来从 HTML 文档中提取字符块生成相应的节点，然后可以利用 JavaScript 的正则表达时提取节点的属性。

通过 HTML 文本分析状态图可以得到 HTML 解析的代码，然后得到一个根为 root 的节点。后面对树进行进一步的处理，就可以实现很多拦截功能。比如 function 覆盖。前面讲到的用户自定义函数覆盖会受到代码插入点复杂的影响。如果在这种方法的拦截下，就可以实现分析出 <script> 节点的内容中含有特定的 function 定义，进而替换或者在其后插入新的函数定义，不会造成插入点复杂的结果

js拦截所有请求
你好，欢迎光临！
03-10 1万+
function listen() { var origin = { open: XMLHttpRequest.prototype.open, send: XMLHttpRequest.prototype.send } XMLHttpRequest.prototype.open = function(a, b) { // console.log('open'); // this.addEventListener('loadend', onReadyStateCh
js 方法拦截
07-01
拦截某一个方法，例如提交前需要验证，那该方法就可以把这个方法拦截下来，做相关的验证，通过在提交。
js 函数 拦截器
MY的专栏
08-11 1万+
开放利于互联网创新与发展，写博文无非就是帮助网友解决问题、思想碰撞、诞生创新，但是我非常恶心转载之后还写个“原创”的人，如需转载请注明出处，请尊重原创，Thank you！ 我们通常在写程序的时候需要统一的对所有代码进行权限验证，如果没登陆则不允许继续访问，这种可以用拦截器的思想来做，反观js，我们是否也有这种类似的场景呢？比如我对输入的数据进行验证是否符合规定，你可以说我直接写
JS拦截方法
晨风飛扬的博客
04-21 6654
关于JS拦截方法 在网上找了好久关于JS拦截方法的文章，没有什么发现，仔细研究后整理如下代码，还望大家多多指正。 其实最主要的就是  Object.getOwnPropertyNames(example).forEach(function (property)这段代码，遍历对象内部的所有方法，判断如果是方法并且等于方法名，则进行拦截，这里我拦截的window全局所有方法，但是感觉不太好，不知
js解决异步的方案
qq_54357490的博客
05-21 351
解决异步的方案： 1、回调函数 函数里面套函数，容易形成回调地狱 2、事件 点击事件触发，事件可控，但是不推荐 3、promise .all（全部通过） race（谁跑的快） catch（失败） then （失败） 4、async await await：1、期望得到的是一个promise实例 2、如果得到的不是promise实例，会将得到的值装换为promise实例 3、必须等待async后面的语句执行完，再想下执行 5、generator yield （星号函数） ...
Js拦截全局ajax请求
08-10
Ajax，即异步JavaScript和XML，是一种创建动态网页的技术。它允许我们在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。在JavaScript中，最常用的库是jQuery的$.ajax()方法，以及现代浏览器原生支持的...
JS 拦截全局ajax请求实例解析
10-21
Ajax-hook是一个轻量级的JavaScript库，它允许开发者拦截所有Ajax请求。这个库的功能十分强大，可以提供统一的接口供开发者实现拦截逻辑，而无需修改现有的Ajax请求代码。Ajax-hook的源码地址为：***。 要使用Ajax-...
javascript实现fetch请求返回的统一拦截
10-15
JavaScript中的fetch API是一种现代的异步数据获取方式，它提供了更简洁、更符合Promise特性的接口来处理HTTP请求。然而，fetch默认并不提供请求和响应的拦截器，这对于需要进行全局处理，比如鉴权、错误处理等场景...
JS弹出新窗口被拦截的解决方法
10-21
在Web开发中，JavaScript是用于实现网页动态效果的重要技术之一，其中window.open()函数用于在浏览器中打开新窗口。然而，在使用window.open()时，常常会遇到浏览器弹窗拦截的问题，这是由于现代浏览器对弹出窗口...
jsp实现局部刷新页面、异步加载页面的方法
01-20
异步加载，或称Ajax（Asynchronous JavaScript and XML），是一种创建动态网页的技术，它允许在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。在例子中，使用了jQuery的`$.ajax`函数发起异步请求...
JavaScript 拦截器的简单了解(分享)
weixin_60547084的博客
03-15 3267
文章目录1. 闭包语法糖2. class/get/set3. 属性拦截器4. 对象代理拦截器 1. 闭包语法糖 // 这种set、get方法可以添加约束 // set必须要有参数，get必须要有返回值 function fn() { let num = 10 return { set num(value) { console.log("num被修改了"); num = value }, get num() { console.log("nu
用最简单的例子讲解js中解决异步的方法
lancun_web的博客
11-22 1912
解决js异步的方法有很多中，今天就讲解一下如何解决js中的异步问题。 在讲解异步解决办法之前我们需要知道什么是异步。定时器、AJAX、事件绑定等都会引起js的异步行为，今天用js中的定时器为例来讲解，看下题。 考虑下题中输出的结果为： function getData() { setTimeout(function() { let name = '张三'; return name; }, 1000); } console.log(getData()); 这里就有很多人会说输
Web之异步请求-拦截器-异常处理
weixin_46300935的博客
06-29 493
异步请求-跨域访问 跨域访问介绍 当通过域名A下的操作访问域名B下的资源时，称为跨域访问 跨域访问时，会出现无法访问的现象 跨域环境搭建 为当前主机添加备用域名 修改windows安装目录中的host文件 格式： ip 域名 动态刷新DNS 命令： ipconfig /displaydns 命令： ipconfig /flushdns 跨域访问支持  名称： @CrossOrigin ..
如何在js中拦截回调函数，即根据需要修改模块函数
weixin_26722099的博客
10-12 722
问题总结(Problem Summary) You are using a npm module with supported functions that have callbacks as parameters. You want that every time you handle a callback, you add some tasks before the actual callba...
记js函数拦截的一种实现
weixin_34014555的博客
10-22 2619
具体代码实践中，我们会遇到如何重用或者嵌入自己的代码到已写好的函数，比如前面的文章js深度拷贝所说的JSON.stringify来实现deepClone出现的问题，为了避免循环引用，使用的时候需要用到的第二个参数，如何更优雅的实现呢？如下代码： const stringify = JSON.stringify // 重写stringify JSON.stringify = function(......
js防止浏览器拦截新窗口弹出
锦锦_jane的博客
08-16 3628
项目需求要在新窗口打开链接，但被拦截了 1.问题 需要在ajax回调中在新窗口打开页面 在浏览器开启拦截弹窗时，window.open(src, "_blank");这个会被拦截 3.解决办法 弹窗，按钮使用a标签，在新窗口打开页面 不区分浏览器，需要在ajax回调中在新窗口打开页面时，都弹出一个弹窗（包含a标签按钮），修改a标签的src，引导用户点击按钮，实现防止浏览器拦截新窗口弹窗的功能
JS实现网页抓包-拦截、请求托管以及修改响应数据
最新发布
q145p152的博客
10-03 5725
什么是抓包：抓包就是抓取网络请求，将请求一直挂在到我们写的中间件中，在中间件统一修改后完成本次请求，俗称请求托管闲着没事本篇文章用js给大家手写一个抓包工具，配合油猴脚本嵌入各大网站，仅供学习参考、本地测试，切勿实施违法行为，现成脚本代码在最后，老规矩先看图脚本图一目了然，脚本也是我之前自己写的，大家拿去用即可抓包的作用有哪些？1、拦截请求，修改请求体，篡改一些我们无法手动更改请求信息2、拦截响应，修改响应体，对无防御无加密式网站可以造成一定影响，比如解锁一些功能。
前端打开新窗口被拦截
笋笋的博客
06-17 963
场景一： 1、非用户操作页面产生的跳转，如进入页面直接跳转
Javascript拦截XMLHttpRequest请求,修改Response内容
热门推荐
oh_futrue的博客
04-27 1万+
1.先执行下面的代码,实现全局拦截 let origin = XMLHttpRequest.prototype.open; XMLHttpRequest.prototype.open = function (...args) { //在这里插入拦截代码 this.__on_response=function(res){return res} return orig...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值