sanitizeFor 返回 DocumentFragment 而非字符串，需用 innerHTML 转字符串或 replaceChildren 直接插入；其容器类型影响过滤规则；须检测 Sanitizer 可用性并复用配置实例，避免二次解析漏洞。
直接调用 sanitizeFor 会返回 DocumentFragment，不是 HTML 字符串
很多人以为 sanitizeFor('div', html) 返回的是带净化后 HTML 的字符串，结果直接赋值给 innerHTML 或插入 DOM 时发现内容为空或结构异常。这是因为 sanitizeFor 返回的是一个 DocumentFragment —— 它是真实 DOM 节点容器，但不是字符串。
正确做法是显式提取其内容：
- 若需字符串：用
.innerHTML（注意仅适用于sanitizeFor返回的 fragment 内部有单一根元素时） - 若需插入 DOM：直接用
appendChild()或replaceChildren()，不经过字符串转换 - 避免链式调用如
sanitizeFor('div', s).innerHTML.innerHTML—— 会报错
示例：
const dirty = '<div onclick="alert(1)">Hello</div><script>evil()</script>';
const sanitizer = new Sanitizer();
const frag = sanitizer.sanitizeFor('div', dirty); // ← DocumentFragment
// ✅ 正确：转字符串（仅当预期单根时）
el.innerHTML = frag.innerHTML; // <div>Hello</div>
// ✅ 正确：直接插入（更安全，无二次解析）
el.replaceChildren(frag); // 推荐用于动态渲染
sanitizeFor 的第一个参数决定输出节点类型，影响属性保留逻辑
传入的容器类型（如 'div'、'span'、'article'）不只是“包一层”，它会触发 Sanitizer 内部的上下文感知过滤规则。比如：
立即学习“前端免费学习笔记（深入）”；
-
sanitizeFor('span', ...)会拒绝块级元素（如<p></p>、<div>），自动剥离或降级处理 <li> <code>sanitizeFor('div', ...)允许嵌套块元素，但会严格过滤on*属性和style中的危险值 - 传
'template'会保留<template></template>内容但不执行脚本，适合预编译场景 - 用
typeof Sanitizer !== 'undefined'判断（不是typeof window.Sanitizer，因为它是全局构造函数） - 降级方案不能只返回原字符串 —— 那等于放弃防护；至少应 fallback 到
textContent或轻量转义函数 - 服务端渲染（SSR）场景下，该 API 永远不可用，需提前判断执行环境
别硬套 'div' 了事。根据你最终要挂载的目标容器语义选 —— 这直接影响哪些标签/属性被保留。
不检查 Sanitizer 是否可用就调用，会直接抛 ReferenceError
Chrome 125+ 默认启用，Firefox 和 Safari 仍需手动开启实验功能（about:config 或 safari://experimental），Node.js 环境完全不可用。未检测就写 new Sanitizer()，在不支持的浏览器里页面直接白屏或中断 JS 执行。
从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。
必须做运行时检测：
示例检测逻辑：
function safeSanitize(html, container = 'div') {
if (typeof Sanitizer === 'undefined') {
console.warn('Sanitizer not supported');
return escapeHtml(html); // 自定义转义函数，非直接返回 html
}
try {
return new Sanitizer().sanitizeFor(container, html);
} catch (e) {
console.error('Sanitization failed:', e);
return document.createDocumentFragment(); // 空 fragment，安全兜底
}
}
自定义配置传给 Sanitizer 构造函数，但 sanitizeFor 不接受配置参数
常见误解：以为能在每次 sanitizeFor 调用时传配置对象，像 sanitizeFor('div', html, config) —— 实际上该方法签名只有两个参数，配置必须在构造 Sanitizer 实例时传入。
这意味着：
- 不同策略需要不同实例（例如富文本编辑器用宽松配置，评论区用严格配置）
- 不要在组件内反复
new Sanitizer({ allowElements: [...] })—— 创建开销不小，应复用实例 - 配置项如
allowAttributes是对象，键为属性名，值为允许的元素数组：{ src: ['img', 'iframe'] }，不是字符串列表
错误写法：
// ❌ 无效：sanitizeFor 第三个参数会被忽略
sanitizer.sanitizeFor('div', html, { allowElements: ['b', 'i'] });
正确写法：
// ✅ 配置在构造时传入
const strictSanitizer = new Sanitizer({
allowElements: ['b', 'i', 'br'],
dropAttributes: ['class', 'id'] // 显式丢弃 class/id
});
const frag = strictSanitizer.sanitizeFor('div', html);
最易被忽略的一点：即使用了 sanitizeFor，如果后续又用 innerHTML 把它生成的字符串再塞进另一个元素，就可能触发二次解析漏洞 —— 比如字符串里含 <script> 被误还原。所以优先走 replaceChildren(frag) 这条路径，绕过字符串中介环节。
