sanitizer.allowelements仅接受纯字符串数组，传入对象、正则或非数组类型会静默退化为默认策略；需配合allowattributes显式声明属性，且style属性不支持css声明级过滤；ie及safari 16.4前不支持，须检测typeof sanitizer === "function"并降级。
Sanitizer.allowElements 只接受字符串数组，不能传入对象或正则
浏览器原生 Sanitizer 构造函数的 allowElements 选项必须是纯字符串数组，比如 ["p", "br", "strong"]。传 { p: true }、/^h[1-6]$/ 或空数组 [] 都会静默失败——不是报错，而是直接退化为默认策略（允许全部基础标签），这点非常容易被忽略。
常见误用场景：
- 从后端 JSON 配置里读取白名单，没做
Array.isArray()校验，结果传了字符串"p,br,strong" - 想动态生成标签列表，但拼接时多包了一层
["['p','br']"]（成了二维数组） - 把
allowElements和旧版 DOMPurify 的ALLOWED_TAGS混淆，以为支持通配符
不支持自定义属性，allowElements 仅控制标签名，不处理 attributes
只配 allowElements: ["img"] 是不够的。即使 <img> 被保留，它的 src、alt 等属性仍会被全部剥离，最终变成空标签 <img>。必须显式配置 allowAttributes 并绑定到对应元素：
const sanitizer = new Sanitizer({
allowElements: ["img"],
allowAttributes: {
src: ["img"],
alt: ["img"],
class: ["img"]
}
});
注意：allowAttributes 的键是属性名，值是**允许该属性的元素名数组**，不是反过来。写成 {"img": ["src"]} 会完全无效。
内联样式和 style 属性需额外放行，且不支持 CSS 白名单过滤
即使你写了 allowElements: ["span"] 和 allowAttributes: { style: ["span"] }，最终渲染出的 <span style="color:red;position:absolute"></span> 里的 position:absolute 依然会被自动移除——Sanitizer 对 style 属性只做“是否允许存在”的二值判断，不做 CSS 声明级过滤。
如果业务真需要限制样式范围（比如只允许 color 和 font-weight），得在调用 sanitize() 前手动预处理 HTML 字符串，或改用 DOMPurify 这类支持 ADD_ATTR + CUSTOM_HTML_RULES 的库。
IE 和 Safari 16.4 之前不支持，检测不到 Sanitizer 构造函数就得降级
直接 new Sanitizer() 在 Safari ≤16.3、所有 IE 版本、部分安卓 WebView 中会抛 ReferenceError。不能只靠 try/catch，因为有些环境会静默返回 undefined。
安全检测方式：
if (typeof Sanitizer === "function") {
const sanitizer = new Sanitizer({ allowElements: ["p", "br"] });
return sanitizer.sanitize(dirtyHtml);
} else {
// 必须 fallback：例如用 innerText 提取纯文本，或引入轻量 polyfill（如 dompurify 的最小配置）
}
特别注意：Chrome 120+ 开始支持，但 Android Chrome WebView 的支持滞后约 2–3 个大版本，上线前务必用真实设备 UA 测试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
