前言
在前端的日常工作中，我们时常需要处理 HTML 代码。然而，HTML 代码存在着各种问题和风险，比如潜在的 XSS 攻击等。为了解决这些问题，我们需要使用一些工具来对 HTML 代码进行过滤和净化，使得其更加安全和合规。其中，html-purify-styles 是一个非常有用的工具。
html-purify-styles 是一个 npm 包，用于去除 HTML 代码中样式（CSS）部分的危险元素和属性，保留其核心结构和可见内容。使用 html-purify-styles 可以大大降低使用富文本编辑器、Markdown 渲染等功能的 Web 应用程序的安全风险。
本文将介绍如何使用 html-purify-styles，包括安装和配置、基本用法和高级用法等内容。
安装和配置
安装
在使用 html-purify-styles 之前，你需要先安装它。你可以通过 npm 来完成安装：
npm install html-purify-styles --save
配置
使用 html-purify-styles 时，你需要为其提供一些配置项，以指定需要保留和需要过滤的样式元素和属性。html-purify-styles 提供了一些默认的配置项，但你也可以自定义这些配置项以满足你的需求。
下面是 html-purify-styles 的默认配置项：
-- -------------------- ---- -------
-
------------ -
---- ------- ---------- ---------- -------- ---- ------ ------ ------ ------------- ----- ---------- ---------
------- ------- ------- ----------- ----- ------ ---------- ------ ------ ----- ----- ----- ------- --------- -----
----- ----- ----- ----- ----- --------- ----- ---- ------ ------ ------ ----- ------- ------ ------- ------ -----
---- ------ ---- ---- ------- ---------- -------- ------- --------- --------- ------ ------ -------- -------- -----
-------- ----- -------- ------- ----- ----- ---- ----- ------ -----
--
------------------ -
---- -
------- --------- ----------------- ------------ --------- -------- ------ ------- ---------- --------- --------------
-------------- ------- ---------- ---------- ---------- ------- -------- -------- -------- ------- ---------- ----------
--------- ------- ----------- ---------- ------ ----------- ----------- ---------- ------- ------ -------- ----------
--------- ------- ----------- --------- ------- ----- -------- ----------- -------- ------- ----------- ------- -----------
------ --------------- -------------- ------ ------------ -------- --------- ------ ----------- ------- ---------
----------- ---------- --------- ------- ---------- ---------- ------- -------------- --------- -----------
--------- ---------- ---------- ------------- ----------- ------ ----------- ------ ----------- ------- ---------- --------
-------- ----------- -------- ------- ------- ------ -------- ------- -------- ---------- ----------- --------- --------
------- --------- --------- -------- --------- -------- -------
-
--
----------- -----
-你可以直接使用上述默认配置，或者自定义配置。
下面是自定义配置的例子：
const config = {
allowedTags: ['p', 'em', 'ul', 'li'],
allowedAttributes: {
'*': ['class', 'id']
},
allowedCSS: ['font-size', 'color']
}上述自定义配置指定了只允许保留 p, em, ul, li 这几个标签，只允许保留 class 和 id 这两个属性，同时只允许保留 font-size 和 color 这两个 CSS 属性。
基本用法
html-purify-styles 提供了 purify 方法来对 HTML 代码进行过滤和净化。下面是一个简单的示例：
-- -------------------- ---- -------
----- - ------ - - -----------------------------
----- ---- - -
---- ------------- ---- ---------- -------
--------- ----------
------
-
----- ------ - -
------------ ----- ----- ----- ------
------------------ -
---- --------- -----
--
----------- ------------- --------
-
----- ------ - ------------ -------
-------------------运行上述代码，你会得到如下输出：
<div> <p>Hello, World!</p> </div>
由于我们在配置项中只允许保留 font-size 和 color 这两个 CSS 属性，所以在过滤后，元素上原本存在的 style 属性被去除了，同时 color: red 这个样式也被去除了。
高级用法
除了基本用法之外，html-purify-styles 还提供了一些高级用法，比如使用插件来扩展或修改其默认的行为。
插件
html-purify-styles 提供了一些插件，用于扩展和修改其默认的行为。你可以在配置项中通过 plugins 属性来指定使用哪些插件。下面是一个使用插件的例子：
-- -------------------- ---- -------
----- - ------ - - -----------------------------
----- - --------------- - - ----------------------
----- --------------- - ----------------------------------
----- ---- - -
---- ------------- ---- ---------- -------
------- ------------------------- ------------ ----------------------
------
-
----- ------ - -
-------- ------------------
------------ ----- ----- ----- ----- ----------
------------------ -
---- --------- ----- ------ -------- ---------
--
----------- ------------- --------
-
----- ------------ - -----------------------
----- ------ - ---------------------------
-------------------上述示例中，我们使用了 dompurify-plugin-iframe 这个插件，它允许在 HTML 中使用 <iframe> 标签并指定 src、width 和 height 等属性。
需要注意的是，当使用插件时，我们需要使用 createDomPurify 方法来创建一个实例，并使用 sanitize 方法来对 HTML 代码进行过滤和净化。
嵌入式脚本
在使用 html-purify-styles 进行 HTML 过滤时，要特别注意嵌入式脚本的问题。比如，一个带有嵌入式脚本（例如 onclick）的 a 标签，在过滤后，其嵌入式脚本可能会被去除，从而导致功能失效。
为了避免这种情况发生，我们需要使用 addHook 方法来对嵌入式脚本进行额外的处理。下面是一个使用 addHook 的例子：
-- -------------------- ---- -------
----- - ------ - - -----------------------------
----- - --------------- - - ----------------------
----- ---- - -
-- ------------------------- ---------------------- --------------- ------
-
----- ------ - -
------------ ------
------------------ -
---- -------- ----------
--
----------- -----
-
----- ------------ - -----------------------
----------------------------------------------- ------ -- -
-- -------------- -- ------------------- ------ ----
----- ------- - ----------------------------
-- -------- -- ------------------------------------------- -
---------------------------- ------------------ --------
-
------ ----
--
----- ------ - ---------------------------
-------------------在上述示例中，我们先创建了一个默认的 purify 实例，并指定了 href 和 onclick 这两个属性。然后，我们使用 addHook 方法，指定了一个 afterSanitizeAttributes 钩子函数。
在钩子函数中，我们首先判断当前节点是否为我们需要处理的 a 标签，然后判断其中是否包含有 onclick 属性。如果有，我们就在其后添加一个 return false; 来引入一个嵌入式脚本，从而避免被过滤掉。
总结
html-purify-styles 是一个非常有用的工具，可以帮助我们对 HTML 代码进行过滤和净化，降低 Web 应用程序的安全风险。在使用 html-purify-styles 时，我们需要先安装和配置，然后使用 purify 方法将 HTML 代码进行过滤和净化。同时，我们还可以使用插件和钩子函数来扩展和修改其默认的行为，以满足我们的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601481e8991b448de255