如果你是从零开始打CTF的Web方向遇到的第一道题大概率长这样浏览器打开一个页面正文可能只有一句话甚至是一张图右键还给弹个提示仿佛页面在说“你过来啊”。新手往往在这时候就懵了不知道该点什么、看哪里。而SWPUCTF 2021 新生赛里的 gift_F12 就是这类题里最有代表性的一道名字直接把通关方法写在脸上了gift 是“送分”的意思F12 指的就是浏览器开发者工具。整道题考的不是SQL注入、不是命令执行而是“你会不会像前端开发者那样去审查一个网页”。这篇文章我完全按实际做题的顺序来写从打开页面到最终拿到flag把开发者工具里每个可能藏flag的位置都过一遍再额外整理一些常见的变体套路和踩坑记录。适合两类人阅读一类是刚接触CTF、对着页面完全不知道从哪里下手的纯新手另一类是已经会按F12、但在“注释翻了一圈”之后卡住的人。这篇看完F12类题目基本就藏不住了。1. 题目初探gift_F12 在考什么1.1 名字已经把答案写在了脸上CTF的Web题里出题人一般会把题目名字当成第一道线索。gift_F12拆开看就两个部分gift 代表这是一道“福利题”正常情况下就是给新生送分的难度约等于零F12 则是浏览器开发者工具的打开按键。两段拼在一起翻译过来就是“这是一道利用F12就能解决的送分题”。新生赛里这类题的目的非常朴素让刚入门的选手养成“拿到网页先用开发者工具翻一翻”的习惯。这类题的页面外观也很有规律。多数情况下页面只有一句话、一张图或者干脆是个空白页。真正的内容藏在你看不见的代码里可能是HTML注释可能是某个JS文件也可能在控制台的输出里。只要你有意识地打开开发者工具去“看”几秒钟就能看到。换句话说这题不是靠猜、不是靠撞纯粹是考察你的观察力。1.2 新生赛Web题里的“信息收集”思维做过几场CTF之后你会发现Web方向所有题目的第一步都是信息收集而前端页面就是信息收集的第一站。一个网页从服务器发过来之后HTML、CSS、JavaScript全都是放在客户端运行的。浏览器只会渲染给你“它想让你看到的界面”但完整的代码、注释、请求和其他静态资源全都可以通过开发者工具查看。理解这一点剩下的思路就顺畅了F12题就是一堂“拆快递”的入门课。快递盒里的东西本来就没上锁摆得整整齐齐你只需要知道怎么把盒盖打开——也就是知道怎么按F12、知道各个面板分别看什么。更重要的是这道题在帮新手建立一种意识以后遇到任何Web题先别急着猜什么“万能密码”先把前端能看到的都看完再说。2. 按 F12 之前开发者工具的几个面板得先分清楚2.1 打开开发者工具的四条路虽然名字里写着F12但在实际比赛时你不一定每一次都能用F12顺利打开。有的题目会在JS里拦截按键有的环境键盘映射有冲突。所以打开开发者工具的路最好多会几条键盘按F12这个不用多说能用就用。快捷键 CtrlShiftI鼠标失灵或键盘键位冲突时很管用。页面里右键选择“检查”或“查看页面源代码”但有些题目会禁用右键。浏览器右上角菜单里的“更多工具 - 开发者工具”。我自己的习惯是先正常打开页面再按F12然后立刻刷新一次页面。这么做的好处是开发者工具在记录网络请求之前页面可能已经把一些内容加载完了。先打开工具再刷新就能从头到尾看到所有请求后面排查Network面板时不会漏东西。2.2 Elements面板HTML源码和注释都要看F12打开后默认停留在Elements面板这里展示的是当前页面的实时DOM结构。细心的新手会注意到这里刚好显示一大段灰色文字里面往往就写着flag。不过有的题目不会那么露骨可能把flag藏在一个隐藏的div里或者在