凡是必有因

博主写浏览器插件嘛,难免要拿数据,怎么拿呢。经过摸索可以hook掉一些window自带的api来拿数据。下面放出源代码

有因必有果

function JSONPHook(urls,callback,callName='callback'){
                function isExit(url){
                    for (let it of urls){
                        if(url.indexOf(it)!==-1){
                            return true;
                        }
                    }
                }
                let createElement=document.createElement;
                document.createElement=function(name){
                    let xhr=createElement.call(document,name);
                    if(name==='script'){
                        Object.defineProperty(xhr, 'src', {
                            configurable: true,
                            enumerable: true,
                            set: function(n) {
                                //拿到链接,判断是为hook链接
                                if(isExit(n)){
                                    // 设置callback
                                    try{
                                        let baseCallbackName=eval("(n.match(/"+callName+"=[\\s\\S]*?&|"+callName+"=[\\s\\S]*/)[0])").replace(callName+'=','');
                                        if(baseCallbackName[baseCallbackName.length-1]==='&')baseCallbackName=baseCallbackName.substring(0,baseCallbackName.length-1);
                                        let callbackName='jsonp'+new Date().getTime();
                                        window[callbackName]=function(json){
                                            let args = [].slice.call(arguments);
                                            //调用callback
                                            if(callback)callback.apply(xhr,args);
                                            //调用返回的
                                            if(typeof window[baseCallbackName]==='function')window[baseCallbackName].apply(xhr,args);
                                            window[callbackName]=undefined;
                                        };
                                        n=n.replace(baseCallbackName,callbackName);
                                    }catch (e) {}
                                }
                                //给真正的tag赋值
                                this.setAttribute('src',n)
                            },
                            get:function(){
                                return this.getAttribute('src');
                            }
                        });
                    }
                    return xhr;
                }
            }

如何使用

怎么使用呢?其实也很简单只需要传入三个参数!
参数一:urls,就是匹配的url列表
参数二:callback,回调函数,只要urls列表中存在的都会传入此方法,也就是说返回的数据都会进入到这里
参数三:callName,就是jsonp的callback名字。
比如拿淘宝店铺数据,代码如下

JSONPHook([
    "://shopsearch.taobao.com/search?data-key=s",
    "://shopsearch.taobao.com/search?data-key=isb",
    "://shopsearch.taobao.com/search?data-key=loc",
    "://shopsearch.taobao.com/search?data-key=rele_field",
    "://shopsearch.taobao.com/search?data-key=favor",
    "://shopsearch.taobao.com/search?ajax=true",
],function(json){
    console.log(json);
},'callback');

博主的一些碎碎恋

如果大家有问题可以加我的群哦,群号在博主简绍里面。欢迎交流,和指出不足之处。

标签: 通过hook拿jsonp数据

添加新评论