F12 开发者工具精要：Elements / Network / Console / Application

前两阶段你一直在"看页面"，这一课教你"拆页面"。F12 是安全学习最常用的工具之一，而且完全合法——它只是把你自己的浏览器看到的东西展示给你。学好这四个面板，你以后读 payload、找接口、复现漏洞都靠它。

一、打开方式与四个面板的分工

在 Edge 或 Chrome 里：

• F12 或 Ctrl+Shift+I：打开/关闭开发者工具
• Ctrl+Shift+C：直接进入"点选元素"模式，点页面任意位置就定位到它
• Ctrl+Shift+P：打开命令面板，可以搜 "Disable JavaScript"、"Show Coverage" 等冷门功能
• 工具停靠位置可以点右上角的 ⋮ 调整，建议贴右侧或底部，宽度拉大一点

四个面板各解决一类问题，别混着用：

面板	一句话职责	你最常来干什么
Elements	看当前 DOM 树和样式	看表单真实结构、临时改页面
Network	看所有 HTTP 请求与响应	看请求头、找接口、重放请求
Console	执行 JS、看报错	快速验证一个想法、看跨域/CSP 报错
Application	看浏览器本地存储	读 Cookie 属性、清 LocalStorage

二、Elements：看 DOM、实时改

这是你理解"页面到底是什么"的地方：

1. 左上角箭头 → 点页面上任何元素，左边的 DOM 树会高亮到对应节点
2. 双击标签名、属性值可以直接编辑，页面实时变化
3. 右侧 Styles 列出所有命中的 CSS 规则，可勾选/取消/改值；Computed 展示最终生效的样式（调试"为什么我的 CSS 不起作用"必看）
4. 右键节点有几个好用的菜单：Copy → Copy selector（复制选择器）、Scroll into view、Break on → attribute modifications（属性被改时断住，排查"谁动了我的 DOM"）

安全视角的重点：Elements 里显示的 DOM 才是浏览器真正在处理的东西，它可能和 Ctrl+U 看到的源代码不一样（JS 改过）。看一个表单，你要关心三件事——action 指向哪、method 是什么、里面有没有 type="hidden" 的隐藏字段。

💡 动手实验 1：在 Edge 打开 https://learn.myxbw.cn，按 F12 → Elements → Ctrl+F 在 DOM 里搜 iframe，看有没有节点；再搜 input，数一数页面上有几个输入框。然后在 Network 面板刷新，看看哪些资源是从 learn.myxbw.cn 自己的域名加载的，哪些来自别的域名（比如字体 CDN）——那是这个站的"外部依赖清单"。

三、Network：看请求，安全测试的主战场

按 F12 → Network → F5 刷新，请求会一条条落下来。先学会读这五列：

列	含义
Name	请求的路径
Status	状态码（200 成功、302 跳转、403 拒绝、404 没有、500 出错）
Type	类型：document、xhr、fetch、script、stylesheet、img
Size	传输大小（(memory cache) 表示用了缓存）
Time	耗时

几个必备操作：

• 筛选：顶部那一排 Doc / XHR / JS / CSS / Img 是类型过滤。找接口就点 Fetch/XHR；找主文档就点 Doc
• Preserve log：勾上以后，页面跳转/刷新时旧请求不会消失——排查登录跳转、重定向时必开
• Disable cache：勾上以后强制不走缓存，保证你看到的是真实响应
• 搜索框：Ctrl+F 打开，可以在所有响应体里搜关键词，比一条条点开快得多

点开一条请求，右侧分几个标签：

标签	看什么
Headers	请求头、响应头都在这（General 里还有请求 URL 和方法）
Payload	这次请求带上去的参数：查询字符串、表单字段、JSON 体
Response / Preview	服务器返回的原始内容 / 格式化后的样子
Timing	各阶段耗时，判断慢在哪

右键菜单里藏着两个神器：

