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

2025年7月21日

JS `Data Flow Analysis` (数据流分析) `Taint Analysis` (污点分析) 识别漏洞

咳咳，各位观众老爷们，晚上好！我是今晚的讲师，今天咱们聊点有意思的，关于JavaScript里的“数据流分析”和“污点分析”，以及它们怎么帮我们揪出代码里的坏蛋——那些潜藏的漏洞。开场白：JavaScript，你的数据流还好吗？ JavaScript，这门语言，既灵活又强大，但是呢，也容易让人掉坑里。尤其是在处理用户输入、外部数据的时候，一不小心，就会被注入攻击，被XSS，被各种奇奇怪怪的攻击给搞死。这时候，就需要我们的“数据流分析”和“污点分析”出马了。它们就像两只猎犬，一只追踪数据的流向，一只标记潜在的危险，一起把漏洞给揪出来。第一幕：数据流分析——摸清数据的来龙去脉数据流分析，顾名思义，就是分析数据在程序里的流动路径。它就像一个侦探，追踪着数据的每一个脚步，从哪里来，到哪里去，经过了哪些处理，都一一记录在案。数据流分析的基本概念数据流分析的目标是掌握程序中变量的值是如何变化的。它涉及到以下几个核心概念：变量 (Variables): 程序中存储数据的容器。赋值 (Assignments): 将值赋予变量的过程。控制流 (Control Flow): 程序执行的路 …

继续阅读“JS `Data Flow Analysis` (数据流分析) `Taint Analysis` (污点分析) 识别漏洞”

2025年7月21日

JS `Control Flow Graph` (CFG) 重建与程序流分析

各位听众，早上好！今天咱们聊聊一个听起来高大上，实际上也挺高大上的话题：JavaScript的控制流图（CFG）重建与程序流分析。别怕，我会尽量把它讲得接地气一点，争取让各位听完之后，觉得自己也能撸一个出来。一、什么是控制流图（CFG）？想象一下你写了一段JavaScript代码，这代码就像一条蜿蜒的小路，里面充满了各种岔路口和选择。控制流图呢，就是把这条小路画成一张地图，清清楚楚地标明每个路口，以及从一个路口到另一个路口的方向。更正式地说，控制流图是一个有向图，其中：节点（Nodes）：代表代码中的基本块（Basic Blocks）。基本块是指一段顺序执行的代码，没有跳转语句，只有一个入口和一个出口。边（Edges）：代表控制流的转移。例如，if语句的两个分支，for循环的循环体和循环退出等等。用人话说，节点就是一段挨在一起的代码，中间没有if、for、return之类的，边就是代码执行的顺序。二、为什么要重建CFG？有了CFG，我们就能做很多有意思的事情，比如：代码优化：分析CFG可以帮助我们找到冗余的代码，进行死代码消除、常量传播等优化。漏洞检测：分析 …

继续阅读“JS `Control Flow Graph` (CFG) 重建与程序流分析”

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` 逆向与自定义协议分析”