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