在Cloudflare Pages的Remix应用中，寻求安全的用户输入sanitization替代方案

问题说明 #

我在部署于Cloudflare Pages的Remix应用中尝试使用sanitize-html包，但未能成功。原因是该包依赖process polyfill，而Cloudflare的运行环境并非基于Node.js。

替代方案推荐 #

1. 分环境使用DOMPurify #

• 客户端：直接使用原生DOMPurify，它基于浏览器DOM API，轻量安全，无额外依赖。
  安装：npm install dompurify
  使用示例：

  import DOMPurify from 'dompurify';
  const sanitizedContent = DOMPurify.sanitize(unsafeHtmlString);
  

• 服务端（Cloudflare Pages）：Cloudflare Workers Runtime内置DOM接口，无需引入JSDOM，直接在Remix的loader或action中使用DOMPurify即可，无需额外配置。

2. 为sanitize-html添加polyfill（可选） #

如果坚持使用sanitize-html，可以手动补全process依赖：

• 安装依赖：npm install process
• 在应用入口（如app/root.tsx）添加polyfill代码：

  import process from 'process';
  if (!globalThis.process) {
    globalThis.process = process;
  }
  

  注意：这种方式会增加打包体积，需测试兼容性，优先级低于原生适配方案。

3. 基于Cloudflare HTMLRewriter自定义清理逻辑 #

利用Cloudflare原生的HTMLRewriter API构建定制化清理规则，无外部依赖，性能出色，适合需要精细控制的场景。示例：

export async function loader() {
  const unsafeHtml = '<script>malicious()</script><div>安全文本</div>';
  const sanitizedHtml = await new HTMLRewriter()
    .on('script, style, iframe', {
      element(el) {
        el.remove();
      }
    })
    .transform(new Response(unsafeHtml))
    .text();
  return json({ sanitizedHtml });
}

你可以根据需求扩展规则，比如允许特定标签、属性等。

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