RootStack

工具链与前端基础总结

7分钟阅读

目录

一、浏览器开发者工具

Chrome DevTools

面板用途安全测试场景
ElementsDOM/CSS查看编辑篡改HTML、查看隐藏表单
ConsoleJS交互执行XSS payload、测试DOM Clobbering
SourcesJS调试反混淆、断点调试、Snippet执行
Network请求监控分析API、查看响应、CORS检查
Application存储管理查看Cookie(HttpOnly)、localStorage、IndexedDB
SecurityHTTPS/证书检查SSL配置、混合内容
Lighthouse性能审计间接发现安全问题

关键快捷键

F12 / Ctrl+Shift+I          → 打开DevTools
Ctrl+Shift+C                 → 元素选择器
Ctrl+Shift+F                 → 全局搜索（搜索所有JS文件内容！）
Ctrl+P                       → 文件搜索（JS/CSS/HTML）
Ctrl+Shift+P → "snippet"     → 创建JS片段

二、Burp Suite前端测试

关键功能

功能用途
Proxy拦截修改HTML/JS/CSS
Repeater重复发送修改后的API请求
Intruder批量payload测试 (XSS/SQL/参数fuzzing)
Collaborator检测外带数据（XSS/SSRF/CSS注入）
DOM Invader自动检测DOM XSS
WebSocketWS消息截获和修改
Autorize插件自动IDOR检测

Burp测试流程

1. 配置浏览器代理 → Burp Proxy
2. 浏览目标网站，所有流量经Burp
3. 用Target → Site map 查看所有请求
4. 用Repeater测试单个请求（修改参数/Header）
5. 用Intruder批量fuzzing（payload位置+字典）
6. 用Collaborator检测外带数据（OOB testing）

三、JS分析与调试工具

反混淆工具

工具用途
de4js自动识别混淆类型并反混淆
JS NiceML驱动的变量重命名和美化
Prettier代码格式化
webcrackWebpack/Babel打包的JS解包
Babel AST ExplorerAST级别分析和转换

调试分析工具

工具用途
Chrome Snippets创建和保存JS测试脚本
Override (DevTools)覆盖线上JS/CSS文件（调试修改）
Console APIdebug(), monitor(), getEventListeners()
Performance性能分析（发现重排重绘异常）
Coverage未使用的JS/CSS代码分析

动态Hook

// 劫持eval查看解密内容
const _eval = window.eval;
window.eval = function(code) {
  console.log('EVAL:', code);
  return _eval(code);
};
 
// 劫持fetch查看API请求
const _fetch = window.fetch;
window.fetch = function(...args) {
  console.log('FETCH:', args);
  return _fetch.apply(this, args);
};
 
// 监控DOM修改
new MutationObserver(mutations => {
  mutations.forEach(m => console.log('DOM:', m));
}).observe(document.body, { childList: true, subtree: true });

四、前端安全扫描工具

自动化扫描

工具用途特点
OWASP ZAPWeb应用扫描开源、有API、支持AJAX Spider
XSStrikeXSS自动化智能payload生成、WAF检测
dalfoxXSS扫描Go语言、快速、支持DOM XSS
Nuclei漏洞模板扫描大量社区模板
retire.jsJS库漏洞检测已知CVE的JS库
npm auditnpm依赖漏洞Node.js项目依赖审计

DOM XSS检测

// 手动DOM XSS检测脚本
// 在Console中执行，监控危险的sink
 
// 1. 监控 innerHTML
const desc = Object.getOwnPropertyDescriptor(Element.prototype, 'innerHTML');
Object.defineProperty(Element.prototype, 'innerHTML', {
  set: function(val) {
    console.trace('innerHTML set:', val);
    desc.set.call(this, val);
  }
});
 
// 2. 监控 document.write
const _write = document.write;
document.write = function(...args) {
  console.trace('document.write:', args);
  return _write.apply(this, args);
};

五、自动化与脚本工具

快速检测脚本

# 1. 安全头检查
curl -sI https://target.com | grep -iE \
  'strict-transport|content-security|frame-options|x-content-type|x-xss|referrer-policy'
 
# 2. CORS配置检查
curl -sI -H "Origin: https://evil.com" https://api.target.com/endpoint \
  | grep -i access-control
 
# 3. 子域枚举
subfinder -d target.com
# 前端相关：CDN域名、静态资源域名可接管
 
# 4. JS文件发现和分析
waybackurls target.com | grep '\.js$' | sort -u > js_files.txt
while read url; do
  curl -s "$url" | grep -oP '(apiKey|token|secret|password)[^"]*' 
done < js_files.txt

Tampermonkey脚本（浏览器端自动化）

// ==UserScript==
// @name         Security Audit Helper
// @match        https://target.com/*
// ==/UserScript==
 
(function() {
  // 1. 查找所有输入框，测试XSS payload
  document.querySelectorAll('input, textarea').forEach(el => {
    el.value = '<img src=x onerror=console.log("XSS_TEST")>';
    el.dispatchEvent(new Event('input'));
  });
  
  // 2. 查找隐藏的API端点（link标签）
  document.querySelectorAll('[href*="api"]').forEach(el => {
    console.log('API endpoint:', el.href);
  });
  
  // 3. 列出所有全局变量（可能暴露内部状态）
  Object.keys(window).filter(k => !k.startsWith('on')).forEach(k => {
    console.log('Global:', k, typeof window[k]);
  });
})();

六、前端基础技能总结

技能矩阵

技能基础中级高级专家
HTML标签结构DOM操作HTML注入/绕过mXSS
CSS选择器/布局CSS注入数据泄露侧信道
JS语法基础DOM/AJAXXSS/WAF绕过原型链污染
安全模型SOP认知CORS分析CSP绕过Browser Exploit
框架理解MVVMXSS防护框架漏洞SSR攻击
APIREST调用参数fuzzingIDOR/批量赋值GraphQL攻击

学习路径回顾

第1周: HTML (4节)    → 理解Web页面结构
第2周: CSS  (4节)    → 理解样式注入和侧信道
第3周: JS基础 (4节) → 掌握核心语法和DOM操作
第4周: JS进阶 (5节) → 掌握XSS、原型链、CSTI
第5周: 安全模型 (3节)→ 理解浏览器安全深层机制
第6周: 安全模型 (2节)→ 框架安全和认证机制
第7周: API安全 (3节) → REST/GraphQL攻击
第8周: 综合实践      → 结合Burp/ZAP实战

关联模块

常用参考

返回 前端基础总目录

关系图谱

反向链接