XSS攻击

XSS 防御方法有哪些？
Note
对于 XSS 攻击来说，通常有两种方式可以用来防御。
● 转义字符
● CSP 内容安全策略
2.1 转义字符
● 普通的输入 - 编码
○ 对用户输入数据进行HTML Entity编码（使用转义字符）
○ "
○ &
○ <
○ >
○ 空格
● 富文本 - 过滤（黑名单、白名单）
○ 移除上传的DOM属性，如onerror等
○ 移除用户上传的style节点、script节点、iframe节点等
● 较正
○ 避免直接对HTML Entity解码
○ 使用DOM Parse转换，校正不配对的DOM标签和属性
2.1.1 对于会在DOM中出现的字符串（用户数据）
< 转义为 \<
转义为 >
2.1.2 对于可能出现在DOM元素属性上的数据
" 转义为 \" ' 转义为 \&9039; 空格转义为 \ 但这可能造成多个连续的空格，也可以不对空格转义，但是一定要为属性加双引号
& 这个字符如果要转义，那么一定要放在转移函数的第一个来做
2.1.3 避免JS中的插入
var data = "#{data}";
var data = "hello"; alert(1);"";
因为是用引号将变量包裹起来的，而且被攻击也因为引号被提前结束，所以要做的就是将引号转义
先 \ -> \\
再 " -> \"
2.2 富文本
2.2.1 按照黑名单过滤script等
Note
但是html标签中能执行html代码的属性太多了，比如onclick, onhover,onerror,
function xssFilter = function (html) {
html = html.replace(/<\s\/?script\s>/g, '');
html = html.repalce(/javascript:[^'"]/g, '');
html = html.replace(/onerror\s=\s['"]?[^'"]*['"]?/g, '');
//....
return html;
}
2.2.1.1 按照白名单过滤
Note
只允许某些标签和属性存在
做法：将HTML解析成树状结构，对于这个DOM树，一个一个的去看是否存在合法的标签和属性，如果不是就去掉。
使用cheerio就可以快速的解析DOM
function xssFilter (html) {

const cheerio = require('cheerio');
const $ = cheerio.load(html);

//白名单
const whiteList = {'img': ['src']}

$('*').each((index, elem) => {
if(!whiteList[elem.name]) {
$(elem).remove();
return;
}
for(let attr in elem.attribs) {
if(whiteList[elem.name].indexOf(attr) === -1) {

 $(elem).attr(attr, null);

}
}
})
return html;
}
2.2.1.2 使用npm包来简化操作
xss文档
2.3 CSP 内容安全策略
Note
CSP 本质上就是建立白名单，开发者明确告诉浏览器哪些外部资源可以加载和执行。我们只需要配置规则，如何拦截是由浏览器自己实现的。我们可以通过这种方式来尽量减少 XSS 攻击。
通常可以通过两种方式来开启 CSP：
● 设置 HTTP Header 中的 Content-Security-Policy
● 设置 meta 标签的方式