前言
在现代 web 开发中，在用户输入、后端返回和前端渲染 HTML 的过程中，我们经常需要处理和清理 HTML 内容以防止 XSS 攻击等安全问题。NPM 包 caja-html-sanitizer 就是一款前端 HTML 清理工具，它可以安全地过滤用户输入的 HTML，并移除其中的潜在危险内容。
在本文中，我们将学习如何使用 caja-html-sanitizer 包从用户输入中安全地过滤 HTML 内容，并使用一些简单示例来探究其实现原理。
安装
caja-html-sanitizer 可以通过 npm 安装：
--- ------- -------------------
或者通过 CDN 引用：
------- -------------------------------------------------------------------------------------
使用
在 ES6 中，我们可以使用 import 语句导入 caja-html-sanitizer：
------ - ------------ - ---- ---------------------- -- ------ ---- ------- ------------------------------------------------------------
如果你使用的是 CommonJS 规范，可以使用以下方式导入：
----- - ------------ - - ------------------------------- -- ------ ---- ------- ------------------------------------------------------------
在浏览器环境下，你可以在全局范围直接访问 caja-html-sanitizer，它会暴露一个全局变量 html：
------- ------------------------------------------------------------------------------------- -------- -- ------ ---- ------- ------------------------------------------------------------- ---------
以上代码会输出：
---------------------
可以看到，caja-html-sanitizer 成功地把原本恶意的 JavaScript 代码转换成了 HTML 实体，从而避免了 XSS 攻击。
示例
下面我们来看一些更具体的示例，以便更好地了解 caja-html-sanitizer 的使用方法。
去除所有 Script 标签
----- ---- - - ------------------------------ ----------- ------------ -- ------------------------------ - ------------- ------- ----
以上代码的输出将只包含 div 标签：
----------- ------------
注意 ALLOWED_TAGS 属性表示允许出现的标签，而 script 标签在默认情况下是不允许的。
清除所有危险内容
----- ---- - - -- ------------------------------------ ------- ----------- ------------ -- ------------------------------ - ------------- -------- ------------- --------- ------------------ -------- ----
以上代码的输出将把 a 标签和 onclick 事件过滤掉，并加上非可见前缀 unseen：
------------------ ------------------
过滤出所有 URL
----- ---- - - -- ----------------- ----- -- ----------------------------------- ----- ---- ---------------- ------------ ----------- ------------ -- ------------------------------ - ------------- ----- ------- ------------- -------- ------- --------------- -------- ------- ---------------- -------- ----- -- --- --------------------- ----
以上代码会把 HTML 中的所有链接和图片 URL 提取出来，并使用 new URL(uri).toString() 处理 URL：
--------- -------------------------- -------------
总结
caja-html-sanitizer 是一款快速而强大的前端 HTML 清理工具，它可以轻松地过滤用户输入中的 HTML，避免 XSS 攻击等安全问题。本文向你介绍了如何使用 caja-html-sanitizer，并附上了一些实际示例。希望本文能对于想要保护网站安全的前端开发人员有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066c91ccdc64669dde5947