• Copy → Copy as cURL：把这条请求复制成一条命令行。Windows 11 自带 curl.exe，在 Git Bash 里粘贴即可；Edge/Chrome 还提供 Copy as PowerShell，可以直接粘进 PowerShell 跑
• Replay XHR：原样重发这条请求（只对 XHR/Fetch 有效），改不了参数但能快速验证接口是否还活着；要改参数就用上一招复制出去再改
• Copy → Copy response：把响应体复制走，方便离线分析

顺手做一次安全头巡检

在你的两个站上对比这几个响应头，是很好的入门练习：

响应头	作用
x-frame-options: DENY	禁止被放进 iframe（防点击劫持）
content-security-policy	限制资源与脚本来源（防 XSS）
strict-transport-security	强制浏览器以后都用 HTTPS 访问
x-content-type-options: nosniff	禁止浏览器猜 MIME 类型
set-cookie 上的 HttpOnly / Secure / SameSite	决定 Cookie 抗不抗 XSS 与 CSRF

💡 动手实验 2：打开 https://www.myxbw.cn，F12 → Network → 刷新 → 点最上面那条 Doc 请求 → Headers → Response Headers，找 x-frame-options，记录它的值。再对 learn.myxbw.cn 做一遍，把两个站的结果写在一起对比。然后试试右键那条请求 → Copy as PowerShell，粘到 PowerShell 里执行，你会看到响应头被打回终端。如果菜单里没有这一项，就在 PowerShell 里直接跑 curl.exe -I https://www.myxbw.cn，效果一样——脱离浏览器也能发 HTTP 请求，这就是命令行工具存在的意义。

四、Console：执行 JS、看报错

Console 有两个身份：报错窗口和即时命令台。

看报错时注意区分两类：

• JS 运行时错误：红色，带文件行号，通常是页面的 bug
• 安全策略拦截：例如 Refused to display ... in a frame because it set X-Frame-Options to deny（点击劫持防护生效）、has been blocked by CORS policy（同源策略生效）、Refused to load the script because it violates the Content-Security-Policy（CSP 生效）

这几个报错不是"页面坏了"，而是防护正在工作——以后你写评估报告时，这类报错就是你确认防线存在的证据。

命令台上几个值得记住的小技巧：

写法	含义
$0	当前在 Elements 里选中的那个节点
$('h1')	等于 document.querySelector('h1')
$$('a')	等于 document.querySelectorAll('a')，返回数组
console.table($$('a'))	把结果打成表格
getComputedStyle($0).color	读某元素最终生效的颜色

一个重要认知：Console 里执行的代码，拥有当前页面的全部权限。它能读 Cookie、能改 DOM、能用你的身份发请求。这正是 XSS 的威力所在——攻击者注入的代码和你手输的代码，权限一模一样。

五、Application：Cookie / Storage / Service Worker

切到 Application 面板，左侧是一棵存储相关的树：

位置	存什么	安全关注点
Cookies	会话标识、偏好设置	每一行都能看到 HttpOnly / Secure / SameSite 勾选情况，这是读 Cookie 属性最方便的地方
Local Storage	长期键值对，永不过期	JS 完全可读，token 放这里等于送给 XSS
Session Storage	标签页级键值对，关掉就没	同样可被 JS 读
Cache Storage	Service Worker 的离线缓存	可被用来持久化投毒内容
Service Workers	拦截请求的"页面级代理"	一旦被注册就能长期劫持请求，是高级攻击面

一句结论：LocalStorage 里的东西对 XSS 毫无抵抗力，Cookie 加上 HttpOnly 才对 XSS 有抵抗力。 所以敏感凭证该放哪，这里给出了答案。

💡 动手实验 3：打开 https://learn.myxbw.cn，F12 → Application → 左侧点开 Local Storage，看看这个站存了什么（VitePress 会存主题偏好等）。把里面的键全删掉，刷新页面，观察哪些设置被重置了。然后去 Cookies 里点开 www.myxbw.cn 那一项（如果你在那边登录或设置过东西），把每一行的 HttpOnly、Secure、SameSite 三列读一遍——这是你第一次亲眼看到 Cookie 的安全属性。

