企业官网建设流程全解析

做Web题的第一步，永远不是急着上什么高大上的工具，而是先老老实实打开页面，看看对方到底给了你什么东西。这套我用来带新人的Web入门系列，第一题“web1”就是一个非常典型的例子。它的难度约等于零，但很多零基础的朋友恰恰就是栽在这种“最简单的题”上——不是不会，而是根本没养成“先看源码”的习惯。

这篇文章就把我实际做这道题的全过程，以及这道题背后牵出来的信息收集思路、常见翻车点，一次性讲透。不管你是刚接触CTF，还是已经能打简单题目但想补一下基础，这篇都值得你花十分钟看完。看完你会发现，Web安全的第一课，其实不是漏洞利用，而是学会“看一眼别人藏起来的东西”。

1. 拿到题目先别急着动手：搞清楚它到底想考什么

1.1 一个普通到不能再普通的页面

进入web1，你大概率会看到这样一个页面：没有炫酷的交互，没有复杂的菜单，可能只有一句话、一张图，或者干脆就是一段居中排列的欢迎文字。如果你是第一次接触CTF的Web题，这时候心里难免犯嘀咕：这有啥好做的？

很多新人这时候的典型反应是“到处点点”，看看有没有按钮、链接、输入框。这个习惯本身没错，但前提是你得明白：Web题目的每一个元素都不是白给的。页面上显示的内容是线索，不显示的内容更是线索。

我在实际带人的时候发现，至少有三分之一的新人会直接卡在这一步，然后跑来问“题目是不是坏了”。其实题目压根没坏，只是他们还没有“从页面之外去看页面”的意识。这道题要传达的第一个理念就是：在Web安全里，你看到的网页只是冰山一角，真正的信息往往藏在浏览器给你渲染好的“表面”之下。

1.2 为什么第一题十有八九都在考“看源代码”

理解这个问题，先要理解Web的工作原理。你在浏览器里访问一个网页，本质上是向服务器发了一个请求，服务器返回一段HTML代码，浏览器再把这串代码“翻译”成你看到的漂亮页面。关键在于：这段HTML代码是完整地送到你电脑上的，包括那些你肉眼看不到的注释、标签属性、引用的脚本，全都躺在本地。

这就是Web架构的一个天然特点：前端代码对用户不可隐藏。服务器可以决定“返回什么”，但只要它把代码发出来了，用户就能看到全部原始内容。所谓“查看源代码”，不过是你把这层翻译过后的漂亮外皮剥开，直接去看服务器给你的原始回答。

CTF的Web入门题之所以第一关就考这个，就是为了告诉你：任何一次安全测试，起点都是信息收集。你连对方给了你什么都没看完，就急着去挖漏洞，这是本末倒置。而查看源代码，是零成本、零风险、每个浏览器都自带功能的信息收集手段，不学它学什么？

2. 实操过程：五分钟拿下第一个flag

2.1 用开发者工具打开页面源码

操作其实就一步：在页面空白处点击鼠标右键，选择“检查”，或者更直接一点按F12键。这时候浏览器右侧或者底部会弹出一个开发者工具面板，里面有几个选项卡，其中我们最常用的是“元素”（Elements）面板，也叫“元素审查”。

第一次用这个面板的朋友容易懵，觉得满屏都是英文标签，不知道看哪。其实你不需要理解每一行CSS和HTML，只需要记住一件事：这里展示的就是当前页面渲染出来的完整HTML结构。页面上的文字、图片、输入框，在这个面板里都能找到对应的标签。如果你看到一个灰色的注释，格式是<!-- 内容 -->，恭喜，线索基本就在里面了。

我用这套题带新人的时候，会特意让他们做一件事：不要只看面板当前高亮的那一小片区域，而是用鼠标滚轮把整个“元素”面板从上到下完整地滚一遍。为什么要这样做？因为很多初学者习惯只看“当前选中的那几行”，可是注释和隐藏信息不一定放在你目光所及的那一小段，它们可能藏在页面结构的最底部，也可能嵌在某个不起眼的<div>标签属性里。

