本文详解在 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 为只读全局变量：
传媒企业网站系统使用热腾CMS(RTCMS),根据网站板块定制的栏目，如果修改栏目，需要修改模板相应的标签。站点内容均可在后台网站基本设置中添加。全站可生成HTML，安装默认动态浏览。并可以独立设置SEO标题、关键字、描述信息。源码包中带有少量测试数据，安装时可选择演示安装或全新安装。如果全新安装，后台内容充实后，首页才能完全显示出来。（全新安装后可以删除演示数据用到的图片，目录在https://
立即学习“前端免费学习笔记（深入）”；
{
"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 配置方式统一管理，辅以严格的兼容性判断和降级策略，即可在保障安全的前提下，优雅接入这一原生净化能力。随着浏览器支持率提升，它有望成为富文本处理的标准基础设施。
