前端防⽌xss攻击-xss.js使⽤
可以去这⾥下载xss.js
基本的使⽤说明在git上都有了
说⼀下我⼯作中额外使⽤的
⼀般后台返回的内容中包含【标签】的；
遇到的情况⼀：返回的内容中包含style标签，如下
returnstr : ' 您好！ 2019年10⽉⼯资已核发完成，请登陆HR系统查询。请点击下⽅链接进⼊:
<br> <a href="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指定
javascript说明这样就会被渲染成字符串，就不会对返回的这段⽂本的样式进⾏渲染，这时我们需要做的就是将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 ><td></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地址 github/leizongmin/js-xss/blob/master/README.zh.md
安装
NPM
$ npm install xss
Bower
$ bower install xss
或者
$ bower install github/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="raw.github/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>
baseUrl: './',
paths: {
xss: 'raw.github/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) {
place(/</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
});
要获取更多的帮助信息可看这⾥：github/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;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。