如何快速定位未知网页js代码中的函数?
发布于 作者:苏南大叔 来源:程序如此灵动~大家都知道,网页的前端代码都是运行在客户端的浏览器里面的。如果说想保密代码逻辑的话,是很困难的。如果另外的一个程序员诚心去分析你的代码的话,基本上来说,是防不住的。当然,后来有了代码混淆的概念,使得这种情况有所缓解。即使没有办法保密代码,也会使得第三方试图分析代码的行动,变得异常困难。
本文中,苏南大叔将利用chrome
的开发者工具,对一些js
函数进行定位。当然,这些方法并不是百试百灵的,需要具体问题具体分析,这里就是提供一个思路而已。测试环境是chrome@86.0.4240.75
。本文说的是分析别人的线上代码,自己没有完整代码,对可分析的代码,也是一无所知的。
基本代码
这里以下面的html
代码来举个例子吧。假设可以看到函数名称是:execute_javascript()
。
<button type="button" onclick="execute_javascript('online-run-code-1', this)">run</button>
那么,就可以在js
代码中,查找execute_javascript
关键词来定位,但是.js
代码众多,很难查找。以前,苏南大叔都是把代码另存为本地,然后在利用编辑器全局查找的。不过,这不是本文的主要思路。
利用console
输出
如何打开开发者模式,这里就不说了啊,不会的自己去面壁。通过查看dom
节点,一般来说,可以看到你的目标函数名称。但是,却无法通过点击等方式,快速跳转到函数定义。这个时候,可以在当前页面的开发者工具里面,输入如下代码(execute_javascript
是目标函数名):
console.log(execute_javascript)
然后点击出来的函数体,就可以快速定位到函数定义了。很简单是吧。大多数情况下,操作到这里就可以解决问题了。
利用事件断点
如果您所分析的代码,并没有明显地表述出函数名称。也就是说,通过js
文件,动态绑定事件或者匿名函数的情况。那么,您可能无法快速获得函数名称,那么,您可以选取合适的事件进行拦截。比如click
事件。切换到sources
标签,定义要拦截的事件吧。如下图所示:
或者利用xhr
的地址,设置断点。如下图所示:
定义好断点事件后,比如最常见的点击事件是mouse > click
,再去手工触发你要观察的页面事件,然后就可以断点到对应的函数。当然,可能您看到的并不是您想要的,那么请使用步进等调试功能,进行代码查看。
同时,您还可以利用代码格式化功能,使得代码更加容易查看。
步进功能
主要有以下几个功能,大家自己试试。
f8
恢复/暂停f9
单步执行f10
单步执行,遇到子函数并不进去,将子函数执行完并将其作为一个单步f11
单步执行,遇到子函数就进去继续单步执行shift+f11
直接跳出当前的函数,返回父级函数
利用blackbox
排除代码
在步进的过程中, 您可能会发现进入一些没有啥意义的代码中,扰乱视线。这里,可以利用这个blackbox
功能,可以排除特定的js
文件,注意:这里的屏蔽单位是某个具体的js
文件。
比如:大多数情况下,jquery
就是个应该被blackbox
的文件。否则,会强烈干扰视线。
解除已定义的blackbox
如果切换到被拦截的.js
文件的时候,在界面顶部,有解除的按钮。右键菜单,也有stop blackbox
的菜单。
当然,也可以在设置菜单里面,查看到所有的blackbox
信息,并删除对应的设置。
相关链接
- https://newsn.net/say/chrome-screenshot.html
- https://newsn.net/say/chrome-f12-console.html
- https://newsn.net/say/safari-f12.html
- https://newsn.net/say/f12-format-js.html
总结
在本文中,苏南大叔主要阐述的是一种思路,可以用于分析第三方网页的未知逻辑。辅助分析而已,希望会对你有帮助。
更多chrome
的文章,还请查看苏南大叔的博客:
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。