前端 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

2025年7月21日

JS `AST` (抽象语法树) 遍历与操作：`esprima`, `estraverse`, `escodegen`

欢迎来到JavaScript AST魔法学院！大家好，我是你们今天的讲师，魔法师梅林（化名，怕你们记住真名）。今天我们要学习的是JavaScript AST（抽象语法树）的强大魔法，并学会如何使用 esprima, estraverse, 和 escodegen 这三件神器来驾驭它。别害怕，AST听起来很高大上，其实就像解剖一棵语法树，然后想怎么摆弄它就怎么摆弄它！准备好了吗？让我们开始吧！什么是AST？（语法树的秘密）想象一下，你的JavaScript代码是一棵树，每个节点代表代码的一部分，比如变量、函数、运算符等等。AST就是这棵树的抽象表示。它把代码分解成计算机更容易理解的结构。举个例子，代码 const x = 1 + 2; 的AST可能长这样（简化版）： { “type”: “Program”, “body”: [ { “type”: “VariableDeclaration”, “declarations”: [ { “type”: “VariableDeclarator”, “id”: { “type”: “Identifier”, “name”: “x” }, …

继续阅读“JS `AST` (抽象语法树) 遍历与操作：`esprima`, `estraverse`, `escodegen`”

2025年7月21日

JS `Reverse Engineering` `Minified/Bundled Code`：识别模块边界与函数入口

各位好，今天咱们来聊聊JS逆向工程里一个挺让人头疼，但也挺有意思的话题：怎么在那些被minify和bundle过的代码里，找到模块的边界和函数的入口。别看那些代码现在长得像一坨坨乱码，只要找对了方法，咱们也能把它们拆解开来，看看里面到底藏了些什么秘密。一、为什么要找模块边界和函数入口？首先，得明白咱们为啥要费这个劲。简单来说，就是为了理解代码的结构和逻辑。想象一下，你拿到了一本没有章节、没有段落、甚至没有标点符号的书，是不是完全不知道该从哪儿下手？Minified/Bundled 的JS代码，差不多就是这个感觉。理解代码逻辑：找到了模块边界和函数入口，就能把代码拆分成一个个小块，然后逐个分析每个模块的功能和函数的作用。这就像把一个复杂的机器拆成一个个零件，然后研究每个零件的工作原理。定位关键代码：很多时候，我们逆向一个JS文件，并不是要搞清楚每一行代码，而是要找到其中关键的部分，比如加密算法、数据处理逻辑等等。找到了函数入口，就更容易定位到这些关键代码。方便修改和调试：如果你需要修改或者调试这段代码，找到模块边界和函数入口就更加重要了。这能让你知道哪些代码可以安全 …

继续阅读“JS `Reverse Engineering` `Minified/Bundled Code`：识别模块边界与函数入口”

2025年7月21日

JS `Chrome DevTools` `Conditional Breakpoints` 与 `Logpoints` 进阶

各位观众老爷，大家好！今天咱们聊点高级的，关于 Chrome DevTools 里面那些个“断点”和“日志点”的骚操作，让你的调试效率直接起飞！第一部分：欢迎来到断点进阶班！断点，这玩意儿就像电影里的暂停键，能让你的代码在指定的地方停下来，让你好好审视它。但普通的断点用多了，你会发现有点笨，总是停在不该停的地方，浪费时间。这时候，就需要“条件断点”来拯救你了！ 1. 啥是条件断点？简单来说，条件断点就是带有“条件”的断点。只有当这个条件满足时，代码才会停下来。就像你跟代码说：“嘿，兄弟，只有当 x > 10 的时候，你才许停下来，不然就给我老实跑着！” 2. 怎么玩转条件断点？设置方法：在 Chrome DevTools 的 Sources 面板中，找到你想加断点的行号。右键点击行号，选择 "Add Conditional Breakpoint…" 输入你的条件表达式。条件表达式的写法：条件表达式必须是 JavaScript 表达式，并且最终结果是一个布尔值（true 或 false）。 x > 10：当 x 大于 10 时暂 …

继续阅读“JS `Chrome DevTools` `Conditional Breakpoints` 与 `Logpoints` 进阶”

2025年7月21日

JS `Chrome DevTools` `Blackboxing`：忽略第三方库代码，聚焦核心逻辑

各位靓仔靓女，晚上好！我是今晚的讲师，很高兴能和大家一起聊聊 Chrome DevTools 里那个低调又强大的功能：Blackboxing。它就像一个代码世界的“黑名单”，能帮我们过滤掉那些烦人的第三方库代码，让我们更专注于核心逻辑，就像在茫茫人海中一眼锁定你的女神/男神一样。开场白：为什么要 Blackboxing？作为一个前端开发者，你的日常可能是这样的： npm install 一大堆依赖包。遇到 bug，开始疯狂 console.log。然后发现，控制台被各种第三方库的输出刷屏，根本找不到自己的代码！或者，你可能遇到过这样的情况：在 DevTools 里调试代码，一步一步往下走。突然跳进了 jQuery 或者 React 的源码里，迷失在各种复杂的函数调用中，怀疑人生。这时候，你就需要 Blackboxing 出马了！它可以让你：减少调试时的干扰：让 DevTools 自动跳过被 Blackbox 的代码，直接进入你的核心逻辑。提高控制台的可读性：过滤掉第三方库的 console.log，让控制台只显示你关心的信息。简化断点调试：避免在第三方库的代 …

继续阅读“JS `Chrome DevTools` `Blackboxing`：忽略第三方库代码，聚焦核心逻辑”

2025年7月21日

JS `Chrome DevTools` `Overrides`：持久化修改源代码进行调试

各位靓仔靓女，早上好（或者下午/晚上好，取决于你们盯着屏幕的时间）。今天咱们来聊聊Chrome DevTools里一个超级实用，但又经常被忽略的功能：Overrides。这玩意儿，说白了，就是个“欺骗”浏览器的工具，能让你在不修改服务器代码的情况下，修改前端代码并进行调试，持久化你的修改。听起来是不是有点刺激？一、啥是Overrides？为啥要用它？想象一下，你正在调试一个线上网站的bug。这个bug只在特定情况下出现，而且你怀疑是某个JavaScript文件的问题。但是，你没有权限直接修改服务器上的代码，或者修改起来非常麻烦。这时候，Overrides就派上用场了。 Overrides允许你：本地修改源代码：你可以在Chrome DevTools里直接修改HTML、CSS、JavaScript等文件，这些修改会覆盖线上版本，但只在你本地生效。持久化修改：关闭浏览器、刷新页面后，你的修改仍然存在，不会丢失。调试线上代码：你可以像调试本地代码一样，设置断点、单步执行，查看变量值，等等。简单来说，Overrides就是一个“本地调试器”，让你可以在不影响线上环境的情况下 …

继续阅读“JS `Chrome DevTools` `Overrides`：持久化修改源代码进行调试”

2025年7月21日

JS `WebAssembly` `Network Requests` 拦截与数据提取

嘿，各位未来的WebAssembly忍者！今天咱们聊点刺激的，关于WebAssembly，网络请求，以及如何像个老道的间谍一样拦截并提取那些偷偷摸摸的数据。准备好了吗？系好安全带，咱们要开始咯！第一幕：WebAssembly，那神秘的盒子首先，啥是WebAssembly (简称Wasm)？简单来说，你可以把它想象成一个超级高效的虚拟机。它不是JavaScript，但它能和JavaScript和平共处。浏览器可以非常快地执行Wasm代码，这使得它成为处理密集型任务（比如图像处理、游戏、加密等等）的理想选择。 Wasm代码通常由C、C++、Rust等语言编译而来。这意味着我们可以用这些高性能的语言编写代码，然后在Web上以接近原生的速度运行。第二幕：网络请求，数据的流动 Web应用离不开网络请求。无论是从服务器获取数据，还是向服务器发送数据，网络请求都是必不可少的。而在Wasm的世界里，网络请求通常通过JavaScript的fetch API或者XMLHttpRequest API来发起。第三幕：拦截的艺术，成为数据间谍现在，激动人心的部分来了！我们要学习如何拦截这 …

继续阅读“JS `WebAssembly` `Network Requests` 拦截与数据提取”

2025年7月21日

JS `WebSocket` `Subprotocols` 逆向与自定义协议分析

各位观众老爷，大家好！今天咱们来聊点儿刺激的——WebSocket的Subprotocols逆向与自定义协议分析。别害怕，听起来高大上，其实就是扒掉WebSocket的马甲，看看它里面藏了什么好东西，然后自己也造一个。准备好了吗？Let’s dive in！一、WebSocket：你以为的只是表面 WebSocket，这玩意儿大家都不陌生，长连接嘛，服务器可以主动push消息给客户端，实时性杠杠的。但你有没有想过，WebSocket连接建立之后，传输的数据都是“裸奔”的吗？当然不是！Subprotocols就是WebSocket用来协商数据传输格式的一种机制，就像两个人聊天，总得先确定用什么语言吧？ 1. 什么是Subprotocols？简单来说，Subprotocols就是WebSocket握手阶段，客户端和服务器之间协商的一种“暗号”，告诉对方： “嘿，老兄，我支持这个协议，你也支持吗？要不咱们就用这个协议通信吧！”。如果双方都同意，那么后续的数据传输就会按照这个协议来解析。 2. Subprotocols在哪里？在WebSocket握手阶段，客户端会在请求头中 …

继续阅读“JS `WebSocket` `Subprotocols` 逆向与自定义协议分析”

2025年7月21日

JS `Anti-Bot` 机制识别与绕过：指纹识别、行为分析与 Honeypot

各位老铁，大家好！我是今天的主讲人，咱今天聊聊JS反爬虫里的那些弯弯绕绕，也就是JS Anti-Bot 机制，重点说说指纹识别、行为分析和 Honeypot 这三大块。保证大家听完之后，下次遇到这些幺蛾子，心里有数，也能抄家伙（代码）干它一炮！一、开胃小菜：反爬虫是个啥？简单来说，反爬虫就是网站为了保护自己的数据不被大规模、恶意地抓取，而采取的一系列技术手段。你想啊，辛辛苦苦攒的数据，让别人轻轻松松就拿走了，搁谁心里也不舒服。 JS 反爬虫，顾名思义，就是利用 JavaScript 来实现的反爬虫策略。因为 JS 运行在用户的浏览器里，所以可以获取到很多浏览器环境的信息，这些信息可以用来判断你是不是一个“正常”的用户，还是一个偷偷摸摸的“爬虫”。二、指纹识别：你是谁？从哪儿来？指纹识别，顾名思义，就是给浏览器打上一个“指纹”，这个指纹包含了浏览器的各种信息，比如： User-Agent: 这个大家应该都熟悉，表面上是告诉服务器你是啥浏览器，但实际上可以伪造。屏幕分辨率: screen.width 和 screen.height。操作系统: navigator.platfor …

继续阅读“JS `Anti-Bot` 机制识别与绕过：指纹识别、行为分析与 Honeypot”

2025年7月21日

JS `CAPTCHA` (验证码) 识别与绕过技术

各位观众老爷们，晚上好！今天咱就来聊聊这让人又爱又恨的“验证码”——CAPTCHA，以及如何用JS来识别它（当然，咱们只聊聊技术原理，别干坏事儿啊！）。开场白：验证码这磨人的小妖精话说这互联网江湖，鱼龙混杂，各种机器人爬虫横行霸道。为了保护咱们的网站不被它们薅羊毛，验证码（CAPTCHA）应运而生。这玩意儿，表面上看是几个歪七扭八的字母数字，实则肩负着区分人类和机器的重任。但问题来了，验证码也经常误伤友军，让人类也得费劲巴拉地辨认，简直是“敌我不分，一律打倒”。更可气的是，有些坏家伙，想方设法地绕过验证码，搞得咱们防不胜防。所以，今天咱就来扒一扒这验证码的底裤，看看JS能做些什么。第一部分：验证码类型大观园验证码的种类繁多，按难度等级可以简单分为：验证码类型难度等级描述常用技术简单型低纯数字、纯字母、简单的算术题（比如 1+1=？） OCR (光学字符识别), 简单的字符串处理复杂型中扭曲变形的字母数字、带干扰线的字母数字、滑动验证、点击验证图像处理（二值化、去噪、分割）、机器学习（CNN）、模板匹配、行为分析行为验证高拖动拼图、点击选择图像中的 …

继续阅读“JS `CAPTCHA` (验证码) 识别与绕过技术”