diff --git "a/1.Chrome\345\237\272\347\241\200/1.2Chrome\350\260\203\350\257\225\346\212\200\345\267\247\357\274\210\346\237\220\346\230\223\346\273\221\345\235\227\357\274\211.md" "b/1.Chrome\345\237\272\347\241\200/1.2Chrome\350\260\203\350\257\225\346\212\200\345\267\247\357\274\210\346\237\220\346\230\223\346\273\221\345\235\227\357\274\211.md" index 399cdec..7351b44 100644 --- "a/1.Chrome\345\237\272\347\241\200/1.2Chrome\350\260\203\350\257\225\346\212\200\345\267\247\357\274\210\346\237\220\346\230\223\346\273\221\345\235\227\357\274\211.md" +++ "b/1.Chrome\345\237\272\347\241\200/1.2Chrome\350\260\203\350\257\225\346\212\200\345\267\247\357\274\210\346\237\220\346\230\223\346\273\221\345\235\227\357\274\211.md" @@ -1,56 +1,56 @@ -@[TOC](ChormeԼɣ׶ܻ켣JSԣ) +@[TOC](Chorme调试技巧（易盾滑块轨迹JS调试）) -# ChormeԼ -һ˵ҪJSеԵĻNetworkвŷܡݰ֮û棬Ȼˢҳ棬¼searchѰҪļܲȵȡһݰpassword˼ܣΪȫƥͨ±Ƚ϶࣬ǻһЩˣ +# Chorme调试技巧 +一般来说，我们如果想要对JS参数进行调试的话，都是在Network面板中操作。首先清理数据包，之后禁用缓存，然后刷新页面，点击登录，在search中寻找我们需要的加密参数等等。比如一个数据包中有password参数经过了加密，因为全局匹配的搜索结果通常情况下比较多，所以我们会加一些符号来过过滤： - - password + - password： - password = -ǸķDz鿴NetworkѡݰInitiatorһеĶջϢ +但是更方便的方法是查看Network选项卡中数据包的Initiator一栏中的堆栈调用信息。 -![ͼƬ](https://img-blog.csdnimg.cn/20200622093014439.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05vQXR0YWNr,size_16,color_FFFFFF,t_70#pic_center) -## ϵ +![在这里插入图片描述](https://img-blog.csdnimg.cn/20200622093014439.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05vQXR0YWNr,size_16,color_FFFFFF,t_70#pic_center) +## 断点 -һջϢȥǿSources֮е¶ϵ㡣Ȼҳϵ¼ť¼ұߵCall Stackȥ鿴ǵĹؼϢʲôط +我们任意点击一个堆栈信息进去们可以在Sources面板之中点击序号栏下断点。然后点击页面上的例如登录按钮让它触发事件，我们配合右边的Call Stack去查看我们的关键信息到底在什么地方。 -ҲѡȥXHRϵ㣬ΪXHRǾͿԸһXHRURLSources½XHR BreakpointsͿڷҳXHRʱϵ㡣 +我们也可以选择去下XHR断点，因为许多请求是XHR请求，我们就可以复制一下XHR包的URL，在Sources面板中新建XHR Breakpoints就可以在发起网页这个XHR请求的时候断点。 -ҲSourcesУѡұߵEvent Listener Breakpointsһ¼ϵ㡣ȽϳõMouseߵclickϵ㣬ΪҪץܲǵťŻᴥġ +我们也可以在Sources面板中，选择右边的Event Listener Breakpoints，下一个事件断点。比较常用的是Mouse里边的click断点，因为我们要抓的许多加密参数包是点击按钮后才会触发的。 -![ͼƬ](https://img-blog.csdnimg.cn/202006220937140.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05vQXR0YWNr,size_16,color_FFFFFF,t_70#pic_center) +![在这里插入图片描述](https://img-blog.csdnimg.cn/202006220937140.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05vQXR0YWNr,size_16,color_FFFFFF,t_70#pic_center) -¼ϵͨһʼHTMLҳ棬ǿһȥ˽¼ܡ +这里的事件断点通常会断在一开始的HTML页面，我们可以一步步深入去了解事件加密。 -ͨSources¶ϵ㣬ֱӵӦɡҲѡϵContional BreakpointҲǷijٶϵ㣬޲ϵ㡣 +通常我们在Sources面板中下断点，直接点击相应的序号栏即可。不过我们也可以选择条件断点Contional Breakpoint，也就是符合某种条件再断点，区别于无差别断点。 -![ϵ](https://img-blog.csdnimg.cn/20200622100035101.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05vQXR0YWNr,size_16,color_FFFFFF,t_70#pic_center) -ıʽΪͻжϵ㣬`password=='123'`123ʱͻжϵ㡣ͨѭֻҪ鿴һνͿԱһԽѭ +![条件断点](https://img-blog.csdnimg.cn/20200622100035101.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05vQXR0YWNr,size_16,color_FFFFFF,t_70#pic_center) +当你输入的表达式结果为真就会进行断点，比如`password=='123'`，当我们输入的密码是123的时候就会进行断点。这个通常用于有循环的情况，我们只需要查看最后一次结果，这样就可以避免一步步调试进入循环。 -ϵDzʽֱ`console.log(password)`Ȼǻһ൱һconsole׮ҳһʼصIJҲԵ֪ұ˶ϵ㿨١ֶϵͨڻ֤룬켣ÿһDzÿƶһһΣʹconsole׮ͿԵõһӡЧ +而且条件断点我们并不必须输入表达式，可以直接输入`console.log(password)`，这样虽然不会断下来，但是会有一个输出。这相当于一个console暗桩，这样即便是页面一开始加载的参数我们也可以得知，而且避免了断点卡顿。这种断点通常用于滑块验证码，滑块轨迹的每一次输出我们不可能每次移动一次让它卡顿一次，使用console暗桩就可以得到一个打印输出的效果。 -## -ǿconsoleн²ԪѡijһԽڵ㣬֮console`monitorEvents($0)`Ϳڿ̨ص¼Ϣһ¼ü¼Ƚ鷳ǿдΪ`monitorEvents($0,"click")`ֻclick¼ +## 监听 +我们可以在console中进行以下操作，首先在元素面板选中某一调试节点，之后在console中输入`monitorEvents($0)`，就可以在控制台输出相关的事件信息，这就是一个事件监听。如果觉得监听所有事件比较麻烦，我们可以写为`monitorEvents($0,"click")`，这样就只会监听click事件。 -ڵijһǿд`monitor($0.onClick)`Ǿͻǰڵĵ +如果是想监听节点的某一方法，我们可以这样写`monitor($0.onClick)`，这样我们就会监听当前节点的点击方法。 -ʹ`watch`ԼSourceswatchĿ߿Լʱ仯ǿpasswordܲڶϵһ룬ֱpasswordֵı䣬ǾͿԶλJSܵص㡣 +使用`watch`还可以监听变量。在Sources面板中有watch栏目，里边可以监听变量何时变化。比如我们可以添加password加密参数，在断点的配合下一步步深入，直到password数值改变，我们就可以定位到具体的JS加密地点。 -## ׶ܻ켣 +## 易盾滑块轨迹调试 -Ȼ飬Networkץõջãһ¶ϵ㡣 -![ͼƬ](https://img-blog.csdnimg.cn/20200622103405480.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05vQXR0YWNr,size_16,color_FFFFFF,t_70#pic_center) -鿴ջϢ룬ǷpߵdatadataֵRҪģ¶ϵ㡣![ͼƬ](https://img-blog.csdnimg.cn/20200622103945165.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05vQXR0YWNr,size_16,color_FFFFFF,t_70#pic_center) -ϵкǿԷRֵt.dataǼ¶ϵ +我们首先滑动滑块，再Network里边抓包，得到堆栈调用，再最后一步下断点。 +![在这里插入图片描述](https://img-blog.csdnimg.cn/20200622103405480.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05vQXR0YWNr,size_16,color_FFFFFF,t_70#pic_center) +查看堆栈信息步入，我们发现了p里边的data，data赋值的R是我们需要的，我们在这里下断点。![在这里插入图片描述](https://img-blog.csdnimg.cn/20200622103945165.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05vQXR0YWNr,size_16,color_FFFFFF,t_70#pic_center) +断点运行后我们可以发现R的数值来自于t.data，我们继续下断点 -![ͼƬ](https://img-blog.csdnimg.cn/20200622104140718.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05vQXR0YWNr,size_16,color_FFFFFF,t_70#pic_center) -ǵ֪eҪֵǽһ֮޷ȡǰ¶ϵ㡣 +![在这里插入图片描述](https://img-blog.csdnimg.cn/20200622104140718.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05vQXR0YWNr,size_16,color_FFFFFF,t_70#pic_center) +我们得知e是我们需要的值，但是进一步跟进之后无法获取到，我们在它前方下断点。 -![ͼƬ](https://img-blog.csdnimg.cn/20200622104903100.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05vQXR0YWNr,size_16,color_FFFFFF,t_70#pic_center) -ҵdataܵĵطnֵǾܵġnȻʹjoinһһ飬ϱߵtraceData +![在这里插入图片描述](https://img-blog.csdnimg.cn/20200622104903100.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05vQXR0YWNr,size_16,color_FFFFFF,t_70#pic_center) +最终找到了data加密的地方，n的值都是经过加密的。n既然使用了join，那一定是一个数组，所以我们搜索上边的traceData。 -![ͼƬ](https://img-blog.csdnimg.cn/20200622105023587.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05vQXR0YWNr,size_16,color_FFFFFF,t_70#pic_center) +![在这里插入图片描述](https://img-blog.csdnimg.cn/20200622105023587.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05vQXR0YWNr,size_16,color_FFFFFF,t_70#pic_center) -console`monitor(Array.prototype.push)`ǾͿ֪ӵĹ켣ϢˡȱDzܶλֻܲ鿴ҪһλǿԲ`traceData.push`ҵյļJSﲻ룬Լ˼ҵҪصأʹ`unmonitor(Array.prototype.push)` +在console里边输入`monitor(Array.prototype.push)`，我们就可以知道数组添加的轨迹信息了。但是这个监听的缺点是不能定位，只能查看。如果要进一步定位，我们可以查找`traceData.push`，找到最终的加密JS函数，笔者在这里不再深入，读者稍加思考即可找到。如果要关掉监控，则使用`unmonitor(Array.prototype.push)`。 -![ͼƬ](https://img-blog.csdnimg.cn/20200622105341767.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05vQXR0YWNr,size_16,color_FFFFFF,t_70#pic_center) +![在这里插入图片描述](https://img-blog.csdnimg.cn/20200622105341767.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05vQXR0YWNr,size_16,color_FFFFFF,t_70#pic_center)