Next.js 13中isomorphic-dompurify与dompurify兼容性问题求助

一、修复现有库的方案（针对开发模式报错） #

1. 通过Webpack配置忽略canvas模块 #

由于报错仅出现在开发模式，且服务端环境不需要canvas依赖，可在next.config.js中添加Webpack配置，忽略canvas模块：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config, { isServer }) => {
    if (isServer) {
      config.externals.push('canvas');
    }
    return config;
  },
};

module.exports = nextConfig;

修改后重启开发服务器，即可规避Module not found: Can't resolve 'canvas'错误。

2. 仅在客户端动态导入DOMPurify #

如果不需要在服务端执行HTML净化，可通过Next.js的动态导入功能，仅在客户端加载DOMPurify，避免服务端的依赖问题：

import dynamic from 'next/dynamic';

// 禁用SSR，仅在客户端加载
const DOMPurify = dynamic(() => import('dompurify'), { ssr: false });

// 使用示例
const sanitizeContent = (unsafeHTML) => {
  if (typeof DOMPurify !== 'undefined') {
    return DOMPurify.sanitize(unsafeHTML);
  }
  return '';
};

3. 解决canvas安装失败问题（可选） #

若尝试安装canvas失败，是因为node-pre-gyp需要C++编译环境，可先安装对应依赖再重试：

• macOS：执行xcode-select --install安装Xcode Command Line Tools
• Windows：安装Visual Studio Build Tools并勾选"C++开发工具"
• Linux：安装build-essential、python3等基础编译依赖

此步骤繁琐，仅推荐确实需要服务端使用canvas场景时尝试。

二、替代XSS防护库推荐 #

如果上述方案无法解决问题，可更换以下无额外编译依赖的XSS防护库：

• xss：轻量级库，API简洁，支持Node.js和浏览器环境，直接调用xss.filterXSS(unsafeHTML)即可完成净化，无特殊依赖。
• sanitize-html：功能全面，支持自定义允许的标签、属性、样式，配置灵活，适合复杂场景的HTML净化，无需额外编译环境。
• DOMPurify（纯客户端）：直接使用客户端版本的DOMPurify，无需isomorphic-dompurify，仅在浏览器环境运行，彻底规避服务端的依赖问题。

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