大家都知道,网页的前端代码都是运行在客户端的浏览器里面的。如果说想保密代码逻辑的话,是很困难的。如果另外的一个程序员诚心去分析你的代码的话,基本上来说,是防不住的。当然,后来有了代码混淆的概念,使得这种情况有所缓解。即使没有办法保密代码,也会使得第三方视图分析代码的行动,变得异常困难。

苏南大叔:如何快速定位未知网页js代码中的函数? - chrome-f12-more
如何快速定位未知网页js代码中的函数?(图12-1)

本文中,苏南大叔将利用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代码众多,很难查找。以前,苏南大叔都是把代码另存为本地,然后在利用编辑器全局查找的。不过,这不是本文的主要思路。

苏南大叔:如何快速定位未知网页js代码中的函数? - html-dom
如何快速定位未知网页js代码中的函数?(图12-2)

利用console输出

如何打开开发者模式,这里就不说了啊,不会的自己去面壁。通过查看dom节点,一般来说,可以看到你的目标函数名称。但是,却无法通过点击等方式,快速跳转到函数定义。这个时候,可以在当前页面的开发者工具里面,输入如下代码(execute_javascript是目标函数名):

console.log(execute_javascript)

苏南大叔:如何快速定位未知网页js代码中的函数? - console-js
如何快速定位未知网页js代码中的函数?(图12-3)

然后点击出来的函数体,就可以快速定位到函数定义了。很简单是吧。大多数情况下,操作到这里就可以解决问题了。

苏南大叔:如何快速定位未知网页js代码中的函数? - console-js-2
如何快速定位未知网页js代码中的函数?(图12-4)

利用事件断点

如果您所分析的代码,并没有明显地表述出函数名称。也就是说,通过js文件,动态绑定事件或者匿名函数的情况。那么,您可能无法快速获得函数名称,那么,您可以选取合适的事件进行拦截。比如click事件。切换到sources标签,定义要拦截的事件吧。如下图所示:

苏南大叔:如何快速定位未知网页js代码中的函数? - console-js-3
如何快速定位未知网页js代码中的函数?(图12-5)

或者利用xhr的地址,设置断点。如下图所示:

苏南大叔:如何快速定位未知网页js代码中的函数? - breakpoint-xhr
如何快速定位未知网页js代码中的函数?(图12-6)

定义好断点事件后,比如最常见的点击事件是mouse > click,再去手工触发你要观察的页面事件,然后就可以断点到对应的函数。当然,可能您看到的并不是您想要的,那么请使用步进等调试功能,进行代码查看。

苏南大叔:如何快速定位未知网页js代码中的函数? - console-js-4
如何快速定位未知网页js代码中的函数?(图12-7)

同时,您还可以利用代码格式化功能,使得代码更加容易查看。

苏南大叔:如何快速定位未知网页js代码中的函数? - console-js-5
如何快速定位未知网页js代码中的函数?(图12-8)

步进功能

主要有以下几个功能,大家自己试试。

  • f8 恢复/暂停
  • f9 单步执行
  • f10 单步执行,遇到子函数并不进去,将子函数执行完并将其作为一个单步
  • f11 单步执行,遇到子函数就进去继续单步执行
  • shift+f11 直接跳出当前的函数,返回父级函数

苏南大叔:如何快速定位未知网页js代码中的函数? - debug-btns
如何快速定位未知网页js代码中的函数?(图12-9)

利用blackbox排除代码

在步进的过程中, 您可能会发现进入一些没有啥意义的代码中,扰乱视线。这里,可以利用这个blackbox功能,可以排除特定的js文件,注意:这里的屏蔽单位是某个具体的js文件。

苏南大叔:如何快速定位未知网页js代码中的函数? - console-js-6
如何快速定位未知网页js代码中的函数?(图12-10)

比如:大多数情况下,jquery就是个应该被blackbox的文件。否则,会强烈干扰视线。

解除已定义的blackbox

如果切换到被拦截的.js文件的时候,在界面顶部,有解除的按钮。右键菜单,也有stop blackbox的菜单。

苏南大叔:如何快速定位未知网页js代码中的函数? - console-js-7
如何快速定位未知网页js代码中的函数?(图12-11)

当然,也可以在设置菜单里面,查看到所有的blackbox信息,并删除对应的设置。

苏南大叔:如何快速定位未知网页js代码中的函数? - console-js-8
如何快速定位未知网页js代码中的函数?(图12-12)

相关链接

总结

在本文中,苏南大叔主要阐述的是一种思路,可以用于分析第三方网页的未知逻辑。辅助分析而已,希望会对你有帮助。

更多chrome的文章,还请查看苏南大叔的博客:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   chrome

本站的忠实读者小伙伴,正在阅读下面这些文章: