快速注入JS 随意跨域 就用BaibianJS(百变JS)

实在是找不到一个自己喜欢的英文单词来诠释这个小工具,BaibianJS(百变JS) is a little and amazing mini chrome extension!It will help you to inject js and send cross domain xhr request by setting Access-Control-Allow-Origin.百变JS是一个小巧实用的Chrome插件,主要2个功能,1是能帮您任性注入JS,2是通过让您任性跨域!

为什么会有BaibianJS

实战背景

要求爬取所有接口规格,找到带有特定参数的接口。

为了爬取接口进行分析,用到了hookAjax.js(有bug,有小影响),但是为了省事就将就用了。但是hook js需要注入js,同时结果需要存储到自己的数据库里,于是经过几天的探索,整理出一个BaibianJS。你可能看到的结果就一个小巧的Chrome插件,但是过程却很曲折。

我们原来的尝试过的方案(踩过的坑):

1.winform+webbrowser 通过js调winform,能跨域,js替换上出莫名其妙的问题。搬来fiddler进行请求模拟替换js,js注入进去了,但是还是有些bug问题,好像是hookAjax对ie的兼容问题。折腾了许久,此方案没有完全执行下去。因为有点厌倦了webbrower的调试,感觉不爽,也许自己的调试方式不对。

2.chrome+fiddler

用Fiddler替换掉js是没有问题,成功将jq.js替换成了hook.js(实际是hookAjax.js+jq.js),但是收集完成接口请求后,保持数据成了问题,提示跨域!采用动态生成script标签的形式跨域到是成功了,不过,传的数据过多,就报错了。URL毕竟是有长度限制。只是想用<iframe/>在内嵌一个页面,实现get转post,还未实战,不过,理论上是完全OK.

3.纯Chrome插件方案

Chrome插件是可以直接监控请求的,但是…嗯…不知道为什么有点晕晕的,没有用这个方案。因为对Chrome插件还是了解的一半一半的,时间有限,就不深挖了。

4.反向代理方案+

反向代理方案主要是通过反向代理服务器替换掉目前js,主要是jq.js,换成改造后的带hook的js,将一个存数据的请求反向配置到自己的站点。理论上也是完美的。虚拟机里的centos 7也安装了一个反向代理环境,不过,虚拟机吃内存,就…跳过了。

5.Chrome插件BaibianJs+hookAjax 【当前方案,已验】

用BaibianJS实现了反向代理的效果,直接配置替换掉原站的jq.js,换成注入后的js,同时BaibianJS关掉了跨域限制,直接将数据存到自己的站点

BaiBianJS充分利用了Chrome Extension的机制,几行代码就实现了。

=====看代码啦==============================

chrome.webRequest.onBeforeRequest.addListener(
function(info) {
//here to set your magic hook js
//在这里设置你修改过的js,比如把自己的代码放到jq的最下面
return {redirectUrl:’http://localhost:6366/hook.min.js’};
},
{
// here to set which js be replaced
//这里是设置哪个js要被替换掉,从jq下手,最好了
urls: [
“http://www.jishudao.com/js/jquery-1.7.1*”
],
types: [“script”]
},
[“blocking”]);
//if you need to change more,add a new Listener

//set Access-Control-Allow-Origin
chrome.webRequest.onHeadersReceived.addListener(function(details) {
details.responseHeaders.push({name:’Access-Control-Allow-Origin’,value:”*”});
console.log(details.responseHeaders)
return {responseHeaders:details.responseHeaders};
},{urls: [“<all_urls>”]}, [“responseHeaders”,”blocking”]);

=====看代码啦==============================

BaibianJS的定位

BaibianJS是给开发人员的一个小插件产品,使用上不是傻瓜式的,看不懂js的,可以绕行了。也没有提供管理界面,感觉这么简单的使用就好了。

How to use

Step 1

下载BainbianJS插件文件,background.js\manifest.json,真正起作用的就这两个,放到一个BianbianJS文件夹里。进入Chrome Extension插件界面,选加载安装,选择BianbianJS文件夹,安装成功。

如何进入Chrome Extension插件管理界面

在谷歌浏览器中输入 chrome://extensions/

Step 2

安装成功后,要依据自己的使用情况修改backgroud.js中的配置,配置要替换的JS,非常简单,就不废话了。修改JS记得重载加载插件哦!

直接Github下载代码  https://github.com/Lancker/BaibianJS

与我互动

请关注我的公众号

约吗公众号

捐助

如果你觉得不错,想捐助献爱心,请扫码 微信赞赏码