在前端开发中，有时我们需要对用户输入的文本或富文本进行过滤，防止 XSS 攻击或注入恶意代码等安全问题。这时就需要用到一个 npm 包叫做 sanitize。
本文介绍如何使用 sanitize 包进行文本过滤和安全防御。
安装 sanitize 包
使用 npm 工具进行安装：
--- ------- -------------
安装完成后，在代码中引用：
----- ------------ - -------------------------
sanitize 配置选项
sanitize 有很多可配置选项，可以根据自己的需求进行设置。下面是一些常用选项：
allowedTags：允许使用的 HTML 标签，默认为空数组，即不允许使用任何标签。allowedAttributes：允许使用的 HTML 属性，默认为空对象，即不允许使用任何属性。selfClosing：是否允许使用自闭合标签，默认为true。allowedSchemes：允许使用的 URL 协议，默认为['http', 'https', 'ftp', 'mailto']。
更多选项列表和使用方法可以参考官方文档。
使用示例
过滤文本
如果我们需要过滤用户输入的文本，只允许使用纯文本和链接标签：
----- ----- - ------- ------------- --------------------------------- -------------------------------------
----- --------- - ------------------- -
------------ - --- --
------------------ -
---- - ------ -
-
---
-----------------------
-- ------- ------ ------ -- -----------------------------------在上面的例子中，我们首先定义了一段“脏”文本，其中包含了加粗标签和一个插入恶意脚本的 script 标签。然后，使用 sanitizeHtml 函数对这段文本进行过滤，只允许使用链接标签并保留 href 属性，其他标签和属性都被过滤掉了。最终的输出结果中只剩下了 “Hello, world!” 和一个链接。
过滤富文本
如果我们需要过滤富文本，同样只允许使用纯文本和链接标签：
----- ----- - ---------- -------------------------------------------------- -------------------------------------
----- --------- - ------------------- -
------------ - ---- ---- --- --
------------------ -
---- - ------ -
-
---
-----------------------
-- ------- --------- ------------------- -----------------------------------在上面的例子中，我们首先定义了一段“脏”的富文本，其中包含了段落、加粗、插入恶意脚本的 script 标签和一个链接。然后，使用 sanitizeHtml 函数对这段文本进行过滤，只允许使用段落、链接和加粗标签，并保留 href 属性。最终的输出结果中只剩下了一段带有链接和加粗标签的富文本。
结语
sanitize 包是一个非常方便和强大的工具，用于防御前端安全问题。在开发过程中，我们应该时刻关注数据的安全性，避免引入安全隐患。sanitize 包能够帮助我们快速实现文本和富文本的过滤，提高代码的可靠性和安全性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/72366