如何安全存储React Quill生成的HTML内容至数据库并还原展示？

核心逻辑 #

要同时保住HTML格式和防XSS注入，核心是安全过滤而非完全剥离HTML——只留合法的标签、属性，删掉恶意脚本相关内容。

具体操作步骤 #

1. 用HTML过滤库处理输入 #

推荐用dompurify，它能精准过滤恶意代码，保留正常富文本结构：

• 先装依赖：

  npm install dompurify
  # 或者yarn
  yarn add dompurify
  

• 在组件里处理Quill的输出：

  import DOMPurify from 'dompurify';
  
  const handleQuillChange = (rawHtml) => {
    // 过滤掉恶意内容，保留安全的HTML标签
    const safeHtml = DOMPurify.sanitize(rawHtml);
    // 把过滤后的内容存数据库
    saveToDb(safeHtml);
  };
  

2. 从数据库取内容后安全展示 #

取出已经过滤过的HTML后，直接用React的dangerouslySetInnerHTML渲染就行，因为提前处理过，不存在注入风险：

import { useState, useEffect } from 'react';

const RichTextDisplay = () => {
  const [safeContent, setSafeContent] = useState('');

  useEffect(() => {
    // 从数据库拉取内容
    fetchContent().then(fetchedHtml => {
      setSafeContent(fetchedHtml);
    });
  }, []);

  return <div dangerouslySetInnerHTML={{ __html: safeContent }} />;
};

3. 可选：自定义过滤规则 #

如果需要更严格的控制（比如只允许<p>、<br>、<b>这些标签），可以配置DOMPurify的白名单：

const safeHtml = DOMPurify.sanitize(rawHtml, {
  ALLOWED_TAGS: ['p', 'br', 'b', 'i', 'u'],
  ALLOWED_ATTR: [] // 不允许任何属性，也可以指定允许的比如class
});

为什么之前的方法失效？ #

你之前用的移除HTML字符的方式，是把所有HTML标签全剥了，自然只剩纯文本。而DOMPurify是选择性保留安全的HTML结构，既保住了富文本格式，又堵死了XSS漏洞。

内容的提问来源于stack exchange，提问作者nika bedenashvili