Chrome 拦截并修改ajax/fetch 返回的数据

How to Use ajax-interceptor

背景简介

  • 随着Web应用/网页的不断增加, 随着restful的发展, springboot的实现简单, 以及不注意加密等等因素影响,客户端越来越容易模拟数据

举例:

  • pandownload 等通过加载httpClient模拟浏览器登录, 记录Cookie以实现再次打开免登陆的操作
  • 修改一些网页展示数据-> 原作者示例
  • 前端开发在后台没有做好的时候, 终于不用读取本地json文件.到时候在修改文件了.也不用特地叮嘱后台跨域了, 后台也不用修改跨域的代码了
  • 嗯... 还是很鸡肋的

什么是 ajax-interceptor

  • 可以拦截页面上的 ajax 请求,并把返回结果替换成任意文本。它对 mock数据、排查一些线上问题等会有很大帮助。(当然 chales 等抓包软件也可以做到,然而使用起来比较繁琐,做成 chrome 插件的形式会方便许多)

实现原理

  • 页面加载时往页面上注入 js 代码,这段 js 会生成一个 XMLHttpRequest 的代理对象,并把 window.XMLHttpRequest 替换成这个对象。该对象又会对 onreadystatechange 和 onload 两个回调函数做特殊处理,在它们执行时把 responseText 和 response 的值覆盖为你设置的值。其它就是这段页面上的 js 代码和右侧弹出的 iframe (用户界面)以及插件后台代码的一些数据交互和存储上的实现,这部分比较杂就不介绍了(引用了作者的原话)

作者 ajax-interceptor 的局限性

  • 仅适用于单post包含要修改的全部数据(无法仅仅修改部分返回数据)
  • 没有办法携带Cookie拦截(即设置任意cookie到本地)

给我们的提示

  • 做这种ajax/fetch(前端术语)其实是restful接口的时候, 重要数据一定要进行验证!!!!!!!!!!!!!!!!!!!!!!!!!!
  • 验证的方法有以下几种: restful请求中一定要 jwt/cookie/token加密 等等, 注意一定要加时间加密, 这样即使带参传过了时间也会失效
  • 验证的原理:
    都是通过后台加密, 把加密后的验证串(以下统称token)写到前端, 每次前端请求的时候都带上token-> 到后台验证
    所有的前端加密都是不靠谱的

ajax-interceptor 的安装使用教程

  • 在这里下载到源码并解压
    在这里下载到源码
  • 在Chrome中加载这个插件(当然如果你可以 可以直接去chrome商店中下载)
    在Chrome中加载这个插件
  • 添加拦截规则


    添加拦截规则

最最重要的 - -

  • 上面写那么多其实都是废话.....既然你看到这里了, 我就告诉你-> 我的目的其实是去看小电影
    小电影上有个post去验证返回结果是false, 不让我看= =, 我就用这个改为了然后可以看了, 然后感觉还不错= =
    分享一下...
    了解更多看这里
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容