// 创建 Sanitizer 实例const sanitizer = new Sanitizer(options);

const sanitizer = new Sanitizer({  // 允许保留的元素  elements: ["div", "p", "span", "a", "img"],  // 需要完全移除的元素  removeElements: ["script", "style", "iframe"],  // 用其子元素替换元素  replaceWithChildrenElements: ["b", "i"],  // 允许保留的属性  attributes: ["class", "id"],  // 移除的属性（支持通配）  removeAttributes: ["onclick", "onload", "onerror"]});

// 同时允许 SVG 和 HTML 中的同名元素const config = {  elements: [    "div",  // 默认 HTML 命名空间    { name: "circle", namespace: "http://www.w3.org/2000/svg" }  ]};

<p>文本</p> → <p>文本</p>

<script>alert(1)</script> →（空）

<b>文本</b> → 文本

const untrustedString = 'abc <script>alert(1)</script> def';const element = document.getElementById('target');

// 不安全的做法// element.innerHTML = untrustedString;

// 安全的做法element.setHTML(untrustedString);console.log(element.innerHTML); // "abc def"

// 允许特定的不安全内容（仅当确实需要时使用）const customConfig = { elements: ["div", "button"], attributes: ["onclick"] };element.setHTMLUnsafe(userInput, customConfig);// ⚠️ 仅当确实需要包含不安全实体时才使用此方法

const sanitizer = new Sanitizer();// 动态添加配置sanitizer.allowElement('div', ['class', 'id']);sanitizer.allowElement('img', ['src', 'alt']);sanitizer.removeAttribute('onclick');sanitizer.setComments(false);sanitizer.setDataAttributes(true);// 获取当前配置console.log(sanitizer.get());

const allowlistSanitizer = new Sanitizer({  elements: ["p", "strong", "em", "a", "img"],  attributes: ["href", "src", "alt"]});

const denylistSanitizer = new Sanitizer({  removeElements: ["script", "iframe", "object"],  removeAttributes: ["onclick", "onerror", "onload"]});

// 使用默认配置const defaultSanitizer = new Sanitizer();

// 在默认安全配置基础上，进一步允许不安全实体// 注意：安全方法会忽略 unsafe 元素，所以需要结合不安全方法使用const customSanitizer = new Sanitizer();customSanitizer.allowElement("button", ["onclick"]);element.setHTMLUnsafe(untrustedString, customSanitizer);

// 包含恶意代码的用户输入const userComment = `  <div>    <p>This is a great article!</p>    <img src="x" onclick="alert('XSS')">    <script>stealCookies()</script>    <a href="javascript:alert('evil')">Click me</a>  </div>`;

// 方式一：直接使用 setHTML（默认安全配置）document.getElementById('comment').setHTML(userComment);

// 输出：<div><p>This is a great article!</p><img src="x"><a>Click me</a></div>

class SafeRichEditor {  constructor(containerId) {    this.container = document.getElementById(containerId);    // 创建适合富文本编辑的 Sanitizer    this.sanitizer = new Sanitizer({      elements: [        "p", "h1", "h2", "h3", "h4",        "ul", "ol", "li", "blockquote",        "strong", "em", "a", "img", "br", "hr"      ],      attributes: ["href", "target", "src", "alt"]    });  }
    setContent(html) {    // 使用安全方法注入清理后的内容    this.container.setHTML(html, { sanitizer: this.sanitizer });  }
    getContent() {    return this.container.innerHTML;  }}

// 使用示例const editor = new SafeRichEditor('editor-container');editor.setContent(userInput);

const host = document.getElementById('host');const shadowRoot = host.attachShadow({ mode: 'open' });const userContent = '<p>Shadow DOM content</p><script>alert("XSS")</script>';

// 安全地注入到 Shadow DOMshadowRoot.setHTML(userContent);

// 结果：<p>Shadow DOM content</p>（script 标签被移除）

// 创建一个清理器，将 <strong> 元素替换为其子文本const sanitizer = new Sanitizer({ elements: ["p", "em", "strong"] });sanitizer.replaceElementWithChildren("strong");

​const input = "<p>This is <strong>important</strong> text with <em>emphasis</em>.</p>";const element = document.getElementById("output");element.setHTML(input, { sanitizer: sanitizer });

// 输出：<p>This is important text with <em>emphasis</em>.</p>

// 使用 parseHTML 静态方法解析 HTML 为安全的 Documentconst unsafeHtml = '<div>Hello</div><script>alert("XSS")</script>';const doc = Document.parseHTML(unsafeHtml);

// doc 是一个安全的 Document 对象，其中不包含 script 元素const safeContent = doc.body.innerHTML; // <div>Hello</div>

// 创建 Trusted Type 策略，内部集成 Sanitizer APIconst policy = trustedTypes.createPolicy('sanitizer-policy', {  createHTML: (input) => {    const sanitizer = new Sanitizer();    const fragment = sanitizer.sanitize(input);    const div = document.createElement('div');    div.appendChild(fragment);    return div.innerHTML;  }});

// 使用策略创建安全的 HTMLconst safeHTML = policy.createHTML(userInput);element.innerHTML = safeHTML;

// 检测 Sanitizer API 是否可用if (window.Sanitizer && Element.prototype.setHTML) {  // 使用原生 API  element.setHTML(userInput);} else {  // 回退到 DOMPurify  element.innerHTML = DOMPurify.sanitize(userInput);}

const { JSDOM } = require('jsdom');const { Sanitizer } = require('@ungap/sanitizer');const dom = new JSDOM('<!DOCTYPE html>');const sanitizer = new Sanitizer({ window: dom.window });const cleanHTML = sanitizer.sanitize(userInput);

// 错误：直接使用 innerHTMLelement.innerHTML = userInput;

// 正确：使用 setHTMLelement.setHTML(userInput);

// 评论区的严格配置const commentSanitizer = new Sanitizer({  elements: ["p", "strong", "em", "a", "br"],  attributes: ["href"]});

// 博客正文的宽松配置const blogSanitizer = new Sanitizer({  elements: ["p", "h1", "h2", "h3", "ul", "ol", "li", "img", "a", "blockquote", "code"],  attributes: ["href", "src", "alt", "title"]});

<!-- 设置严格的 CSP 作为纵深防御 --><meta http-equiv="Content-Security-Policy"       content="default-src 'self'; script-src 'none'; object-src 'none'">

function safelyInjectHTML(element, html) {  if (element.setHTML) {    element.setHTML(html);  } else {    element.innerHTML = DOMPurify.sanitize(html);  }}