您现在的位置是：网站首页 > 富文本输入的安全处理（如 XSS 过滤）文章详情

富文本输入的安全处理（如 XSS 过滤）

陈川【前端安全】 20571人已围观 3191字

富文本输入的安全处理是前端开发中不可忽视的重要环节。用户提交的富文本内容可能包含恶意脚本，如不进行适当过滤，极易引发XSS攻击。正确处理富文本输入需要平衡安全性与功能性，确保用户输入的内容既安全又能保留必要的格式。

XSS攻击的基本原理

XSS（跨站脚本攻击）通过注入恶意脚本到网页中，当其他用户浏览该页面时，脚本会在其浏览器中执行。富文本编辑器允许用户输入HTML标签，这为XSS攻击提供了便利条件。常见的XSS攻击类型包括：

存储型XSS：恶意脚本被保存到服务器数据库中，每次页面加载时执行。
反射型XSS：恶意脚本作为请求参数的一部分，服务器返回时未经过滤直接嵌入页面。
DOM型XSS：前端JavaScript动态操作DOM时未对用户输入进行过滤。

例如，用户提交以下内容到富文本编辑器：

<script>alert('XSS攻击');</script>
<img src="x" onerror="alert('XSS攻击')">

如果未经过滤直接渲染到页面，将导致脚本执行。

富文本输入的安全处理策略

输入过滤与输出编码

安全处理的核心原则是：对输入进行严格过滤，对输出进行编码。输入过滤确保只有允许的标签和属性被保留，输出编码则防止剩余内容被解释为可执行代码。

输入过滤示例

使用第三方库（如DOMPurify）过滤富文本输入：

import DOMPurify from 'dompurify';

const dirtyHtml = '<script>alert("XSS");</script><p>安全内容</p>';
const cleanHtml = DOMPurify.sanitize(dirtyHtml);
console.log(cleanHtml); // 输出: "<p>安全内容</p>"

输出编码示例

即使过滤后，输出时仍建议使用文本节点而非innerHTML：

const sanitizedContent = '<p>用户内容</p>';
document.getElementById('output').textContent = sanitizedContent;
// 或者使用createTextNode

白名单机制

白名单机制是富文本过滤的核心。通过定义允许的标签、属性和样式，确保只有安全的HTML被保留。例如：

const config = {
  ALLOWED_TAGS: ['p', 'strong', 'em', 'a'],
  ALLOWED_ATTR: ['href', 'title'],
  ALLOWED_URI_REGEXP: /^(https?|mailto):/i
};

处理特殊场景

处理CSS和样式

内联样式也可能包含恶意代码：

<p style="background: url('javascript:alert(1)')">看似无害</p>

解决方案是禁用危险属性或使用CSS解析器验证样式：

DOMPurify.addHook('uponSanitizeAttribute', (node, data) => {
  if (data.attrName === 'style') {
    // 自定义样式过滤逻辑
  }
});

处理SVG和MathML

SVG可以包含脚本和外部资源：

<svg><script>alert('XSS')</script></svg>

需要在白名单中明确限制或完全禁用这些标签。

实际案例分析

案例1：绕过基础过滤的攻击

攻击者使用编码或罕见语法绕过简单过滤：

<img src="x" onerror="&#x61;&#x6c;&#x65;&#x72;&#x74;&#x28;&#x31;&#x29;">

解决方案：过滤前先解码HTML实体，再进行过滤。

案例2：依赖客户端过滤的风险

仅客户端过滤不可靠，攻击者可直接向服务器发送恶意数据。必须结合服务端验证：

// 服务端示例（Node.js）
const sanitizeHtml = require('sanitize-html');

app.post('/content', (req, res) => {
  const cleanHtml = sanitizeHtml(req.body.content, {
    allowedTags: ['p', 'b', 'i']
  });
  // 存储到数据库
});

高级防护技术

Content Security Policy (CSP)

CSP作为最后防线，限制脚本执行来源：

Content-Security-Policy: default-src 'self'; script-src 'none'

即使XSS漏洞存在，也能阻止脚本执行。

沙盒iframe展示内容

将用户内容放入沙盒iframe中隔离：

<iframe sandbox="allow-same-origin" srcdoc="<p>用户内容</p>"></iframe>

定期更新过滤规则

XSS攻击手法不断演变，需要定期更新过滤库和规则：

npm update dompurify sanitize-html

性能与安全的平衡

过度过滤可能影响功能，需根据场景调整策略。例如论坛系统可能需要更多格式支持：

const forumConfig = {
  ALLOWED_TAGS: [
    'p', 'br', 'strong', 'em', 'a', 'img', 'ul', 'ol', 'li',
    'blockquote', 'code', 'pre'
  ],
  ALLOWED_ATTR: ['href', 'src', 'alt', 'title', 'class']
};

测试与验证

建立自动化测试确保过滤效果：

test('XSS过滤测试', () => {
  const maliciousInput = '<script>alert(1)</script><p>test</p>';
  expect(DOMPurify.sanitize(maliciousInput)).toBe('<p>test</p>');
});