如何用浏览器进行网站源代码的静态分析—赏金猎人入门手册
字数 2064 2025-08-27 12:33:37

浏览器静态分析网站源代码入门手册

概述

本手册将详细介绍如何使用现代浏览器的内置开发者工具进行网站客户端源代码的静态分析。这种方法对于渗透测试和漏洞挖掘非常有用，特别是在进行Web应用安全评估时。

工具准备

  1. 浏览器开发者工具：

    • 快捷键：Ctrl+Shift+I (Windows/Linux) 或 CMD+Option+I (macOS) 或 F12
    • 支持浏览器：Chrome、Firefox、Safari、Edge等

  2. 代码编辑器：

    • 推荐Visual Studio Code（支持HTML和JavaScript语法高亮）
    • 下载地址：https://code.visualstudio.com/

  3. 其他工具：

    • Node.js（用于运行和测试JavaScript代码）：https://nodejs.org/en/
    • Python（用于编写自动化脚本）

HTML源码分析

查看源码方法

  • 快捷键：Ctrl+U (Windows/Linux) 或 CMD+Option+U (macOS)
  • 注意：有些HTML标签不会在页面中显示（如<html>, <head>, <body>, <style>, <script>）

隐藏内容分析

  • 检查CSS隐藏的元素（通过display:none或宽高设为0）
  • 查找注释中的敏感信息
  • 检查<iframe>标签中的隐藏内容

开发者工具中的Sources面板

  • 显示所有加载的资源（HTML、JS、CSS等）
  • 点击{}按钮可以格式化压缩的JavaScript代码
  • 支持源码映射(Source Maps)功能，可还原混淆的变量名

全局搜索

  • 快捷键：Ctrl+Shift+F (Windows/Linux) 或 CMD+Option+F (macOS)
  • 可跨文件搜索特定函数或字符串

DOM分析

Elements面板与源码的区别

  • 源码视图：显示从服务器加载的原始HTML
  • Elements面板：显示当前DOM树，包括通过JavaScript动态添加的元素

动态内容分析

  • 单页应用(SPA)框架（如AngularJS、React、Vue.js）会动态生成大量内容
  • 这些动态内容可能包含漏洞（如DOM XSS）

客户端存储分析

Application面板功能

  1. Cookies：

    • 查看、修改、删除cookie
    • 测试修改会话标识可能导致的问题

  2. 本地存储：

    • Local Storage（持久存储）
    • Session Storage（会话级存储）

  3. Service Workers：

    • 分析离线功能实现
    • 查看缓存策略

JavaScript调试与分析

调试器使用

  1. 设置断点：

    • 在Sources面板中点击行号设置断点
    • 可用于分析重定向等关键函数

  2. 调试控制：

    • 继续执行（Play按钮）
    • 单步执行（Step over）
    • 进入函数（Step into）
    • 跳出函数（Step out）

  3. 运行时修改：

    • 修改变量值测试不同场景
    • 改变程序逻辑进行漏洞验证

Snippets功能

  • 在Sources面板的Snippets标签中创建和运行代码片段
  • 注意执行环境问题（变量可能已定义）
  • 替代方案：使用Node.js运行测试代码

漏洞挖掘关键概念

Sources（输入源）

  • URL参数
  • Cookie值
  • 本地存储数据
  • 表单输入
  • WebSocket消息

Execution Sinks（执行点）

  • eval()
  • setTimeout()/setInterval()
  • location.href/location.hash
  • window.open()
  • document.write()
  • innerHTML
  • appendChild

漏洞挖掘方法

  1. 识别所有Sources
  2. 识别所有Execution Sinks
  3. 分析数据从Source到Sink的流动路径
  4. 检查是否有适当的过滤和编码

自动化工具

nodestructor工具

  • 静态分析JavaScript文件
  • 识别潜在的Execution Sinks
  • 使用方法： 
    nodestructor -H filename.js
  • 可跟踪变量引用关系

总结

浏览器开发者工具提供了强大的静态分析能力：

  1. 分析原始HTML和动态DOM
  2. 检查客户端存储
  3. 调试JavaScript代码
  4. 识别Sources和Execution Sinks
  5. 使用Snippets快速测试代码

