XSS 攻击与防御

一、什么是 XSS 攻击？

XSS（Cross Site Scripting）跨站脚本攻击：是指攻击者在网页中注入恶意脚本代码（通常是 JavaScript），当用户浏览该网页时，脚本会在用户的浏览器中执行，造成信息泄露、会话劫持、伪造操作等安全问题。

常见危害

窃取 Cookie：如盗取用户身份令牌，冒充用户身份。
钓鱼欺骗：伪造页面骗取用户敏感信息。
强制操作：如自动发帖、点赞、转账等。
传播蠕虫：自动传播恶意代码到其他用户（萨米_(计算机蠕虫)）。

二、XSS 攻击类型

1. 存储型（Stored XSS）

攻击者将恶意脚本"存储"在服务器端（如数据库、评论区），其他用户访问时就会触发。

示例：评论区输入 <script>alert('xss')</script>，其他用户浏览页面时弹窗。

2. 反射型（Reflected XSS）

攻击代码不是存储在服务器，而是通过 URL 参数等方式"反射"到页面，用户访问恶意链接时触发。

示例：访问 http://example.com/?name=<script>alert('xss')</script>，页面直接输出 name 参数内容。

3. DOM 型（DOM-based XSS）

攻击代码通过前端 JavaScript 操作 DOM 时插入，比如用 document.write、innerHTML 等不安全方式插入用户输入。

三、XSS 防御方法

1. 输入校验与过滤

对所有用户输入进行白名单校验，拒绝非法字符。
过滤特殊字符：如 < > " ' & / 等。

2. 输出编码（最重要！）

HTML 输出 ：将用户输入通过转义后再输出到页面。如 < 转为 <，> 转为 >。
前端使用 textContent 或 innerText，而不是 innerHTML。

常用函数/库：

后端：PHP 的 htmlspecialchars()，Python 的 html.escape()，Java 的 StringEscapeUtils.escapeHtml4()，Nodejs 的 xss()。
前端：推荐自己实现或用成熟库（如 DOMPurify，js-xss，he）

3. 使用安全的 API

不要直接用 eval、document.write、innerHTML 等插入用户内容。
推荐用安全 DOM API：createElement、appendChild、textContent

4. 设置安全 HTTP 头

Content Security Policy (CSP) ，强制脚本来源：
复制代码
```
Content-Security-Policy: default-src 'self';
```
X-XSS-Protection （兼容旧浏览器）:
复制代码
```
X-XSS-Protection: 1; mode=block
```

设置 HttpOnly，防止 JS 读取 Cookie。
设置 Secure，仅允许 HTTPS 发送 Cookie。

6. 模板引擎选择

选用自动转义的模板引擎（如 doT.js、ejs、FreeMarker、Django 等）。

7. 定期更新依赖

框架和第三方库要及时升级，修复已知 XSS 漏洞。

四、实际代码示例

1. 后端过滤与转义（Node ejs 示例）

javascript 复制代码

ejs.render("<div><%- user_input %></div>");
# 类似 encodeURIComponent(user_input)

2. 前端防御（避免直接使用 innerHTML 或者 v-html）

html 复制代码

<div id="output"></div>
<script>
  const userInput = '<script>alert("xss")</script>';
  document.getElementById('output').textContent = userInput; // 安全
</script>