XSS攻击中如何正确过滤用户输入的脚本标签？

Question

在防范XSS攻击时，如何安全地过滤用户输入中的 `<script></script>

Answer 1

防范XSS攻击：安全过滤用户输入中的 <script></script>

1. XSS攻击基础认知

跨站脚本攻击（Cross-Site Scripting, 简称XSS）是一种常见的Web安全漏洞，攻击者通过在网页中注入恶意脚本，当其他用户浏览该页面时，脚本会在其浏览器中执行。最典型的例子是用户输入包含<script>alert('XSS')</script>的内容，若未加处理直接渲染，将导致脚本执行。

XSS分为三类：

• 反射型XSS：恶意脚本作为请求参数传入，服务器反射回响应中。
• 存储型XSS：恶意内容被永久存储在服务器（如评论、用户资料），后续访问者自动触发。
• DOM型XSS：攻击通过修改页面的DOM结构触发，不经过服务器端渲染。

2. 过滤<script>标签的初级方法

初学者常采用字符串替换或正则表达式来移除或转义<script>标签，例如：

function stripScriptTags(input) {
  return input.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '');
}

然而，这种方法存在严重缺陷：无法应对大小写混淆（如<ScRiPt>）、注释绕过（<scr<!-- -->ipt>）或编码攻击（如<script>）。

3. 输入验证与输出编码的区分

安全防护应遵循“输入验证 + 输出编码”双层策略：

策略	作用	示例
输入验证	检查数据格式是否合法	限制用户名仅允许字母数字
输出编码	根据上下文转义特殊字符	将<转为&lt;

4. 使用HTML实体编码进行输出净化

在将用户数据插入HTML内容时，必须对以下字符进行HTML实体编码：

• < → <
• > → >
• & → &
• " → "
• ' → '

例如，在Node.js中可使用he库：

const he = require('he');
const safeOutput = he.encode(userInput);

5. 使用成熟的HTML净化库

推荐使用经过广泛验证的第三方库，如DOMPurify（前端）或js-xss（后端）：

import DOMPurify from 'dompurify';

const clean = DOMPurify.sanitize(dirtyInput);
// 自动移除<script>等危险标签

DOMPurify支持白名单机制，允许保留<p>、<strong>等安全标签，同时防御各种绕过技巧。

6. 内容安全策略（CSP）的协同防御

即使过滤了<script>，仍可能因内联脚本或eval()引入风险。可通过HTTP头设置CSP：

Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com;

该策略禁止执行内联脚本和未知来源的JS，从根本上缓解XSS影响。

7. 深度防御架构设计

构建多层防护体系，流程如下：

graph TD A[用户输入] --> B{输入验证} B -->|合法| C[存储至数据库] B -->|非法| D[拒绝请求] C --> E[输出前编码] E --> F[浏览器渲染] F --> G[CSP拦截异常脚本]

8. 常见绕过技术与反制措施

攻击者常使用以下方式绕过简单过滤：

• <img src=x onerror=alert(1)> —— 利用事件属性
• <svg onload=alert(1)> —— 使用SVG标签
• javascript:alert(1) —— 在URL中注入

应对策略：使用白名单过滤属性和标签，禁止on*事件、javascript:协议等。

9. 后端框架的安全实践

主流框架提供XSS防护机制：

框架	防护机制	配置建议
React	默认转义JSX插值	避免使用dangerouslySetInnerHTML
Vue	{{ }}自动转义	禁用v-html除非必要
Spring Boot	Thymeleaf自动编码	启用spring.thymeleaf.mode=HTML5

10. 安全开发流程集成

将XSS防护融入CI/CD流程：

• 代码审查：检查所有用户输入输出点
• 自动化扫描：使用OWASP ZAP或Burp Suite进行渗透测试
• 日志监控：记录可疑输入行为
• 定期培训：提升团队安全意识