🛠️ 这道题的完整解决步骤
这是一道前端限制绕过类的 CTF 题目,核心是突破前端代码的提交限制,成功向服务器发送符合要求的请求。
操作步骤(跟着做就能解):
- 打开开发者工具 :按
F12键(或右键 → 检查),打开浏览器的开发者工具,定位到页面的<form>标签。 - 修改请求方法 :
- 找到
<form action="/send" method="GET">这行代码,把method="GET"改成method="POST"。
- 找到
- 启用提交按钮 :
- 找到提交按钮
<input type="submit" ... disabled>,删除末尾的disabled属性(直接删掉这个单词即可)。
- 找到提交按钮
- 提交表单 :
- 填写
Full Name和Address(内容随便填,也可以留空),点击变成可点击状态的 POST 按钮。
- 填写
- 获取 flag :
- 提交后服务器会返回响应,从中提取出 flag 即可。
🔍 背后的原理
这道题的限制完全在前端代码,没有后端安全校验,所以可以通过修改前端 DOM 直接绕过:
-
method="GET"限制- 后端逻辑可能只接受
POST方式的请求,用GET提交会被拒绝。 - 把
method改成POST后,表单数据会以POST请求体的形式发送,符合后端要求。
- 后端逻辑可能只接受
-
disabled属性限制- HTML 中,带有
disabled属性的表单元素会被禁用:无法点击、无法交互,也不会被提交。 - 删除
disabled后,提交按钮恢复为可点击状态,就能正常触发表单提交。
- HTML 中,带有
-
前端安全的本质
- 这类限制是前端层面的 "伪安全" ,用户可以通过开发者工具随意修改 HTML/CSS/JS,所以任何安全校验都必须在后端实现,前端只能做辅助提示,不能作为真正的防护。
📚 相关知识点总结
表格
| 知识点 | 详细说明 |
|---|---|
HTML <form> 标签 |
用于收集用户输入并提交到服务器,核心属性:- action: 表单提交的目标 URL- method: 提交方式(GET/POST 最常用) |
GET vs POST |
- GET: 参数拼在 URL 里(可见),有长度限制,适合获取数据- POST: 参数放在请求体里(不可见),无长度限制,适合提交敏感数据 / 表单 |
disabled 属性 |
用于禁用表单元素(如按钮、输入框),被禁用的元素:- 无法点击 / 输入- 不会被提交到服务器- 样式通常会变灰 |
| 浏览器开发者工具 | 按 F12 打开,可查看 / 修改页面 DOM、调试 JS、监控网络请求,是前端调试和 CTF 前端题的核心工具 |
| 前后端安全边界 | 前端代码对用户完全可见,任何限制都可被绕过;真正的安全校验必须在后端(服务器端)实现,前端只能做体验优化 |
💡 拓展思考
如果这道题的后端也做了校验(比如验证请求方法必须是 POST、验证参数格式),那修改前端代码依然有效;但如果后端做了更严格的校验(比如验证请求来源、参数签名),就需要进一步构造请求(比如用 curl/Burp Suite 手动发送 POST 请求)。