HTML sanitizer v7.0.0部署至服务器后调用方法报错求助

可能的原因及解决方案 #

1. 构建工具Tree-Shaking/代码压缩误删核心逻辑 #

生产构建时，webpack、Vite等工具的tree-shaking可能误将sanitizer核心代码标记为“未使用”而删除。

• 配置构建工具排除sanitizer包的优化：
  • Webpack：在webpack.config.js中添加相关配置

    module.exports = {
      optimization: {
        sideEffects: true
      },
      module: {
        noParse: /html-sanitizer/
      }
    };
    

  • Vite：在vite.config.js中设置排除优化

    export default {
      optimizeDeps: {
        exclude: ['html-sanitizer']
      }
    }
    

2. 生产环境Polyfill缺失 #

Sanitizer可能依赖特定浏览器API，生产构建时未添加对应polyfill会导致报错。

• 查阅sanitizer文档确认所需polyfill（如服务端渲染场景可能需要jsdom模拟DOM环境）
• 在构建配置中添加对应polyfill，或初始化sanitizer前确保环境具备所需API

3. 依赖版本不一致 #

本地开发依赖与服务器构建时安装的依赖版本不匹配，引发兼容性问题。

• 将package-lock.json或yarn.lock同步到服务器，构建时执行npm ci或yarn install --frozen-lockfile锁定依赖版本

4. 模块引入路径错误 #

构建后的bundle中，sanitizer的引入路径可能出现解析问题。

• 避免使用相对路径引入，直接用包名引入：

  import sanitizer from 'html-sanitizer';
  

• 检查构建输出文件，确认sanitizer模块被正确打包

5. 服务器环境执行限制 #

部分服务器的CSP策略、沙箱环境可能阻止sanitizer的操作。

• 检查服务器Content-Security-Policy配置，确保允许sanitizer执行必要DOM操作
• 服务端渲染场景下，确保服务器提供完整DOM支持（如使用jsdom模拟）

验证XSS防护有效性 #

修复报错后，验证输入框防护效果：

• 输入测试代码：<script>alert('XSS')</script>
• 确认sanitizer处理后输出为纯文本或安全HTML，脚本不会执行

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