2.2 在注释里捞flag

当你顺着“元素”面板逐行往下看，大概率会在一段HTML代码里发现这样一行：

<!-- flag{xxxx-xxxx-xxxx} -->

看到这行灰色注释的瞬间，这道题就已经解完一半了。这个形如flag{...}的字符串，就是我们在这道题里要找的目标。复制的时候一定要把整串完整选中，从flag{到最后的}，一个字符都不能少。

这里有个细节值得单独拎出来说：注释不只出现在代码的末尾。根据我的经验，题目设计者有时候会把注释藏在<head>标签里、放在<meta>附近，甚至塞进一个<script>标签内部。所以别只盯着页面主体区域看，头部、底部、标签属性里面，全都要扫一遍。我见过有人因为只看了前半段，愣是漏掉了后面半段注释里的flag，白白浪费了不少时间。

2.3 提交flag，验证结果

拿到flag字符串之后，回到题目页面，找到提交框，把内容粘贴进去，点击提交。如果一切正常，页面上会显示类似“提交成功”的提示，这道题就算拿下了。

实际操作中，这一步反而成了很多新人的“翻车重灾区”。问题不出在思路，而出在细节：有的人复制的时候把注释里的前导空格一起带上了，有的人复制漏了一个字符，有的人搞混了大写字母，还有的人连花括号都粘贴掉了。提交框可不会帮你纠错，它只会冷冰冰地告诉你“答案错误”。所以我在这一步的习惯是：粘贴完之后，手动在输入框里把开头和结尾的光标移过去看一眼，确认没有多余空格、没有漏字符，再点提交。

3. 题目背后的原理与延伸：一次“信息泄露”的模拟

3.1 为什么flag会老老实实写在注释里

很多新手看到这里会有个疑问：题目故意把flag写在注释里，这也太假了吧？真实环境里哪有人这么干？

你说得对，但也不完全对。这道题表面上看起来很“刻意”，实际上它是在模拟一种非常真实的情况：开发者把敏感信息留在了前端代码里。你平时刷网页的时候，随便打开几个网站的源代码看看，就会发现HTML注释里什么都有——调试用的临时账号、内网数据库地址、接口的密钥、甚至开发者的个人联系方式。这些东西在开发阶段写上去很方便，但发版上线的时候一忙，就忘了清理。

CTF入门题就是把这个真实场景浓缩成一道题：假设开发者把本应保密的flag随手写进了HTML注释，然后忘了删。你要做的，就是扮演那个审查前端代码的安全测试人员，把它找出来。这道题考察的不是什么高深漏洞，而是“你敢不敢、会不会去看别人代码里写了什么”的基本功。

3.2 从这道题延伸出去的“前端信息泄露”全景

既然说到前端信息泄露，我顺便把同类型的敏感信息位置整理一遍。这些并不是web1这道题必须掌握的，但它们是同一套思维模式的自然延伸，你以后做其他Web题或真实项目测试时一定会遇到：

把它们列出来之后你会发现，它们有一个共性：都是开发者以为“用户看不到”，但实际上用户只要动动手指就能看到的东西。Web安全里管这叫“敏感信息泄露”，它本身可能不算一个高危漏洞，但它往往是后续攻击链的第一块多米诺骨牌。

3.3 顺便补两个同系列必考的“隐藏文件”

如果你做完web1觉得意犹未尽，想顺着“信息收集”这条线再往前走，有两个东西我建议你提前了解一下：robots.txt和备份文件。

robots.txt是网站用来告诉搜索引擎爬虫“哪些目录可以抓、哪些不行”的文本文件。问题在于，很多开发者会把不想被公开的路径写在这里，以为这样就没人知道了。结果这文件变成了一张“藏宝图”，上面明明白白写着“别来这个目录”——而你偏要去看看。做题的时候，直接在地址栏访问/robots.txt，看里面的Disallow字段指向什么路径，再顺着那个路径访问一次，经常能白捡一个flag。

