上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

[油猴脚本开发指南]Fetch劫持的第二种方式

[复制链接]

163

主题

1157

帖子

638

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
638
发表于 2021-9-22 17:12:55 | 显示全部楼层 | 阅读模式

前言

之前我们已经谈过了fetch劫持,但是由于那个代码相对较为复杂,cxxjackie提供了一个相对简单的方式,并未使用proxy劫持,我们这节课来分析一下。

let oldfetch = fetch;
function fuckfetch() {
    return new Promise((resolve, reject) => {
        oldfetch.apply(this, arguments).then(response => {
            const oldJson = response.json;
            response.json = function() {
                return new Promise((resolve, reject) => {
                    oldJson.apply(this, arguments).then(result => {
                        result.hook = 'success';
                        resolve(result);
                    });
                });
            };
            resolve(response);
        });
    });
}
window.fetch = fuckfetch;

oldfetch保存了原fetch的引用

这时候我们对window.fetch挂载成我们的劫持函数,fuckfetch

因为fetch需要返回一个promise,所以这里我们通过

return new Promise((resolve, reject) => {})

包裹了一下,并且在原fetch函数内调用,并获取返回内容,对其进行一些处理并resolve返回过去。

附注:函数一旦返回一个Promise,我们只考虑输出相同的结果即可,而无须考虑Promise内处理过程的一致性。

        oldfetch.apply(this, arguments).then(response => {
            const oldJson = response.json;
            response.json = function() {
                return new Promise((resolve, reject) => {
                    oldJson.apply(this, arguments).then(result => {
                        result.hook = 'success';
                        resolve(result);
                    });
                });
            };
            resolve(response);
        });

这里我们使用fetch的原函数,通过apply更改了this指针至自身,并且传入了参数。注意这点有一个需要注意的是,我们劫持函数的时候,由劫持函数调用原函数的过程中一定要使用call/apply进行修改this指针,来符合原来的调用过程。

在then后则是我们处理response的过程

            const oldJson = response.json;
            response.json = function() {
                return new Promise((resolve, reject) => {
                    oldJson.apply(this, arguments).then(result => {
                        result.hook = 'success';
                        resolve(result);
                    });
                });
            };

这部分代码是针对某些特定的函数进行过滤,我们可以对网页进行分析以及调试,或去返回内容进行查看,来判断调用了哪些函数。

这里以json为例进行劫持

首先保存了原json的引用

然后修改json属性为一个劫持函数

由于json返回的是一个promise对象,所以我们这里也需要返回一个promise

在promise内依然是对其原json函数进行调用,并修改了this指向以及参数,最后对其结果进行一定的修改,然后通过resolve(result)进行返回。

那么这节课我们就了解到了一个相对较为轻量的fetch劫持方法!

结语

撒花~

已有1人评分好评 油猫币 贡献 理由
懒男孩 + 1 + 5 + 1 ggnb!

查看全部评分 总评分:好评 +1  油猫币 +5  贡献 +1 

混的人。

87

主题

338

帖子

234

积分

版主

Rank: 7Rank: 7Rank: 7

积分
234

猫咪币纪念章活跃会员热心会员三好学生中秋纪念章国庆纪念章

发表于 2021-9-22 17:15:01 | 显示全部楼层
ggnba!!!
提及少年一词,应与平庸相斥!微信公众号——智家乐享
回复

使用道具 举报

163

主题

1157

帖子

638

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
638
发表于 2021-9-22 17:24:38 | 显示全部楼层

好久没看到哥哥了
混的人。
回复

使用道具 举报

5

主题

102

帖子

39

积分

新手上路

Rank: 1

积分
39

中秋纪念章猫咪币纪念章活跃会员热心会员三好学生

发表于 2021-9-22 21:30:03 | 显示全部楼层
按键精灵您肯定知道,他们很多导师都有自己的一套或几套插件,就是一个函数集啦。这对新手非常友好。甚至不需要去了解实现的原理。拖过来直接就可以用。能不能有针对性的做一些这种类似的东西,函数命名规范化。比如网络劫持类,这种叫釜底抽薪式。XMLHttpRequest那个叫红杏出墙式,等等
回复

使用道具 举报

163

主题

1157

帖子

638

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
638
发表于 2021-9-23 05:28:21 | 显示全部楼层
脚本体验师001 发表于 2021-9-22 21:30
按键精灵您肯定知道,他们很多导师都有自己的一套或几套插件,就是一个函数集啦。这对新手非常友好。甚至不 ...

这个是有计划的!其实
准备以后有机会慢慢搞,先集中精力给教程搞完...
呜呜呜,教程东西太他妈多了....
混的人。
回复

使用道具 举报

发表回复

本版积分规则

快速回复 返回顶部 返回列表