概述
sanitize-caja是一个可以很方便的让你通过 JavaScript 代码将任意 HTML 标记消毒的npm包。它是基于Google Caja项目的DOMPurify库进行的改进，旨在帮助开发者更方便地实现HTML字符串的消毒。本篇文章将详细介绍sanitize-caja的使用方法，帮助开发者更好地利用这个优秀的npm包。
安装
首先，你需要在你的项目中安装sanitize-caja。
在命令提示符或终端中输入以下命令即可完成安装：
npm install sanitize-caja
基本用法
sanitize-caja最基本的用法是将一个HTML字符串转换为一段安全的HTML代码。
假设我们有一个字符串：
const dirty = '<p><script>alert("xss attack!")</script>Click <a href="http://example.com/" rel="nofollow">here</a>.</p>';我们可以将它消毒成一个安全的字符串：
const sanitizeCaja = require('sanitize-caja');
const clean = sanitizeCaja.sanitize(dirty);
console.log(clean); // <p>Click <a href="http://example.com/" rel="nofollow">here</a>.</p>配置
sanitize-caja支持各种配置选项，可以帮助你轻松地满足自己的消毒需求。下面我们来介绍几个常用的配置选项：
ALLOWED_TAGS
ALLOWED_TAGS选项指定哪些HTML标签可以存在于消毒后的HTML字符串中。下面是一个例子：
const sanitizeCaja = require('sanitize-caja');
sanitizeCaja.sanitize(
'<div><p>Hello <strong>World!</strong></p></div>',
{ ALLOWED_TAGS: ['strong'] }
);
// 输出：<strong>Hello World!</strong>ALLOWED_ATTRS
ALLOWED_ATTRS选项指定哪些HTML属性可以存在于消毒后的HTML字符串中。下面是一个例子：
const sanitizeCaja = require('sanitize-caja');
sanitizeCaja.sanitize(
'<div class="important">Hello <span style="color:red;">World!</span></div>',
{ ALLOWED_ATTRS: { div: ['class'], span: ['style'] } }
);
// 输出：<div class="important">Hello <span style="color: red;">World!</span></div>FORBID_TAGS
FORBID_TAGS选项指定哪些HTML标签不允许存在于消毒后的HTML字符串中。下面是一个例子：
const sanitizeCaja = require('sanitize-caja');
sanitizeCaja.sanitize('<div><script>alert("xss attack!")</script></div>', { FORBID_TAGS: ['script'] });
// 输出：<div></div>FORBID_ATTRS
FORBID_ATTRS选项指定哪些HTML属性不允许存在于消毒后的HTML字符串中。下面是一个例子：
const sanitizeCaja = require('sanitize-caja');
sanitizeCaja.sanitize(
'<a href="http://example.com/" onclick="alert("xss attack!")">Click Here</a>',
{ FORBID_ATTRS: ['onclick'] }
);
// 输出：<a href="http://example.com/" rel="nofollow">Click Here</a>示例
接下来我们将根据前文介绍的sanitize-caja的基本用法和配置方法，提供一个更完整的示例。
假设我们有一个包含有以下HTML标记的字符串：
<div>
<button class="btn" onclick="alert('xss attack!')">Click Here</button>
<p>Click <a href="http://example.com/" target="_blank">Here</a>!</p>
<script>alert('xss attack!')</script>
</div>这个字符串中包含了一些不安全的标记和属性，我们需要使用sanitize-caja对它进行消毒。
下面是一个演示如何使用配置选项对字符串进行消毒的示例：
-- -------------------- ---- -------
----- ------------ - -------------------------
----- ---------- - ------------- ----------- ------------------- ---------------- --------------------- -- -------------------------- ----------------------------------------------- --------------------------
----- ------- - -
------------- ------- --------- ---- -----
-------------- -
---- ----------
-- -------- ----------
------- ----------
--
------------ -----------
------------- ------------
-
----- ---------- - --------------------------------- ---------
------------------------ -- ------------ ----------------- --------------------- -- -------------------------- --------------- ----------------------------------上面的例子使用了ALLOWED_TAGS和ALLOWED_ATTRS选项，允许了div、button、a和p四个标签存在以及它们的class、href和target属性存在，同时禁止使用script标签和onclick属性。
最终得到了这样一段消毒后的HTML代码：
<div> <button class="btn">Click Here</button> <p>Click <a href="http://example.com/" target="_blank" rel="nofollow">Here</a>!</p> </div>
这段代码已经彻底消毒，可以安全地在网页上使用了。
总结
sanitize-caja是一款非常优秀的npm包，它可以轻松地对任意HTML字符串进行消毒，以避免Web应用程序中的XSS攻击。本文介绍了sanitize-caja的基本用法和配置选项，并提供了一个完整的示例，旨在帮助读者更好地了解如何使用sanitize-caja。希望读者可以通过本文学会如何在前端应用程序中使用这个npm包，从而更好的保证Web应用程序的安全性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaae2b5cbfe1ea06105bc