如何让 JS 代码不可断点
绕过断点
调试 JS 代码时,单步执行(F11)可跟踪所有操作。例如这段代码,每次调用 alert 时都会被断住:
debugger
alert(11)
alert(22)
alert(33)
alert(44)
有没有什么办法能让单步执行失效,一次执行多个操作?
事实上有一些巧妙的办法。例如通过数组回调执行这些 alert 函数:
debugger
[11, 22, 33, 44].forEach(alert)
这样只有 forEach 之前和之后会被断住,中间所有 alert 调用都不会被断住。
由此可见,通过 内置回调 执行 原生函数,调试器是无法断住的!
利用这个特性,我们可将一些重要的操作隐藏起来,从而能在调试者眼皮下悄悄执行。
应用案例
主流浏览器的调试器允许拦截特定事件,例如触发 mousemove 时断点;
addEventListener('mousemove', e => {
console.log(e)
})
因此调试者很容易找到事件回调函数,从而分析相应的处理逻辑。
如何防止事件回调被断点?这就需要前面讲解的黑科技了。我们对上述代码稍微修改,将自己的回调函数改成原生函数:
addEventListener('mousemove', console.log)
这时,每次触发 mousemove 事件都不会被断住!
然而现实中的回调逻辑远比 console.log 复杂,又该如何应用?
事实上我们可以做一些调整,将事件的回调逻辑变得足够简单,简单到只需一个操作 —— 保存结果:
const Q = []
addEventListener('mousemove', Q.push.bind(Q))
现在触发 mousemove 事件不仅不会被断住,而且还能将结果追加到数组 Q 中。
至于读取则有很多办法,例如渲染事件、空闲事件、定期轮询等。
setInterval(() => {
for (const v of Q) {
console.log(v)
}
Q.length = 0
}, 20)
如果 JS 只是采集信息而没有交互,可用更低的读取频率。
属性访问
前面的案例都是函数调用,例如 alert 函数、数组 push 函数。但属性读写又该如何实现?例如:
window.onclick = function() {
document.title = 'hello'
}
其实也不难。属性读写本质上是 getter 和 setter 函数的调用。例如:
const setter = Object.getOwnPropertyDescriptor(Document.prototype, 'title').set
setter.call(document, 'hello')
当然这样会立即执行,而不是在 onclick 事件时执行。
因此我们可以给 setter 柯里化,创建一个已绑定参数的新函数,作为事件回调:
const setter = Object.getOwnPropertyDescriptor(Document.prototype, 'title').set
onclick = setter.bind(document, 'hello')
这样只有在点击时才会执行。并且调试器的 click 事件断点不会触发。
对象属性
除了原型上的属性,普通对象的属性又该如何访问?例如:
const obj = {}
window.onclick = function() {
obj.name = 'jack'
}
事实上 JS 基本操作都可通过 Reflect API 实现。例如:
const obj = {}
Reflect.set(obj, 'name', 'jack')
不过需注意的是,Reflect.set
的参数必须是 3 个,多一个也不行。例如:
const obj = {}
Reflect.set(obj, 'age', 20, {})
obj.age // undefined
这样将其柯里化成事件回调函数是有问题的,因为事件回调还会加上一个 event 参数。
不过 Reflect.apply
方法倒没有这个限制,往后再加几个参数也不影响执行:
Reflect.apply(alert, null, ['hello'], 100, 200, 300)
因此我们可通过 Reflect.apply
执行 Reflect.set
,从而过滤多余的参数:
const obj = {}
Reflect.apply(Reflect.set, null, [obj, 'age', 20])
obj.age // 20
然后将其柯里化成事件回调函数:
const obj = {}
onclick = Reflect.apply.bind(null, Reflect.set, null, [obj, 'age', 20])
这样即可通过原生函数执行 obj.age = 20,并且 click 事件断点依然不会触发。
多个操作
前面讲解的都是单个操作,是否可以一次执行多个操作?例如:
console.log('hello')
console.log('world')
alert(123)
最容易想到的办法,就是将每个操作放入数组,然后通过 forEach
回调 Reflect.apply
执行每个操作:
[
Reflect.apply.bind(null, console.log, null, ['hello']),
Reflect.apply.bind(null, console.log, null, ['world']),
Reflect.apply.bind(null, alert, null, [123]),
].forEach(Reflect.apply)
幸运的是 forEach
的回调函数和 Reflect.apply
函数都是 3 个参数,并且第 3 个都是数组类型:
forEach_callback(element, index, array)
Reflect.apply(target, thisArgument, argumentsList)
这样通过 forEach
回调 Reflect.apply
是完全没问题的。于是可以一次执行多个操作,并且都无法断住!
除了上述提到的,其实还有更多玩法,大家可发挥想象~
(2021/11/01)
如何让 JS 代码不可断点的更多相关文章
- Firebug调试js代码
Firebug功能异常强大,不仅可以调试DOM,CSS,还可以调试JS代码,下面介绍一下调试JS. 1.认识console对象 console对象是Firebug内置的对象,该对象可以在代码中写入,可 ...
- js数组特定位置元素置空,非null和undefined,实现echarts现状图效果;谷歌格式化压缩js代码
一.想要实现eCharts线状图表的断点效果,如图(后来又查到数据格式为data:['-', 2, 3,'-' , 5, 6, 7]:也可以断点显示) 这种效果,在设置数据的时候应该是这样: data ...
- Javascript系列: Google Chrome调试js代码(zz)
你 是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~, ...
- webpages框架使用@razor语法向js代码传递Json字符串
进入web开发时间太短,一个人尝试着做了几个初级项目,遇到了太多的困难.尽管不是学开发专业的,仅为爱好所以硬着头皮坚持了下来. 将遇到的问题记录下来,备查. 使用vs2015中asp.net razo ...
- 初探内联方式的 onload="doSomething()"为何要加"()"?而js代码的 onload="doSomething" 和 addEventListener 为何不加"()"?
问题引入:在看<Jquery基础教程>第四版的时,P34页有这样一段话 引用函数与调用函数 这里在将函数指定为处理程序时,省略了后面的圆括号,只使用了函数名.如果带着圆括号,函数会被立即调 ...
- 如何用浏览器调试js代码
按F12打开调试工具
- Google Chrome调试js代码
你 是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~, ...
- 如何查找元素对应事件的js代码,检测定位js事件
比如一张图片当鼠标放到上面时,图片改变.想找到这个事件对应的js代码,假设另存为html之后,文件夹中有.js文件. 如果你会调试,可以用打开浏览器的调试功能,以chrome为例,按F12打开调试窗口 ...
- js分析 快速定位 js 代码, 还原被混淆压缩的 js 代码
-1.目录 0.参考 1.页面表现 2. 慢镜头观察:低速网络请求 3. 从头到尾调试:Fiddler 拦截 index.html 并添加 debugger; 4. 快速定位 js 代码 5. 还原被 ...
随机推荐
- TinyMCE简介
TinyMCE是一款开源.易用.UI时新的富文本编辑器. 插件丰富,自带插件基本满足要求 可扩展性强,可自定义功能 界面好看,符合现代审美 提供经典.内联.沉浸无干扰三种模式 官网:https://w ...
- leetcode 524. Longest Word in Dictionary through Deleting 通过删除字母匹配到字典里最长单词
一.题目大意 https://leetcode.cn/problems/longest-word-in-dictionary-through-deleting 给你一个字符串 s 和一个字符串数组 d ...
- 解决windows server 2008r2服务器自动关机
问题 具体表现就是系统自动关机,网上说是开机后2小时就会自动关机 系统版本: 解决 PsTools下载 解压:PSTools.zipg,如解压到C:\PSTools目录下 执行如下命令,打开注册表 W ...
- Android——RelativeLayout
代码:<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android= ...
- Random 中的Seed
C#中使用随机数 看下例 当Random的种子是0时 生成的随机数列表是一样的 也就是说当seed 一样时 审查的随机数时一样的 Random的无参实例默认 种子 时当前时间 如果要确保生成的随机数不 ...
- [WUSTCTF2020]颜值成绩查询-1
分享下自己在完成[WUSTCTF2020]颜值成绩查询-1关卡的手工过程和自动化脚本. 1.通过payload:1,payload:1 ,payload:1 or 1=1--+,进行判断是否存在注入, ...
- 记录一个奇葩 bug [Failed to decode JSON object: Expecting value: line 1 column 1 (char 0)]
关于 flask 的一个记录 代码 @auth.login_required @app.route('/add', methods=['POST']) def add(): if request.me ...
- SAP Smart Form 无法通过程序自定义默认打印机问题解决
*&---------------------------------------------------------------------* *& Form FRM_SET_PRI ...
- java程序使用ssl证书连接mysql
1. 在mysql服务器上生成证书 openssl genrsa 2048 > ca-key.pem openssl req -new -x509 -nodes -days 3600 -key ...
- kubernetes集群简单实例搭建
systemctl stop firewalld && systemctl disable firewalldvim /etc/selinux/configSELINUX=disabl ...