前端安全之DOMPurify基礎(chǔ)安裝與用法

更新時間：2025年06月20日 09:05:22 作者：巴巴博一

這篇文章主要介紹了前端安全之DOMPurify基礎(chǔ)安裝與用法的相關(guān)資料,DOMPurify是防御XSS攻擊的HTML凈化庫,支持npm/yarn安裝及CDN引入,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

前言

DOMPurify時一款專門用于防御XSS攻擊的庫，通過凈化HTML的內(nèi)容，移除惡意腳本，同時保留安全的HTML標簽和數(shù)學。以下是基礎(chǔ)使用指南，涵蓋基礎(chǔ)的安裝與用法。

1，安裝DOMPurify

通過npm或yarn安裝

npm install dompurify --save
# 或
yarn add dompurify

或通過CDN引入

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

2，基礎(chǔ)用法

常常設(shè)置在表單的提交中，或者需要根據(jù)用戶改變html內(nèi)容的時候，凈化字符串，放置隱藏惡意腳本

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>

3，進階用法

配置config，允許或禁止特定的標簽或者屬性跳過凈化

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>

自定義鉤子函數(shù)

在凈化過程中插入自定義邏輯：

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>

4. 處理特殊場景

允許 SVG 內(nèi)容

默認情況下，DOMPurify 會移除 SVG 中的潛在危險內(nèi)容。若需允許 SVG：

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

凈化 URL 屬性（如 href/src）

防止 javascript: 協(xié)議：

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 被移除

處理富文本編輯器（如 CKEditor、Quill）

在提交富文本內(nèi)容前凈化：

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

5. 常見問題解答

Q1：DOMPurify 能防御所有 XSS 嗎？

不能。它主要防御 HTML 注入型 XSS，但無法處理：
- URL 中的 JavaScript 協(xié)議（需配合正則校驗）。
- CSS 表達式（如 expression(...)）。
- 非 HTML 上下文（如 JSON 注入）。

Q2：如何處理用戶上傳的 HTML 文件？

使用 DOMPurify 解析并凈化內(nèi)容，同時限制文件類型和大小。

Q3：DOMPurify 是否影響性能？

對于常規(guī)內(nèi)容（如評論、文章），性能影響可忽略。
處理大型 HTML（如 10MB 以上）時，建議在服務端異步處理。

6，完整配置示例

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);