六、用 Network 找隐藏接口

"页面上没有链接，但数据还是从某个地方来的"——接口就是这样被找到的。标准流程：

1. 打开 Network，勾上 Preserve log，点 Fetch/XHR 筛选
2. 在页面上做那个动作（搜索、翻页、点按钮）
3. 看新冒出来的请求：它的 URL、方法、Payload、Response 就是接口的全部定义
4. 想确认响应结构，切到 Response 标签；想重放，右键 → Replay XHR

一个诚实提醒：你现在的两个站都是静态站，Network 里绝大多数请求是 HTML/CSS/JS/图片，接口很少——所以这个技能在你自己的站上练习效果有限，真正的练习场是后面的 DVWA 靶场（见 /stage4/dvwa）和 /stage4/burp。

不过静态站也有一件事值得看：本站的搜索索引。按 F12 → Network → 刷新后在筛选框输入 index，你会看到本地搜索索引文件被加载下来——也就是说，搜索是纯前端完成的。这个观察本身就很有价值：判断一个功能在前端还是后端实现，靠的就是 Network。

七、用 Console 快速验证页面里的 JS 行为

有些问题不用猜，Console 一问就知道：

document.forms.length              // 页面有几个表单
document.querySelectorAll('iframe').length  // 有几个 iframe
document.querySelector('form').action       // 表单真实提交地址
location.href                       // 当前完整地址（含参数）
performance.getEntriesByType('resource').length  // 这个页面加载了多少资源

这几行代码的用途是回答"这个页面到底会不会发请求、发去哪、带不带参数"。当你以后想验证"这段输入会不会被当成 HTML 执行"，也可以在 Console 里用 innerHTML 亲手试一次，不需要服务器配合。

八、安全测试视角：三条必须记住的规矩

第一，不改服务器就能验证 XSS 想法。 Elements 改 DOM、Console 跑代码，都是本地行为，刷新即还原，服务器完全不知情。这让你可以在自己的站点上安全地验证思路：把用户输入的地方换成一段 onerror 载荷，看它是否被执行。执行了，就说明这个位置存在注入风险——但真正的结论必须在授权靶场上复现，不能拿别人的站试。

第二，前端源码永远是公开的。 浏览器必须把 JS 发给客户端才能执行，所以 Ctrl+U、Sources 面板、Copy response 拿到的东西，任何人都能拿到。搜一搜 api、token、secret、/v1/ 这些关键词，经常能找到接口路径和调试信息。推论：永远不要把密钥、内部接口地址当成秘密藏在前端，那不是"藏起来"，那是"发出去"。

第三，只在自己的资产上动手。 允许的范围：你自己的 myxbw.cn / learn.myxbw.cn、学校授权给你的系统、本地靶场（DVWA、故意做成的漏洞环境）。其余一律不动——哪怕只是"试一下参数"。这条红线的具体说明写在 /stage4/legal，请务必读完再实操。

小结

• Elements 看 DOM 与样式，改它是本地行为，刷新即还原
• Network 是主战场：会筛选、会看 Headers/Payload/Response、会用 Copy as cURL 重放
• Console 既看报错也当命令台；CORS / X-Frame-Options / CSP 的报错是防护生效的证据
• Application 里读 Cookie 的三个安全属性，也看清 LocalStorage 对 XSS 毫无抵抗力
• "页面上的动作 → 新出现的 XHR/Fetch 请求"就是找接口的方法
• 前端代码永远公开，别把秘密放前端
• 一切测试只在自己的资产或授权靶场上进行

到这里，前端三件套 + F12 精要就学完了。你可以按顺序回看 HTML、CSS、JavaScript，然后进入后端与数据库阶段。

📎 本课对应知识库阅读：《知识库里的信息收集主题文章》（对照"响应头与前端源码能泄露什么"这一节）。