|
1,首先要说的肯定是 Proxy 了,介绍就不说了,直接上代码:
window = new Proxy(global, { get: function (target, key, receiver) { console.log("关注公众号【妄为写代码】window.get", key, target[key]); // console.log("window.get", key); if (target[key] instanceof Object){ return new Proxy(target[key], { get: function (_target, _key, _receiver) { console.log("window.get", key, _key, _target[_key]); // console.log("window.get", key, _key); return _target[_key]; }, set: function (_target, _key, _value, _receiver) { console.log("window.set", key, _key, _value); // console.log("window.set", key, _key); _target[_key] = _value; } }) } return target[key]; }, set: function (target, key, value, receiver) { console.log("关注公众号【妄为写代码】window.set", key, value); // console.log("window.set", key); target[key] = value; } }); window.a = {}; window.a; window.location = {a: 2}; window.location.a; window.b = {a: 2}; window.b.a; location.port; console.log("--------------"); window.location.port // 20210602更新优化代码
node 环境执行结果:
重点关注【嵌套Proxy】和【重复Proxy】
2,对象属性的 hook 方式
先在浏览器中获取window的属性:
重点关注【未在固定范围的新增属性】和【对比两种方式的 location.port】和【多层属性的获取 window.location.port】
3,这个监控的作用就不用说了吧,就是大家常说的缺哪补哪需要用到的,现在补环境的场景越来越多了,一些知名 js 反爬产品,就可以用这个思路,环境补的好,可以到处用,还能省好多事,一举多得。
嗯,我也准备学大家开始【佛系】社群运营了,大家可以扫码进群一起交流技术,nice to meet you.
5,补充监控console
var mylog = console.log; var myconsole = console; Object.defineProperty(window, 'console', { get: function() { mylog('get console'); return myconsole; }, set:function(val){ mylog('set console'); myconsole = val; }}); console = new Proxy(myconsole, { get: function (target, key, receiver) { mylog("关注公众号【妄为写代码】console.get", key, target[key]); return target[key]; }, set: function (target, key, value, receiver) { mylog("关注公众号【妄为写代码】console.set", key, value); target[key] = value; } });
所谓的补环境基本皆是由此而来的,发散思维你将拥有的更多
4,补充
[ttreply]
[/ttreply]
|
本帖子中包含更多资源
您需要 登录 才可以下载或查看,没有账号?立即注册
x
|