备份文件则是另一个经典套路。开发者习惯把源码压缩包备份在网站根目录，比如www.zip、backup.zip、index.php.bak，名字五花八门。你直接访问.bak或者.zip后缀的路径，运气好就能把整个源码下载下来。这两个点都属于“信息收集”的范畴，虽然web1没考，但我建议你在入门阶段就养成顺手试一下的习惯。

4. 常见问题与排查技巧实录

4.1 注释里找不到flag，是不是题目坏了

这是我最常被问到的问题。先说结论：大概率不是题目坏了，而是你的查看姿势不对。遇到这种情况，我建议按下面的顺序依次排查：

第一，确认你看的是“元素”面板而不是别的面板。有时候开发者工具默认停在“控制台”（Console）或者“网络”（Network），你要手动切到“元素”/“Elements”选项卡。第二，把面板从顶部到底部完整滚一遍，别只盯着中间那几行看。第三，检查页面有没有被框架嵌套。有些页面内容嵌在iframe里，你需要展开<iframe>标签，进入它内部的结构中去找。第四，考虑换一种方式：直接在浏览器地址栏输入view-source:页面完整地址，按回车，这样会直接显示服务器返回的原始HTML源码，注释、隐藏字段一目了然，比开发者工具更“原汁原味”。

4.2 按F12没反应，或者右键被禁用了

部分练习环境为了模拟“防查看”效果，会屏蔽右键菜单，甚至监听F12按键。别慌，办法多的是。最稳妥的方案就是上面说的view-source:方式，它绕过了所有前端禁用的逻辑，因为查看源码是浏览器底层的功能，网页脚本拦不住。

另一个方案是换浏览器，比如当前用的浏览器被屏蔽了，换一个没装过该脚本的浏览器再试，很多时候直接就解决了。还有一个方案是用抓包工具或者手机端的“查看网页源代码”功能，不过对web1这种题来说，view-source:已经足够简单粗暴了。

4.3 提交flag总是提示答案错误

如果确定自己找到了flag，但提交一直失败，先把心态稳住，排查这几个点：

• 是不是多复制了空格？很多平台提交框对首尾空格不友好，复制前把开头结尾清理干净。
• 有没有区分大小写？flag里的英文字母可能有大写，复制时别顺手改成小写。
• 花括号是否完整？flag{...}里的花括号是半角符号，别在输入法里弄成全角。
• 提交框是否只要花括号内的内容？有的平台要求在框里填完整的flag{...}，有的平台只要填括号里的那串字符。这种“格式差异”很讨厌，但也别慌，可以先试完整格式，再试去掉花括号的版本。

我把这道题最常见的几个问题整理成一个速查表，供你对照：

5. 我的一些心得与后续建议

做完web1这道题，我所看到的新人通常有两种反应。一种觉得“就这？太简单了”，然后急着去做下一题；另一种恍然大悟，开始意识到原来网页背后还有这么多看不见的信息。我个人的看法是：这道题真正要教会你的，不是“按F12找注释”这个动作，而是建立一种“信息收集优先”的肌肉记忆。

这些年我做过不少Web方向的题目，也参与过一些真实场景的授权测试。无论面对什么目标，我的第一轮操作永远是固定的：打开页面看源代码，扫一遍注释和引用的文件；顺手访问robots.txt，探测常见备份文件名；看一眼响应头，记录服务器类型和版本信息。这套流程说起来平平无奇，但它真的能解决大量问题。反倒是某些一上来就急着找漏洞的人，常常在目标门外打转。

最后给刚入门的朋友一个具体建议：做完web1之后，不要急着刷下一题，试着回到这道题的页面，用开发者工具把页面里每一个标签、每一处属性、每一个引用的文件都点开看一遍。能看懂的，想想它为什么存在；看不懂的，去搜一下这个标签是什么意思。这种“慢下来”的学法，比一口气刷十道题但每道都靠别人的答案，要扎实得多。把这一步走稳了，后面的路会越走越顺。