前端有哪几种攻击方式？

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,'&quot;')
            .replace(/'/g,'&apos;')
            .replace(/</g,'&lt;')
            .replace(/>/g,'&gt;')
}

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 += '<li class="list-group-item"><span>${comment.username};</span>${content}';
      });
      $('.list-group').html(lists);
     }   
   }
  )
}

其他一些手段来防范XSS攻击

1、Content Security Policy
在服务端使用HTTP的Content-Security-Policy头部来指定策略，或者在前端设置meta标答。

服务器只允许加载同域下的资源：<前端和服务器设置CSP的效果相同>

Content-Security-Policy:default-src 'self'`请输入代码`

客户端只允许加载同域下的资源：?

<meta http-equiv="Content-Security-Policy" content="form-action '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