可以去这里下载xss.js https://github.com/leizongmin/js-xss
基本的使用说明在git上都有了
说一下我工作中额外使用的
一般后台返回的内容中包含 【标签】的；
遇到的情况一：返回的内容中包含style标签，如下
returnstr : ' 您好！ 2019年10月工资已核发完成，请登陆HR系统查询。 请点击下方链接进入:
<br> <a href="https://hrapppw.oa.">查看本月工资</a>
<style>
p{ font-family: 'Microsoft YaHei'; color: #333333; }
a { text-decoration: underline;color:blue; }
</style> '；
默认的白名单上【getDefaultWhiteList函数返回的数组中】没有style标签，那么，此时的 style就进入onTag方法中，再进入onIgnoreTag中;
在白名单上： 通过onTagAttr来过滤属性
不在白名单上：通过onIgnoreTag指定
这样就会被渲染成字符串，就不会对返回的这段文本的样式进行渲染，这时我们需要做的就是将style添加到白名单标签中（getDefaultWhiteList返回的数组中）
function getDefaultWhiteList() {
return {
a: ["target", "href", "title"],
abbr: ["title"],
address: [],
area: ["shape", "coords", "href", "alt"],
article: [],
aside: [],
audio: ["autoplay", "controls", "loop", "preload", "src"],
b: [],
bdi: ["dir"],
bdo: ["dir"],
big: [],
blockquote: ["cite"],
br: [],
caption: [],
center: [],
cite: [],
code: [],
col: ["align", "valign", "span", "width"],
colgroup: ["align", "valign", "span", "width"],
dd: [],
del: ["datetime"],
details: ["open"],
div: [],
dl: [],
dt: [],
em: [],
font: ["color", "size", "face"],
footer: [],
h1: [],
h2: [],
h3: [],
h4: [],
h5: [],
h6: [],
header: [],
hr: [],
i: [],
img: ["src", "alt", "title", "width", "height"],
ins: ["datetime"],
li: [],
mark: [],
nav: [],
ol: [],
p: [],
pre: [],
s: [],
section: [],
small: [],
span: [],
sub: [],
sup: [],
strong: [],
table: ["width", "border", "align", "valign","style"],
tbody: ["align", "valign"],
td: ["width", "rowspan", "colspan", "align", "valign","style"],
tfoot: ["align", "valign"],
th: ["width", "rowspan", "colspan", "align", "valign"],
thead: ["align", "valign"],
tr: ["rowspan", "align", "valign"],
tt: [],
u: [],
ul: [],
video: ["autoplay", "controls", "loop", "preload", "src", "height", "width"],
style:[] //新添
};
}
遇到的情况二：返回的内容中包含td标签，标签上有内联样式，如下
returnstr:' <table style="color:red"><td>style="color:green"</td></table> '
出现的问题是：颜色没有被渲染;
原因是 : 默认的白名单标签中的td上是没有内连样式style的，
解决：td: ["width", "rowspan", "colspan", "align", "valign","style"],
video: ["autoplay", "controls", "loop", "preload", "src", "height", "width"],
style:[]
类似的问题，当渲染出现不符合心中预期的时候，就去看是否要渲染的标签或者属性不在白名单上，或者是在白名单上
也可以根据文档，自定义渲染函数
下文是git上的中文文档
性能（仅作参考）
xss 模块：8.2 MB/s
validator@0.3.7 模块的 xss()函数：4.4 MB/s
测试代码参考 benchmark 目录
github地址 https://github.com/leizongmin/js-xss/blob/master/README.zh.md
安装
NPM
$ npm install xss
Bower
$ bower install xss
或者
$ bower install https://github.com/leizongmin/js-xss.git
使用方法
在 Node.js 中使用
var xss = require("xss");
var html = xss('<script>alert("xss");</script>');
console.log(html);
在浏览器端使用
Shim 模式（参考文件 test/test.html）:
<script src="https://raw.github.com/leizongmin/js-xss/master/dist/xss.js"></script>
<script>
// 使用函数名 filterXSS，用法一样
var html = filterXSS('<script>alert("xss");</scr' + 'ipt>');
alert(html);
</script>
AMD 模式（参考文件 test/test_amd.html）:
<script>
require.config({
baseUrl: './',
paths: {
xss: 'https://raw.github.com/leizongmin/js-xss/master/dist/xss.js'
},
shim: {
xss: {exports: 'filterXSS'}
}
})
require(['xss'], function (xss) {
var html = xss('<script>alert("xss");</scr' + 'ipt>');
alert(html);
});
</script>
使用命令行工具来对文件进行 XSS 处理
处理文件
可通过内置的 xss 命令来对输入的文件进行 XSS 处理。使用方法：
xss -i <源文件> -o <目标文件>
例：
$ xss -i origin.html -o target.html
在线测试
执行以下命令，可在命令行中输入 HTML 代码，并看到过滤后的代码：
$ xss -t
详细命令行参数说明，请输入 $ xss -h 来查看。
自定义过滤规则
在调用 xss() 函数进行过滤时，可通过第二个参数来设置自定义规则：
options = {}; // 自定义规则
html = xss('<script>alert("xss");</script>', options);
如果不想每次都传入一个 options 参数，可以创建一个 FilterXSS 实例（使用这种方法速度更快）：
options = {}; // 自定义规则
myxss = new xss.FilterXSS(options);
// 以后直接调用 myxss.process() 来处理即可
html = myxss.process('<script>alert("xss");</script>');
options 参数的详细说明见下文。
白名单
通过 whiteList 来指定，格式为：{'标签名': ['属性1', '属性2']}。不在白名单上的标签将被过滤，不在白名单上的属性也会被过滤。以下是示例：
// 只允许a标签，该标签只允许href, title, target这三个属性
var options = {
whiteList: {
a: ["href", "title", "target"]
}
};
// 使用以上配置后，下面的HTML
// <a href="#" onclick="hello()"><i>大家好</i></a>
// 将被过滤为
// <a href="#">大家好</a>
默认白名单参考 xss.whiteList。
自定义匹配到标签时的处理方法
通过 onTag 来指定相应的处理函数。以下是详细说明：
function onTag(tag, html, options) {
// tag是当前的标签名称，比如<a>标签，则tag的值是'a'
// html是该标签的HTML，比如<a>标签，则html的值是'<a>'
// options是一些附加的信息，具体如下：
// isWhite boolean类型，表示该标签是否在白名单上
// isClosing boolean类型，表示该标签是否为闭合标签，比如</a>时为true
// position integer类型，表示当前标签在输出的结果中的起始位置
// sourcePosition integer类型，表示当前标签在原HTML中的起始位置
// 如果返回一个字符串，则当前标签将被替换为该字符串
// 如果不返回任何值，则使用默认的处理方法：
// 在白名单上： 通过onTagAttr来过滤属性，详见下文
// 不在白名单上：通过onIgnoreTag指定，详见下文
}
自定义匹配到标签的属性时的处理方法
通过 onTagAttr 来指定相应的处理函数。以下是详细说明：
function onTagAttr(tag, name, value, isWhiteAttr) {
// tag是当前的标签名称，比如<a>标签，则tag的值是'a'
// name是当前属性的名称，比如href="#"，则name的值是'href'
// value是当前属性的值，比如href="#"，则value的值是'#'
// isWhiteAttr是否为白名单上的属性
// 如果返回一个字符串，则当前属性值将被替换为该字符串
// 如果不返回任何值，则使用默认的处理方法
// 在白名单上： 调用safeAttrValue来过滤属性值，并输出该属性，详见下文
// 不在白名单上：通过onIgnoreTagAttr指定，详见下文
}
自定义匹配到不在白名单上的标签时的处理方法
通过 onIgnoreTag 来指定相应的处理函数。以下是详细说明：
function onIgnoreTag(tag, html, options) {
// 参数说明与onTag相同
// 如果返回一个字符串，则当前标签将被替换为该字符串
// 如果不返回任何值，则使用默认的处理方法（通过escape指定，详见下文）
}
自定义匹配到不在白名单上的属性时的处理方法
通过 onIgnoreTagAttr 来指定相应的处理函数。以下是详细说明：
function onIgnoreTagAttr(tag, name, value, isWhiteAttr) {
// 参数说明与onTagAttr相同
// 如果返回一个字符串，则当前属性值将被替换为该字符串
// 如果不返回任何值，则使用默认的处理方法（删除该属）
}
自定义 HTML 转义函数
通过 escapeHtml 来指定相应的处理函数。以下是默认代码 （不建议修改） ：
function escapeHtml(html) {
return html.replace(/</g, "<").replace(/>/g, ">");
}
自定义标签属性值的转义函数
通过 safeAttrValue 来指定相应的处理函数。以下是详细说明：
function safeAttrValue(tag, name, value) {
// 参数说明与onTagAttr相同（没有options参数）
// 返回一个字符串表示该属性值
}
自定义 CSS 过滤器
如果配置中允许了标签的 style 属性，则它的值会通过cssfilter 模块处理。 cssfilter 模块包含了一个默认的 CSS 白名单，你可以通过以下的方式配置：
myxss = new xss.FilterXSS({
css: {
whiteList: {
position: /^fixed|relative$/,
top: true,
left: true
}
}
});
html = myxss.process('<script>alert("xss");</script>');
如果不想使用 CSS 过滤器来处理 style 属性的内容，可指定 css 选项的值为 false：
myxss = new xss.FilterXSS({
css: false
});
要获取更多的帮助信息可看这里：https://github.com/leizongmin/js-css-filter
快捷配置
去掉不在白名单上的标签
通过 stripIgnoreTag 来设置：
true：去掉不在白名单上的标签
false：（默认），使用配置的escape函数对该标签进行转义
示例：
当设置 stripIgnoreTag = true时，以下代码
code:<script>alert(/xss/);</script>
过滤后将输出
code:alert(/xss/);
去掉不在白名单上的标签及标签体
通过 stripIgnoreTagBody 来设置：
false|null|undefined：（默认），不特殊处理
'*'|true：去掉所有不在白名单上的标签
['tag1', 'tag2']：仅去掉指定的不在白名单上的标签
示例：
当设置 stripIgnoreTagBody = ['script']时，以下代码
code:<script>alert(/xss/);</script>
过滤后将输出
code:
去掉 HTML 备注
通过 allowCommentTag 来设置：
true：不处理
false：（默认），自动去掉 HTML 中的备注
示例：
当设置 allowCommentTag = false 时，以下代码
code:<!-- something --> END
过滤后将输出
code: END
应用实例
允许标签以 data-开头的属性
var source = '<div a="1" b="2" data-a="3" data-b="4">hello</div>';
var html = xss(source, {
onIgnoreTagAttr: function(tag, name, value, isWhiteAttr) {
if (name.substr(0, 5) === "data-") {
// 通过内置的escapeAttrValue函数来对属性值进行转义
return name + '="' + xss.escapeAttrValue(value) + '"';
}
}
});
console.log("%s\nconvert to:\n%s", source, html);
运行结果：
<div a="1" b="2" data-a="3" data-b="4">hello</div>
convert to:
<div data-a="3" data-b="4">hello</div>
允许名称以 x-开头的标签
var source = "<x><x-1>he<x-2 checked></x-2>wwww</x-1><a>";
var html = xss(source, {
onIgnoreTag: function(tag, html, options) {
if (tag.substr(0, 2) === "x-") {
// 不对其属性列表进行过滤
return html;
}
}
});
console.log("%s\nconvert to:\n%s", source, html);
运行结果：
<x><x-1>he<x-2 checked></x-2>wwww</x-1><a>
convert to:
<x><x-1>he<x-2 checked></x-2>wwww</x-1><a>
分析 HTML 代码中的图片列表
var source =
'<img src="img1">a<img src="img2">b<img src="img3">c<img src="img4">d';
var list = [];
var html = xss(source, {
onTagAttr: function(tag, name, value, isWhiteAttr) {
if (tag === "img" && name === "src") {
// 使用内置的friendlyAttrValue函数来对属性值进行转义，可将<这类的实体标记转换成打印字符<
list.push(xss.friendlyAttrValue(value));
}
// 不返回任何值，表示还是按照默认的方法处理
}
});
console.log("image list:\n%s", list.join(", "));
运行结果：
image list:
img1, img2, img3, img4
去除 HTML 标签（只保留文本内容）
var source = "<strong>hello</strong><script>alert(/xss/);</script>end";
var html = xss(source, {
whiteList: [], // 白名单为空，表示过滤所有标签
stripIgnoreTag: true, // 过滤所有非白名单标签的HTML
stripIgnoreTagBody: ["script"] // script标签较特殊，需要过滤标签中间的内容
});
console.log("text: %s", html);
运行结果：
text: helloend
以上的git地址以及中文文档，来自原博主，有需要可以过去看，这里仅作为git连不上的时候，记录方便查看
