ASP.Net Core 2中存储显示QuillJS HTML内容并防范JS注入问询

我来帮你搞定这个问题——这确实是用富文本编辑器时很常见的痛点：既要保留Quill的格式化HTML，又要彻底杜绝JS注入风险。下面是完整的解决方案，包含你需要的类名和代码示例：

1. 存储前：用DOMPurify过滤危险内容 #

最可靠的方式是用专门的HTML净化库DOMPurify，它会自动移除所有危险的脚本、事件属性、javascript:伪协议等，同时保留Quill生成的合法格式化标签（比如<b>、<i>、<blockquote>这些）。

具体步骤： #

• 先通过npm安装DOMPurify：npm install dompurify
• 在获取Quill的HTML内容后，立刻用DOMPurify净化再存入数据库

import DOMPurify from 'dompurify';
import Quill from 'quill';

// 初始化Quill编辑器
const quillInstance = new Quill('#editor-container', {
  theme: 'snow'
});

// 当你需要保存编辑器内容时
const rawEditorHtml = quillInstance.root.innerHTML; // 获取编辑器的原始HTML
const safeHtml = DOMPurify.sanitize(rawEditorHtml); // 执行净化操作

// 现在safeHtml就是安全的，直接存到数据库即可
fetch('/api/save-content', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ content: safeHtml })
});

这里的核心类/方法：

• DOMPurify：负责HTML净化的核心类
• DOMPurify.sanitize()：执行净化的方法，会严格过滤所有危险内容，同时保留合法的格式化标签

2. 渲染时：安全输出HTML，避免自动转义 #

前端框架（比如React/Vue）默认会转义HTML内容，所以需要用框架提供的“原始HTML渲染”方式，同时再次净化（双重保险），防止存储环节可能出现的疏漏：

React示例： #

import DOMPurify from 'dompurify';

function ContentDisplay({ storedHtml }) {
  // 再次净化，确保万无一失
  const safeRenderHtml = DOMPurify.sanitize(storedHtml);
  // 使用dangerouslySetInnerHTML渲染未转义的HTML
  return <div dangerouslySetInnerHTML={{ __html: safeRenderHtml }} />;
}

Vue示例： #

<template>
  <!-- v-html指令用于渲染原始HTML -->
  <div v-html="safeRenderHtml"></div>
</template>

<script>
import DOMPurify from 'dompurify';

export default {
  props: ['storedHtml'],
  computed: {
    safeRenderHtml() {
      // 二次净化
      return DOMPurify.sanitize(this.storedHtml);
    }
  }
};
</script>

这里的关键API：

• React的dangerouslySetInnerHTML：专门用于渲染未转义的HTML（名字里的“dangerously”是提醒你必须确保内容安全，所以一定要先净化）
• Vue的v-html指令：同样用于渲染原始HTML内容

3. 补充：Quill内置的基础过滤 #

Quill本身有一个sanitize配置项，默认是true，它会在编辑器内部过滤一些明显危险的内容，但它的规则比较基础，覆盖不了所有边缘情况（比如编码后的脚本）。所以更推荐和DOMPurify配合使用，双重保障：

const quillInstance = new Quill('#editor-container', {
  theme: 'snow',
  sanitize: true // 开启内置基础过滤，默认已启用
});

为什么不手动写正则过滤？ #

手动用正则或字符串替换来过滤危险内容很容易遗漏——比如各种编码后的脚本、不常见的事件属性（onmouseover、onerror等）。DOMPurify是经过安全审计的成熟库，能覆盖绝大多数攻击场景，比手动实现可靠得多。

内容的提问来源于stack exchange，提问作者Praveen Rai