本文详解在 react 项目中启用实验性 html Sanitizer API 的完整方案，包括解决 ESLint 报错 Sanitizer is not defined 的三种可靠方法，并提供可直接运行的代码示例与生产级注意事项。
本文详解在 react 项目中启用实验性 html sanitizer api 的完整方案，包括解决 eslint 报错 `sanitizer is not defined` 的三种可靠方法，并提供可直接运行的代码示例与生产级注意事项。
HTML Sanitizer API 是浏览器原生提供的轻量级、高性能 HTML 内容净化接口（目前为 W3C 工作草案），支持在客户端对富文本进行基于策略的安全过滤（如移除 <script>、危险属性、内联事件等），无需引入第三方库（如 domPurify）。然而，由于该 API 尚处于实验阶段，主流前端工具链（尤其是 ESLint）默认未将其识别为合法全局变量，因此在 React 项目中直接调用 new Sanitizer() 会触发 no-undef 编译警告或错误。</script>
✅ 正确启用 Sanitizer API 的三种方式
1. 局部声明：使用 ESLint 注释（推荐用于快速验证）
在具体使用 Sanitizer 的文件顶部添加全局声明注释，仅对该文件生效：
/* global Sanitizer */ function sanitizeText(unsanitizedString) { // 检查浏览器兼容性（重要！） if (typeof Sanitizer === 'undefined') { console.warn('Sanitizer API is not supported in this browser.'); return unsanitizedString; // 或抛出错误/降级处理 } try { const sanitizer = new Sanitizer(); const fragment = sanitizer.sanitizeFor('div', unsanitizedString); return fragment.innerHTML; } catch (err) { console.error('Sanitization failed:', err); return ''; // 或返回原始字符串（需权衡安全性） } } // 使用示例 const dirty = '<div onclick="alert(1)">Click me</div><script>alert("xss")</script>'; console.log(sanitizeText(dirty)); // 输出: <div>Click me</div> （script 被移除，onclick 被剥离）⚠️ 注意：sanitizeFor(‘div’, …) 返回的是 DocumentFragment，务必通过 .innerHTML 提取纯净 HTML 字符串；直接插入 fragment 可能导致意外 DOM 行为。
2. 全局配置：修改 ESLint 配置文件（推荐用于团队项目）
在项目根目录的 ESLint 配置文件（如 .eslintrc.js 或 .eslintrc.json）中显式声明 Sanitizer 为只读全局变量：
立即学习“前端免费学习笔记（深入）”；
{ "globals": { "Sanitizer": "readonly" }, "rules": { "no-undef": "error" } }✅ 优势：一次配置，全项目生效；符合工程化规范；避免重复注释。
3. 长期方案：推动标准支持（社区共建）
当前 Sanitizer 未被 globals 包收录，你可：
- 在 globals 仓库提交 Issue，说明 API 状态（CanIUse 数据 显示 chrome 123+、edge 123+ 已支持）；
- 若获维护者认可，进一步 PR 新增定义（参考 globals.json 格式）；
- 同时关注 TypeScript DOM lib generator 进度，以获取类型定义支持。
? 安全与兼容性关键提醒
- 永远做运行时检测：if (typeof Sanitizer !== ‘undefined’) 不可省略——safari 和 firefox 当前暂不支持，生产环境必须提供降级逻辑（如回退至服务端净化或轻量正则过滤）；
- 不替代服务端校验：客户端 Sanitizer 仅用于 ux 优化（如实时预览），所有提交到后端的 HTML 必须再次服务端净化；
- 策略可控性：Sanitizer 支持传入配置对象（如 new Sanitizer({ allowElements: [‘p’, ‘br’] })），但当前浏览器实现较基础，复杂策略仍建议结合 DOMPurify；
- React 渲染注意：净化后的 HTML 字符串应通过 dangerouslySetInnerHTML 插入，切勿直接拼接或使用 innerHTML 操作 React 管理的 DOM。
✅ 总结
Sanitizer API 是现代 Web 安全演进的重要一步。在 React 中启用它，核心在于「绕过工具链限制」而非「修复代码错误」。优先采用 ESLint 配置方式统一管理，辅以严格的兼容性判断和降级策略，即可在保障安全的前提下，优雅接入这一原生净化能力。随着浏览器支持率提升，它有望成为富文本处理的标准基础设施。