XSS攻击
前端有哪几种攻击方式？
- XSS攻击
- CSRF攻击
- 点击劫持
- URL跳转漏洞
什么是XSS攻击？
XSS(Cross-Site Scripting，跨站脚本攻击)是一种代码注入攻击。攻击者在目标网站上注入恶意代码，当用户(被攻击者)登录网站时就会执行这些恶意代码，通过这些脚本可以读取cookie,session tokens，或者网站其他敏感的网站信息，对用户进行钓鱼欺诈。
XSS的本质：恶意代码未经过滤，与网站的正常代码混在一起，浏览器无法分辨哪些脚本是可信的，导致恶意脚本被执行。由于直接在用户的终端代码执行，恶意代码能够直接获取用户的信息，利用这些信息冒充用户向网站发起攻击请求。
XSS攻击有哪些类型？
反射型XSS
反射型XSS漏洞常见于通过URL传递参数的功能，如网站搜索，跳转等。由于需要用户主动打开恶意的URL才能生效，攻击者往往会结合多种手段诱导用户点击。
POST的内容也可以触发反射型XSS，只不过它的触发条件比较苛刻（构建表单提交页面，并引导用户点击），所以非常少见。
反射型XSS的攻击步骤
1、攻击者构造出特殊的URL，其中包含恶意代码。
2、用户打开有恶意代码的URL时，网站服务器端将恶意代码从URL取出，拼接在HTML返回给浏览器。
3、用户浏览器接收到响应后解析执行，混在其中的恶意代码也会被执行。
4、恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户行为，调用目标网站接口执行攻击者指定的操作。
注意：Chrome和Safari能够检测到url上的xss攻击，将网页拦截掉，但是其他浏览器不行，如IE和Firefox。
如何防御反射型XSS攻击
# 对url查询参数进行转义后再输出到页面
app.get('/welcome',function(req,res){
//对查询参数进行编码，避免反射型 XSS攻击
res.send(`${encodeURIComponent(req.query.type)}`);
})DOM型XSS
DOM型XSS攻击，实际上就是前端javascript代码不够严谨，把不可信的内容插入到了页面，在使用.innerHTML、.outerHTML、.appendChild、document.write()等API时要特别小心，不要把不可信的数据作为HTML插入到页面上，尽量使用.innerText、.textContent、.setAttribut()等。
DOM型XSS的攻击步骤
1.攻击者构造出特殊数据，其中包含恶意代码。
2.用户浏览器执行了恶意代码
3.恶意窃取用户数据并发送到攻击者的网站，或冒充用户行为，调用目标网站接口执行攻击者指定的操作.
如何防御DOM型XSS攻击
防范DOM型XSS攻击的核心就是对输入内容进行转义（DOM中的内联事件监听顺和链接跳转都能把字符串作为代码运行，需对内容进行检查）。
1、对于url链接（例如图片的src属性）那么直接使用encodeURIComponent来转义。
2、对于非url，我们可以进行编码：
function encodeHtml(str){
return str.replace(/"/g,'"')
.replace(/'/g,''')
.replace(//g,'>')
}DOM型XSS攻击中，取出和执行恶意代码由浏览器端完成，属于前端javascript自身的安全漏洞。
存储型XSS
恶意脚本永久存储在目标服务器上。当浏览器请求数据时，脚本从服务器传回并执行，影响范围比反射型和DOM型XSS更大。存储型XSS攻击的原因仍然是没有做好数据过滤：前端提交数据至服务器端时，没有做好过滤；服务端在按受到数据时，在存储之前，没有做过滤；前端从服务器端请求到数据，没有过滤输出。
存储型XSS的攻击步骤
1、攻击者将恶意代码提交到目标网站的数据库中。
2、用户打开目标网站时，网站服务端将恶意代码从数据库中取出，拼接在HTML中返回给浏览器。
3、用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行。
4、恶意代码窃取用户数据并发送到攻击者的网站，或冒充用户行为，凋用目标网站接口执行攻击者指定的操作.
这种攻击常见于带有用户保存数据的网站功能，如论坛发帖，商品评论，用户私信等。
如何防范存储型XSS攻击
1.前端数据传递给服务器之彰，先转义/过滤（防范不了抓包修改数据的情况）
2.服务器接收到数据，在存储到数据库之前，进行转义和过滤
3.前端接收到服务器传递过来的数据，在展示到页面前，先进行转义/过滤.
function getList()
{
$.get('/getComments2').then(res=> {
if(res.code === 0){
let list ="";
$each(res.comments,(index,comment)=>{
content = encodeHtml(comment.content);
console.log(comment.content,'*****',content);
lists += '${comment.username};${content}';
});
$('.list-group').html(lists);
}
}
)
}
其他一些手段来防范XSS攻击
1、Content Security Policy
在服务端使用HTTP的Content-Security-Policy头部来指定策略，或者在前端设置meta标答。
服务器只允许加载同域下的资源：<前端和服务器设置CSP的效果相同>
Content-Security-Policy:default-src 'self'`请输入代码`客户端只允许加载同域下的资源：
严格的CSP在XSS的防范中可以起到以下的作用：
1、禁止加载外域代码，防止复杂的逻辑攻击.
2、禁止外域提交，网站被攻击后，用户数据不会被泄露到外域
3、禁止内联脚本执行（规则较严格，目前发现github使用）
4、禁止未授权的脚本执行
5、合理使用上报可以及时发现XSS，利用尽快修复问题.
2、输入内容长度控制
对于不受信任的输入，都应该限定一个合理的长度。虽无法完全防止XSS发生，但是可以增加XSS攻击的难度。
3、输入内容限制
对于部分输入，可以限定不能包含特殊字符或者仅能输入数字等。
4.其他安全措施
HTTP-only Cookie:禁止JavaScript读取某些敏感Cookie，攻击者完成XSS注入后也无法窃取此Cookie
验证码：防止脚本冒充用户提交危险操作
安全扫描工具
Arachni
Mozilla HTTP Observatory
w3af