在 Web 前端开发中，为了使 HTML 页面具有良好的可读性和可维护性，我们通常借助各种工具，例如 Markdown 编译器、富文本编辑器等等。但是，这些工具生成的 HTML 代码往往会包含一些不安全的标签和属性，容易引发安全漏洞。为了解决这个问题，我们可以使用一个 npm 包 rehype-sanitize。
本文将介绍如何使用 rehype-sanitize 并提供一些技巧和指导。
rehype-sanitize 的基本用法
rehype-sanitize 是一个基于 rehype 的通用 HTML 处理工具，它可以清除不安全的标签、属性和 URI。为了使用它，我们需要先安装它：
npm install rehype-sanitize
接下来，我们可以在代码中引用它：
const sanitize = require("rehype-sanitize");然后，我们可以定义需要清除的标签、属性和 URI：
-- -------------------- ---- -------
----- ------- - -
-- ---------- ---- --
--------- -
----
-------
----------
----
-------------
-----
----------
-------
-------
------
-----------
-----
------
------
------
-----
-----
-----
-----
-----
-----
-----
-----
-----
-----
----
------
------
------
-----
-------
-----
----
------
----
-----
-----
-------
----
-------
---------
---------
------
------
--------
--------
-----
--------
-----
--------
-----
----
-----
-----
--
-- ---------- ---- --
----------- -
---- ----------
-- -------- --------- -------
---- ------- ------ -------- ----------
---- ----------
----- ---------
--
-- ---------- --- ------
--------------- -------- -------- ----------
---------------------- -----
--最后，我们可以将 HTML 代码传递给 sanitize 函数，并获取清除后的 HTML 代码：
const sanitizedHtml = sanitize(originalHtml, options);
rehype-sanitize 的进阶用法
除了基本用法之外，rehype-sanitize 还提供了一些进阶用法，例如：
自定义 URI scheme
我们可以使用 options.allowedSchemes 自定义允许的 URI scheme，例如：
const options = {
allowedSchemes: ["http", "https", "ftp", "smb"]
};区分危险级别
rehype-sanitize 可以根据属性值的内容区分危险级别，例如：
-- -------------------- ---- -------
----- ------- - -
----------- -
---- -
-
----- --------
------ ----- -- ---------------------
--
-
----- --------
------ ----- -- -----------------------
--
-
----- --------
------ ----- -- ----------------------
-
-
-
--使用自定义配置
我们可以使用自定义的 options 对象代替 rehype-sanitize 默认的配置：
-- -------------------- ---- ------- ----- -------- - --------------------------- ----- ------- - - -- ----- -- ----- --------- - ------------------ ----- ------------- - -------------------------------------------
示例代码
下面是一个使用 rehype-sanitize 的示例代码，它清除一个 markdown 编译器生成的 HTML 代码中的不安全标签和属性：
-- -------------------- ---- -------
----- ------- - -------------------
----- -------- - ------------------------
----- ------------- - -------------------------
----- -------- - ---------------------------
----- ------------------ - -------------- -- -
-- - -------- ----- ---- --
----- --------- - -------------------------------------------
----- ---------- - -------------------------------------------------
-- -- ---- ------------
----- ------- - -
--------- -
----
-----
-----
-----
-------------
-----
-----
----
------
-------
-----
--
----------- -
-- -------- --------- -------
---- ------- ------
-
--
----- ---------- - ------------------
----- -------- - ----------------------------------------------
------ ---------
--
----- -------------- -
-- ----- ------------- -- - -------- ------------- -- - ----------------------------------
----- -------- - -----------------------------------
----------------------
-- ------- --------- ------------------- -- - --------------------- ------------------ -- - -- ----------------------------------------------总结
使用 rehype-sanitize 可以有效地清除 HTML 代码中的不安全标签和属性，提高 Web 应用程序的安全性。本文介绍了 rehype-sanitize 的基本用法和进阶用法，并提供了一个使用示例。希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f2f38ff3b0ab45f74a8bc72