深入理解前端安全：CSRF与XSS攻击详解

引言

在Web开发的世界里，安全性就像是房子的门锁。你可能觉得它不显眼，但一旦没了它，麻烦可就大了！本文将深入探讨两大前端安全威胁：CSRF（跨站请求伪造）和XSS（跨站脚本攻击）。通过生动的实例和实用的防御策略，让我们一起踏上这段“安全大冒险”吧！

一、CSRF攻击详解

1.1 什么是CSRF？

CSRF（Cross-Site Request Forgery，跨站请求伪造），听起来像个高大上的术语，但其实它就是恶搞用户的日常操作。攻击者通过引诱已认证用户访问恶意网站，利用用户的身份发起未授权请求。结果？用户可能会无意中执行一些危险操作，比如转账、修改密码等。

1.2 CSRF攻击原理

攻击者设计一个恶意页面，当用户在浏览器中访问时，浏览器会自动携带当前会话的认证信息（如Cookie）向目标网站发起请求。想象一下，你正在银行页面处理业务，突然跳出来一个“银行”链接，点击后转账到攻击者账户，连你都没反应过来！

经典案例：银行转账

<!-- 恶意网站中的代码 -->
<img src="https://your-bank.com/transfer?to=attacker&amount=10000" width="0" height="0">

只要已登录银行账户的用户点击了这个“看似无害”的图片，就会触发转账操作。浏览器会自动带上当前会话的Cookie，直接把钱转给攻击者。

1.3 更多CSRF示例

示例1：修改用户信息

<form action="https://social-media.com/update-profile" method="POST"><input type="hidden" name="email" value="hacker@example.com"><input type="hidden" name="password" value="newpassword">
</form>
<script>document.forms[0].submit();</script>

示例2：社交媒体发帖

fetch('https://social-media.com/post', {method: 'POST',body: JSON.stringify({content: 'Check out this scam site!'}),credentials: 'include'
});

1.4 CSRF防御措施

CSRF Token：防止恶意请求的最好方法之一是引入CSRF Token。每个表单都带有一个随机生成的token，服务器验证该token才允许执行请求。
```
<form action="/transfer" method="POST"><input type="hidden" name="_csrf" value="随机生成的token">
</form>
```
SameSite Cookie属性：确保Cookie只能在当前站点下发送，减少跨站点伪造请求的风险。
```
Set-Cookie: sessionid=xxxx; SameSite=Strict; Secure; HttpOnly
```

检查Referer/Origin头部：可以验证请求来源，确保请求来自可信的页面。

if (request.headers.referer !== 'https://yourdomain.com/') {return res.status(403).send('Forbidden');
}

关键操作二次验证：如短信验证码、密码确认等，确保操作的合法性。

二、XSS攻击详解

2.1 什么是XSS？

XSS（Cross-Site Scripting，跨站脚本攻击）就像是Web页面上的“病毒”，攻击者通过注入恶意脚本到网页，借此窃取数据或执行不法行为。不同于CSRF，它直接攻击浏览器环境，让用户的浏览器成为攻击的“战场”。

2.2 XSS分类与示例

2.2.1 存储型XSS

特点：恶意脚本在目标服务器上被永久存储，所有访问该页面的用户都会受到影响。

案例：论坛评论注入恶意脚本

用户评论内容：<script>stealCookie()</script>

当其他用户查看评论时，恶意脚本便会执行，窃取他们的Cookie等敏感信息。

2.2.2 反射型XSS

特点：恶意脚本作为请求的一部分，服务器将其“反射”回响应中。

案例：搜索功能漏洞

https://vulnerable-site.com/search?q=<script>alert(1)</script>

攻击者将恶意脚本注入搜索查询中，当服务器返回结果时，浏览器执行脚本，导致潜在的危害。

2.2.3 DOM型XSS

特点：完全在客户端发生，不涉及服务器。攻击者通过改变页面的DOM结构来注入恶意脚本。

案例：不安全的innerHTML使用

document.getElementById('output').innerHTML = userInput;

当用户输入包含恶意脚本时，这段代码会将恶意脚本渲染到页面上，从而执行攻击。

2.3 更多XSS攻击向量

通过图片标签：利用onerror事件触发脚本。
```
<img src="x" onerror="恶意代码">
```

通过CSS：在背景中注入JavaScript。

<div style="background:url('javascript:恶意代码')">

通过HTML属性：如<a href="javascript:恶意代码">点击我</a>。

2.4 XSS防御措施

输入验证与过滤：确保不允许注入恶意脚本。可以通过正则表达式等手段清除或过滤输入中的不安全字符。
```
function sanitize(input) {return input.replace(/<script.*?>.*?<\/script>/gi, '');
}
```

输出编码：对输出内容进行编码，避免恶意脚本被当作HTML标签解析。

function htmlEncode(str) {return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}

Content Security Policy (CSP)：通过CSP来限制页面加载的资源来源，防止恶意脚本的执行。
```
Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com
```
使用安全API：避免使用不安全的API，如innerHTML，转而使用textContent等更安全的方式。
```
// 不安全的
element.innerHTML = userInput;// 安全的
element.textContent = userInput;
```

三、CSRF与XSS对比

特性	CSRF	XSS
攻击目标	利用用户身份执行操作	窃取数据或执行恶意脚本
是否需要用户登录	是	不一定
攻击方式	伪造请求	注入脚本
影响范围	特定操作	整个页面/应用
防御重点	验证请求来源	输入输出过滤