在前端开发中，我们通常需要对用户输入的内容进行过滤和处理，以防止恶意攻击和其他安全问题。dompurify 是一个流行的 JavaScript 库，它可以帮助我们清理和净化 DOM 中的 HTML 代码，并且可以有效地防止 XSS 攻击。
安装
使用 npm 命令进行安装：
npm install dompurify
使用方法
引入模块
在需要使用 dompurify 的文件中，使用以下代码引入模块：
const createDOMPurify = require('dompurify');
const DOMPurify = createDOMPurify(window);过滤 HTML
使用 sanitize 方法来净化 HTML：
const dirty = '<script>alert("dirty")</script>';
const clean = DOMPurify.sanitize(dirty);
console.log(clean); // 输出 <script>alert("dirty")</script> 的纯文本形式配置选项
你可以根据自己的需求为 dompurify 添加一些配置选项。以下是一些最常用和有用的选项：
const config = {
ALLOWED_TAGS: ['a', 'img', 'b', 'strong'],
ALLOWED_ATTR: ['href', 'src', 'title'],
FORBID_TAGS: ['style'],
FORBID_ATTR: ['width', 'height'],
};
const clean = DOMPurify.sanitize(dirty, config);上面的配置选项将允许以下标签和属性：a、img、b、strong、href、src、title，并且禁止使用 style 标签以及 width 和 height 属性。
在 React 中使用 dompurify
在 React 中使用 dompurify 时，可以像下面这样创建一个包装组件：
-- -------------------- ---- -------
------ - ---------- ------ - ---- --------
------ --------------- ---- ------------
----- --------- - ------------------------
-------- --------------- ---- -- -
----- ------------ - ---------
------------ -- -
-- ---------------------- -
------------------------------ - -------------------------
-
-- --------
------ ---- ------------------ ---
-
------ ------- --------------在上面的代码中，我们使用了 useEffect 钩子来实现异步加载 HTML，并在加载完成后用 DOMPurify 进行过滤。最后，我们将过滤后的 HTML 渲染到一个空的 <div> 元素中。
总结
本文介绍了 dompurify 的基本用法和一些常见的配置选项。希望这篇文章能够为你提供有关前端安全开发的指导和提示。如果你对这个库感兴趣，不妨试着在自己的项目中使用它吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/34202