前言
在 Web 开发中，XSS（跨站脚本攻击）是一个非常常见的安全问题。为了预防 XSS 攻击，我们需要对用户提交的数据进行过滤和转义。在这个过程中，使用 xssjs 这个 npm 包可以帮助我们更加方便地进行 XSS 过滤。
xssjs 简介
xssjs 是一个用于浏览器端的 XSS 过滤器，可以在页面渲染前将用户输入的 HTML 进行过滤，避免 XSS 攻击。它不会影响页面原有的样式和布局，过滤后的代码与原代码不会有太大的差别。同时，xssjs 也提供了一些配置选项，可以满足不同的需求。
xssjs 的安装
使用 npm 安装 xssjs：
npm install xss
xssjs 的使用
在 Node.js 环境和浏览器环境下，xssjs 的使用方式有所不同。下面分别介绍。
Node.js 环境下的使用方式
在 Node.js 环境下，可以使用以下代码进行引用：
const xss = require('xss');
const html = xss('<script>alert("xss");</script>');
console.log(html);在上面的代码中，我们首先通过 require 引入了 xssjs 包。然后，我们使用 xss 函数对输入的 HTML 进行过滤，并将过滤后的结果输出到控制台。
浏览器环境下的使用方式
在浏览器环境下，可以使用以下代码进行引用：
<script src="https://unpkg.com/xss/dist/xss.min.js"></script>
<script>
const xss = new window.filterXSS.FilterXSS();
const html = xss.process('<script>alert("xss");</script>');
console.log(html);
</script>在上面的代码中，我们首先通过 script 标签引入了 xssjs 的压缩版文件。然后，我们使用 new filterXSS.FilterXSS() 创建一个 xss 实例，并使用 process 函数对输入的 HTML 进行过滤，并将过滤后的结果输出到控制台。
xssjs 的配置
xssjs 提供了一些配置选项，可以满足不同的需求。以下是一些常用的配置选项：
- whiteList：白名单，指允许的 HTML 标签、属性和属性值。
- stripIgnoreTag：是否去除非白名单标签，默认为 false，即不去除。
- stripIgnoreTagBody：是否去除非白名单标签的内容，默认为 false，即不去除。
- css：CSS 过滤选项。
下面是一个使用 whiteList 配置选项的例子：
-- -------------------- ---- -------
----- --- - ---------------
----- ------- - -
---------- -
-- ----------
---- --------- ---------
----- ---------
-
--
----- ---- - ------- ------------------- ----- ------------------------------------ ------------ --------------------------- ------------ ---------
------------------在上面的代码中，我们定义了一个 options 对象，并在其中设置了 whiteList 选项。whiteList 是一个包含标签名、属性名和属性值的对象。在上面的例子中，我们设置了允许 p 标签的 class 属性、div 标签的 class 和 style 属性以及 span 标签的 style 属性。经过过滤后，输出的 HTML 如下：
<p class="test">Hello, <span style="">xss</span></p><div class="test" style="font-size:18px;">xss test</div>
可以看到，xssjs 过滤掉了 span 标签的 style 属性中的危险字符。
总结
xssjs 是一个非常实用的 npm 包，可以帮助开发者更加方便地进行 XSS 过滤。在使用 xssjs 时，建议结合实际需求进行配置，以提高过滤的准确度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056bfe81e8991b448e5b22