在Next.js中是否需要对Tiptap文本编辑器进行sanitise？求最优sanitiser推荐

一、是否需要执行Sanitise操作？ #

必须执行，核心原因如下：

• Tiptap允许用户输入或插入自定义HTML、富文本内容，未清理的内容极易引入XSS攻击风险（比如恶意脚本、窃取用户信息的代码）。
• 无论Next.js采用SSR（服务端渲染）还是SSG（静态站点生成）模式，渲染未过滤的用户生成内容（UGC）时，都会把危险代码注入页面，引发安全漏洞。
• 即便限制了Tiptap的可用节点，用户仍可能通过控制台或其他手段插入非法内容，清理是必要的安全兜底环节。

二、适配Next.js与Tiptap的最优Sanitiser #

1. Tiptap官方扩展：@tiptap/extension-sanitizer #

这是首选方案，完全适配Tiptap的节点体系，无需复杂额外配置：

• 它会基于你启用的Tiptap节点/标记自动过滤内容，只保留合法标签和属性，不会误删正常的富文本格式。
• 使用方式简单，初始化编辑器时加入该扩展即可：

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
import Sanitizer from '@tiptap/extension-sanitizer'

const editor = new Editor({
  extensions: [
    StarterKit,
    Sanitizer.configure({
      // 可自定义允许的标签/属性，比如谨慎允许<iframe>
      allowedTags: [...Sanitizer.defaultOptions.allowedTags, 'iframe'],
      allowedAttributes: {
        ...Sanitizer.defaultOptions.allowedAttributes,
        iframe: ['src', 'width', 'height'],
      },
    }),
  ],
  content: '<p>你的富文本内容</p>',
})

• 在Next.js中配合dangerouslySetInnerHTML渲染时，经编辑器清理后的内容安全性更高，建议同时在服务端做二次兜底清理。

2. DOMPurify（通用HTML清理库） #

如果需要更灵活的全局清理（比如存储前、渲染前的二次校验），DOMPurify是优秀的补充选项：

• 它能处理各类复杂HTML注入场景，支持自定义过滤规则，完美兼容Next.js的SSR/SSG流程。
• 可在Tiptap内容保存到数据库前，或Next.js页面组件渲染前执行清理：

import DOMPurify from 'dompurify'

// 内容保存前清理
const sanitizedContent = DOMPurify.sanitize(editor.getHTML())

// Next.js组件中渲染时的兜底清理
function RichTextContent({ content }) {
  const sanitized = DOMPurify.sanitize(content)
  return <div dangerouslySetInnerHTML={{ __html: sanitized }} />
}

• 注意：需和Tiptap的配置对齐，避免DOMPurify过滤掉Tiptap允许的合法标签（如<figure>、<figcaption>），可通过DOMPurify的ADD_TAGS、ADD_ATTR选项添加白名单。

总结 #

优先使用Tiptap官方的@tiptap/extension-sanitizer做编辑器层面的实时清理，再配合DOMPurify在数据存储或服务端渲染时做二次兜底，既能保证Tiptap的富文本功能正常，又能彻底规避XSS风险。

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