Vue3 中 v-html 的安全性控制 dompurify库使用

Vue3 中 v-html 的安全性控制

在 Vue3 中使用 v-html 指令时需要特别注意安全性问题，因为它会直接将 HTML 内容渲染到 DOM 中，可能导致 XSS（跨站脚本攻击）漏洞。

安全性风险

v-html 的主要风险是：

• 可能执行恶意脚本
• 可能加载外部资源
• 可能修改 DOM 结构

安全控制措施

1. 避免直接使用用户输入

永远不要直接将用户提供的内容通过 v-html 渲染：

// 危险！不要这样做
<div v-html="userProvidedContent"></div>

2. 使用 DOMPurify 净化 HTML

import DOMPurify from 'dompurify';

// 在渲染前净化HTML
const safeHtml = DOMPurify.sanitize(userProvidedContent);

<div v-html="safeHtml"></div>

3. 内容安全策略 (CSP)

设置严格的 CSP 可以减轻潜在的 XSS 影响：

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

4. 白名单过滤

只允许特定的 HTML 标签和属性：

const clean = DOMPurify.sanitize(dirty, {
  ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a'],
  ALLOWED_ATTR: ['href', 'title']
});

5. 服务器端过滤

在将内容存储到数据库前，先在服务器端进行过滤。

6. 替代方案

考虑使用以下更安全的替代方案：

• 使用 {{ }} 插值（自动转义 HTML）
• 使用 Vue 的渲染函数或 JSX
• 使用专门的组件库处理富文本

最佳实践

1. 尽可能避免使用 v-html - 大多数情况下有更安全的替代方案
2. 最小权限原则 - 只允许必要的 HTML 标签和属性
3. 多层防御 - 结合客户端和服务器端的过滤
4. 定期更新 - 保持净化库（如 DOMPurify）为最新版本

记住：安全是一个持续的过程，不是一次性的措施。即使使用了净化库，也应定期审查和测试您的实现。