npm install dompurify --save
# 或
yarn add dompurify

<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.5/purify.min.js"></script>

import DOMPurify from 'dompurify'

const success = await login(DOMPurify.sanitize(username.value), DOMPurify.sanitize(password.value));
// 在提交表單時 凈化表單內(nèi)容 放置惡意信息或腳本

DOMPurify.sanitize('<img src=x onerror=alert(1)//>'); // 變成 <img src="x">
DOMPurify.sanitize('<svg><g/onload=alert(2)//<p>'); // 變成<svg><g></g></svg>
DOMPurify.sanitize('<p>abc<iframe//src=jAva&Tab;script:alert(3)>def</p>'); // 變成 <p>abc</p>
DOMPurify.sanitize('<math><mi//xlink:href="data:x,<script>alert(4)</script>" rel="external nofollow" >'); // 變成  <math><mi></mi></math>
DOMPurify.sanitize('<TABLE><tr><td>HELLO</tr></TABL>'); // 變成 <table><tbody><tr><td>HELLO</td></tr></tbody></table>
DOMPurify.sanitize('<UL><li><A HREF=//google.com>click</UL>'); // 變成 <ul><li><a  rel="external nofollow" >click</a></li></ul>

const config = {
    ALLOWED_TAGS: ['b', 'i', 'a', 'p'],  // 只允許這些標簽
    ALLOWED_ATTR: ['href', 'title'], // 只允許這些屬性
    FORBID_TAGS: ['script', 'style'], // 禁止 script 和 style 標簽
    FORBID_ATTR: ['onclick', 'onerror'] // 禁止事件屬性
};

const dirtyHTML = '<b onclick="alert(1)">點擊我</b>';
const cleanHTML = DOMPurify.sanitize(dirtyHtml, config);

// 輸出結(jié)果： <b>點擊我</b>

DOMPurify.addHook('beforeSanitizeElements', (node) => {
  // 移除所有圖片的 src 屬性
  if (node.tagName === 'IMG') {
    node.removeAttribute('src');
  }
  return node;
});

const dirtyHtml = '<img src="x" onerror="alert(1)">';
const cleanHtml = DOMPurify.sanitize(dirtyHtml); // 輸出結(jié)果: <img>

const config = {
  USE_PROFILES: { svg: true, svgFilters: true, html: true },
};

const dirtySvg = '<svg><script>alert(1)</script></svg>';
const cleanSvg = DOMPurify.sanitize(dirtySvg, config); // 移除 <script> 后的安全 SVG

const config = {
  ALLOWED_URI_REGEXP: /^(https?|ftp|mailto):/i, // 只允許 http/https/ftp/mailto
};

const dirtyLink = '<a href="javascript:alert(1)" rel="external nofollow" >點擊</a>';
const cleanLink = DOMPurify.sanitize(dirtyLink, config); // href 被移除

// 假設 editor 是富文本編輯器實例
const rawContent = editor.getHtml();
const cleanContent = DOMPurify.sanitize(rawContent, {
  ALLOWED_TAGS: ['p', 'b', 'i', 'u', 'a', 'img'],
  ALLOWED_ATTR: ['href', 'title', 'src', 'alt'],
});

const config = {
  ALLOWED_TAGS: ['p', 'b', 'i', 'a', 'img', 'br'],
  ALLOWED_ATTR: ['href', 'title', 'src', 'alt'],
  FORBID_ATTR: ['style', 'class'],
  ALLOWED_URI_REGEXP: /^(https?|ftp):/i,
  FORBID_TAGS: ['script', 'iframe'],
  RETURN_TRUSTED_TYPE: true, // 返回 TrustedHTML 對象（支持 Trusted Types）
};

const cleanHtml = DOMPurify.sanitize(dirtyHtml, config);