【js逆向专题】2.浏览器调试本领
小节目的:[*]熟悉 开辟者工具的使用
[*]熟悉 代码断点的方式
[*]熟悉 网页debugger实现方式
一. 浏览器开辟者工具
1. element元素面板
[*]展示浏览器渲染之后的页面
2. network网络面板
[*]浏览器请求的数据都会加载在网络面板
3. console控制台面板
[*]可以在控制台调试你对应的代码
4.source源代码面板
[*]网页:当前网站加载的源代码位置
[*]工作区:用不到,前端工程师会用
[*]替换:替换网站代码信息,访问网站的时间,就是走的自己替换的文件
[*]代码段:可以编写测试代码
5. 应用面板
[*]用来查看和删除cookie信息
二. 断点
1. 什么是断点
[*]开辟职员可以通过在源代码中设置断点来控制步伐执行流程。一旦步伐执行到设置的断点位置，它就会在那里停息，使得开辟职员可以逐步执行代码、观察变量的值，并举行其他调试操作。
[*]他的作用是可以帮助我们去定位数据加密的位置.
2. 断点方法
1. DOM事件断点定位加密
[*]DOM事件断点是在浏览器的开辟者工具中提供的一种调试工具，用于停息 JavaScript 执行当特定范例的 DOM 事件被触发时。
[*]使用 DOM事件断点，你可以指定在哪些 DOM 事件上设置断点，好比点击（click）、改变（change）、加载（load）等。一旦设置了 DOM 事件断点，当相应的事件被触发时，浏览器会自动在触发事件的 JavaScript 代码行上停息执行，从而允许你检查当前的步伐状态、变量值，以及执行堆栈信息等。
[*]执行的比较靠前 距离加密函数比较远
2. XHR断点定位加密
[*]XHR断点是在浏览器的开辟者工具中设置的一种调试工具，用于在举行XMLHttpRequest（XHR也就是我们说的ajax请求）请求时停息JavaScript执行。
[*]执行比较靠后 距离加密函数相对较近 可以根据栈快速定位
[*]留意：非XHR发送的就断不住
3. 网站加载时间轴
加载Hmtl - 加载JS - 运行JS初始化 - 用户触发某个事件 - 调用某段JS - 加密函数 - 给服务器发信息（XHR-SEND） - 接收到服务器数据 - 解密函数(如果数据加密的话) - 刷新网页渲染
4. 断点示例
[*]网址: aHR0cHM6Ly9vYXV0aC5kLmNuL2F1dGgvZ29Mb2dpbi5odG1s
[*]关键字定位
[*]跳过子函数（次态函数）执行（只在主函数内一步一步执行，不进入子函数内部）
[*]进入子函数（次态函数）执行（在主函数内部一步一步执行，假如碰到子函数，会跳转到子函数内部一步一步执行）
[*]跳出当前函数，回到调用位置
[*]单步执行，会进入到函数内部 更加的细致
[*]屏蔽断点
三. 方法栈
栈是一种先进后出的特殊线性表结构
调用栈是解析器的一种机制，可以在脚本调用多个函数时，通过这种机制，我们可以大概追踪到哪个函数正在执行，执行的函数体又调用了哪个函数。
[*]当脚本要调用一个函数时，解析器把该函数添加到栈中并且执行这个函数。
[*]任何被这个函数调用的函数会进一步添加到调用栈中，并且运行到它们被上个步伐调用的位置。
[*]当函数运行结束后，解释器将它从堆栈中取出，并在主代码列表中继续执行代码。
1. 代码说明
function cc(a, b) {
console.log(a + b)
console.log('调用的cc函数')
}
function bb(a, b){
console.log(a + b)
cc()
console.log('调用的bb函数')
}
function aa(a, b) {
bb(a, b)
console.log('调用的aa函数')
}
aa(1, 2)
2. 案例
[*]网址:aHR0cHM6Ly9vYXV0aC5kLmNuL2F1dGgvZ29Mb2dpbi5odG1s
[*]xhr断点调试看栈
四. debugger原理
1. 示范样例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<h1 id="box"></h1>
<body>
<script>
var ss = document.getElementById('box')
function ff() {
debugger;
}
setInterval(ff,100);
ss.innerHTML = "大家晚上好";
</script>
</body>
</html>
2. 浏览器过debugger
[*] 不在此处停息
[*]鼠标右击代码行号,划一不再此处停息
https://i-blog.csdnimg.cn/direct/c6f722ff6b14490eb3d4b6e11fd68d85.png
[*] 编辑断点
[*]当界说器运行到这个debugger这个代码的时间，那么这个时间它为true，它肯定执行我们的debugger代码，那我们可以用浏览器的功能给他改成false
[*]鼠标右击行号,添加条件断点,添加一个不成立的条件
[*]写个1===0的先验条件，永远为假，就永远不会进入这个断点了。
https://i-blog.csdnimg.cn/direct/69a19700642f4228862c676e0787ecc6.png
3. 方法置空过debugger
[*]无限debugger产生的缘故原由是第七行代码ff这个函数造成的,所以我们可以重写这个函数,使无限debugger失效.在控制台中输入function ff(){}即可
[*]注：一定要在debugger进入之前
setInterval = function(){}
https://i-blog.csdnimg.cn/direct/61e5c3003a2e400fa599bc2dc702bee5.png
4. 替换文件过debugger
[*]把JS文件生存到本地修改，修改范围主要是将debugger相干的代码删除或者改写，可以使用文件替换方式
[*]用pycharm启动的文件,后缀需要删除掉
https://i-blog.csdnimg.cn/direct/a10b3a41bc8242a3a918a5788828a2c4.png
5. 注入代码过debugger
[*]在控制台注入代码
[*]网址: aHR0cHM6Ly93d3cuc3BvbGljeS5jb20v
[*]这样的网站,鼠标右击的方式替换网站会非常的卡,他会不断异步的去创建文件,把浏览器的资源都占用
[*]constructor: 构造函数
(c(c, c))(c)
[*]这行代码创建的debugger,那么我们可以根据JavaScript的特点把他的这个方法改写一下
var _constructor = constructor;
Function.prototype.constructor = function(s) {
if ( s== "debugger") {
console.log(s);
return null;
}
return _constructor(s);
}
[*]有调用constructor方法我们判断他传递的参数是不是debugger,要是debugger的话就把这个方法改写,要不是的话就是用源方法返回
通知
由于安全考核缘故原由，此节以后内容涉及到的全部链接均采用浏览器的btoa函数举行base64处理，还原调用atob即可。
结语
以上就是关于js逆向技术中的浏览器调试本领全部内容了，欢迎各位在批评区讨论交流，有任何js逆向、数据采集相干需求也可以后台或V加regentwan与我接洽哟~
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]