javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > 前端安全DOMPurify使用

前端安全之DOMPurify基础安装与用法

作者：巴巴博一

这篇文章主要介绍了前端安全之DOMPurify基础安装与用法的相关资料,DOMPurify是防御XSS攻击的HTML净化库,支持npm/yarn安装及CDN引入,文中通过代码介绍的非常详细,需要的朋友可以参考下

前言

DOMPurify时一款专门用于防御XSS攻击的库，通过净化HTML的内容，移除恶意脚本，同时保留安全的HTML标签和数学。以下是基础使用指南，涵盖基础的安装与用法。

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，基础用法

常常设置在表单的提交中，或者需要根据用户改变html内容的时候，净化字符串，放置隐藏恶意脚本

import DOMPurify from 'dompurify'

const success = await login(DOMPurify.sanitize(username.value), DOMPurify.sanitize(password.value));
// 在提交表单时 净化表单内容 放置恶意信息或脚本

 效果举例：

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 href="//google.com" 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);

// 输出结果： <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); // 输出结果: <img>

4. 处理特殊场景

允许 SVG 内容

默认情况下，DOMPurify 会移除 SVG 中的潜在危险内容。若需允许 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: 协议：

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）

在提交富文本内容前净化：

// 假设 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 吗？

Q2：如何处理用户上传的 HTML 文件？

Q3：DOMPurify 是否影响性能？

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

7. 官方相关

到此这篇关于前端安全之DOMPurify基础安装与用法的文章就介绍到这了,更多相关前端安全DOMPurify使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

阅读全文