通过系统性地应用这些技术，可以有效发现Web应用中的安全漏洞。

参考资料

  • Chrome开发者工具文档：https://developers.google.com/web/tools/chrome-devtools/
  • Service Workers介绍：https://developers.google.com/web/fundamentals/primers/service-workers/
  • 源码映射说明：https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps
浏览器静态分析网站源代码入门手册 概述 本手册将详细介绍如何使用现代浏览器的内置开发者工具进行网站客户端源代码的静态分析。这种方法对于渗透测试和漏洞挖掘非常有用，特别是在进行Web应用安全评估时。 工具准备 浏览器开发者工具 ： 快捷键：Ctrl+Shift+I (Windows/Linux) 或 CMD+Option+I (macOS) 或 F12 支持浏览器：Chrome、Firefox、Safari、Edge等 代码编辑器 ： 推荐Visual Studio Code（支持HTML和JavaScript语法高亮） 下载地址：https://code.visualstudio.com/ 其他工具 ： Node.js（用于运行和测试JavaScript代码）：https://nodejs.org/en/ Python（用于编写自动化脚本） HTML源码分析 查看源码方法 快捷键：Ctrl+U (Windows/Linux) 或 CMD+Option+U (macOS) 注意：有些HTML标签不会在页面中显示（如 <html> , <head> , <body> , <style> , <script> ） 隐藏内容分析 检查CSS隐藏的元素（通过 display:none 或宽高设为0） 查找注释中的敏感信息 检查 <iframe> 标签中的隐藏内容 开发者工具中的Sources面板 显示所有加载的资源（HTML、JS、CSS等） 点击 {} 按钮可以格式化压缩的JavaScript代码 支持源码映射(Source Maps)功能，可还原混淆的变量名 全局搜索 快捷键：Ctrl+Shift+F (Windows/Linux) 或 CMD+Option+F (macOS) 可跨文件搜索特定函数或字符串 DOM分析 Elements面板与源码的区别 源码视图：显示从服务器加载的原始HTML Elements面板：显示当前DOM树，包括通过JavaScript动态添加的元素 动态内容分析 单页应用(SPA)框架（如AngularJS、React、Vue.js）会动态生成大量内容 这些动态内容可能包含漏洞（如DOM XSS） 客户端存储分析 Application面板功能 Cookies ： 查看、修改、删除cookie 测试修改会话标识可能导致的问题 本地存储 ： Local Storage（持久存储） Session Storage（会话级存储） Service Workers ： 分析离线功能实现 查看缓存策略 JavaScript调试与分析 调试器使用 设置断点 ： 在Sources面板中点击行号设置断点 可用于分析重定向等关键函数 调试控制 ： 继续执行（Play按钮） 单步执行（Step over） 进入函数（Step into） 跳出函数（Step out） 运行时修改 ： 修改变量值测试不同场景 改变程序逻辑进行漏洞验证 Snippets功能 在Sources面板的Snippets标签中创建和运行代码片段 注意执行环境问题（变量可能已定义） 替代方案：使用Node.js运行测试代码 漏洞挖掘关键概念 Sources（输入源） URL参数 Cookie值 本地存储数据 表单输入 WebSocket消息 Execution Sinks（执行点） eval() setTimeout() / setInterval() location.href / location.hash window.open() document.write() innerHTML appendChild 漏洞挖掘方法 识别所有Sources 识别所有Execution Sinks 分析数据从Source到Sink的流动路径 检查是否有适当的过滤和编码 自动化工具 nodestructor工具 静态分析JavaScript文件 识别潜在的Execution Sinks 使用方法： 可跟踪变量引用关系 总结 浏览器开发者工具提供了强大的静态分析能力： 分析原始HTML和动态DOM 检查客户端存储 调试JavaScript代码 识别Sources和Execution Sinks 使用Snippets快速测试代码 通过系统性地应用这些技术，可以有效发现Web应用中的安全漏洞。 参考资料 Chrome开发者工具文档：https://developers.google.com/web/tools/chrome-devtools/ Service Workers介绍：https://developers.google.com/web/fundamentals/primers/service-workers/ 源码映射说明：https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps