前端安全 - XSS

前端安全中，常常提到的有XSS，对前端的影响能够说是一直都在，若是项目没有作好足够的保护，那么可能就会存在XSS漏洞。这里，咱们就来看如下什么是XSS以及XSS的危害，如何防范？

what

XSS，跨站脚本攻击( Cross Site Script ), 简写的话就是CSS，可是在前端，CSS已是样式来，因此，跨站脚本攻击就用了XSS。

那么？XSS是什么呢？脚本攻击，顾名思义，就是经过脚原本攻击系统，在前端，最经常使用的就是javascript，固然，html、css也有可能形成攻击。

XSS，其实还细分为三种类型：反射型XSS、存储型XSS、基于DOM的XSS

反射型XSS（非持久型）

当用户点击恶意连接，或者提交表单，或者进入恶意网站时，恶意脚本就会进入受害者的页面，而后恶意脚本执行，就形成了反射型XSS。

存储型XSS（持久型）

存储型XSS，顾名思义，存起来的XSS，在web项目中，就是存储到数据库中了。

这种XSS，脚本是存在服务器的，下次请求的时候，客户端拿到脚本而且执行。

基于DOM的XSS

恶意脚本会修改页面DOM结构，就是基于DOM的XSS

危害

说了那么久，到底，XSS有什么危害呢？

cookie劫持

看完前面的，咱们应该都知道，XSS能够在受害者的网页中注入恶意的脚本，那么javascript重要的一点，就是能够读取document.cookie来获取用户的cookie。

cookie是网站用来存储用户信息用的，若是攻击者拿到来用户的cookie，那么攻击者就能够假冒受害者进入网站了。

看下这个例子，咱们在页面中插入一个img标签，onerror事件中获取页面的cookie。若是说攻击者直接把cookie发送给攻击者本身，那么攻击者就能够垂手可得的假冒咱们了。

<img src="//err.jpg" onerror="alert(document.cookie)">
复制代码

XSS钓鱼

钓鱼执法，相信你们都不陌生，XSS钓鱼也是如此。

XSS攻击就是自动执行脚本，那么当遇到须要用户交互的时候，XSS就攻击不了了。

有方法，就有对策。既然都已经能够实现XSS攻击了，直接搞一个弹窗让用户操做也不是难事。只要用户输入，那攻击者天然就能够拿到想要的信息了。

XSS蠕虫

XSS蠕虫，相比于其余蠕虫，XSS蠕虫是在用户层面的，不会形成服务器宕机，可是却像病毒同样不断的在用户之间进行传播。（基于网站是社交网站类）

相对于其余XSS危害，XSS蠕虫的影响是最大的。

注入代码将用户信息和用户页面代码发送给攻击者web应用程序，而后当用户访问web应用程序时，蠕虫自身继续进行数据发送感染。这种感染的效果的裂变的。用户越是活跃，感染就越可怕。

第一个XSS蠕虫是经典的萨米，利用ajax将本身添加到其余用户的关注列表中。

防范

既然XSS那么可怕，那咱们要怎么防范被攻击呢？

方法仍是有的，只要系统作好防御，那么基本都是能够防XSS的。

httponly

cookie的参数httponly，就是不容许经过document.cookie访问cookie，因此只要咱们对敏感的cookie设置了httponly，那么客户端就算注入了XSS，可是攻击者也拿不到用户的cookie。

想了解cookie的，可查看楼主另一篇文章 cookie & session

CSP

CSP，也是经典的XSS防范手段，经过白名单的配置，咱们能够禁止页面执行inline脚本&样式，从而有效缓解XSS攻击。

固然，CSP最好要搭配https来使用，更加安全。

想了解CSP的，可查看楼主另一篇文章 前端安全 - CSP

输入校验

对于用户的输入，咱们一概都认为是不可信的。

因此，用户输入的东西咱们都要进行校验，特殊字符、格式、长度等，根据业务来设计。

前端页面作校验是必须的，接口校验也是必须的，毕竟页面和接口是分开的。用户固然能够直接调用接口来绕过输入的校验，因此，接口校验也是及其重要的一环。

输出转义

有的同窗可能会问，输入都进行校验了，为何还要作输出转义呢？

答案是：服务端过来的数据，咱们也要认为是不可信的，由于咱们并不知道，服务端给咱们数据的时候，到底作来什么处理，会不会影响页面。

转义也是3种：HTML转义、javascript转义、URL转义

HTML转义

当咱们要把数据贴进HTML标签的时候，必定要记得先将数据进行HTML转义，避免出现变成HTML标签的状况，那就不是咱们想要的。

HTML转义的字符有这5个

< : &lt;
> : &gt;
" : &quot;
' : &apos;
& : amp;
复制代码

javascript转义

当咱们拿到服务端数据要在js中操做的时候，也要注意对数据进行javascript转义。

javascript转义的字符，就是给特殊字符加 \

' : \'
" : \"
\ : \\
换行 : \n
复制代码

URL转义

不管是用户传入的数据，仍是服务端传来的数据，当这些数据要放到URL连接中提供用户打开的时候，这个时候注意了，须要进行URL转义。

由于URL各浏览器编码不一，因此最好的方式就是开发者本身统一编码。

URL转义只须要利用好encodeURIComponent便可

encodeURIComponent(key) + "=" + encodeURIComponent(value)
复制代码

web编码，可查看楼主另一篇文章 字符编码

写在最后

XSS攻击，是不容小觑的，对于咱们本身的网站，咱们仍是要作好防范，及时避免问题的出现。

咱们能够看下owasp 2017 发布的 top10 安全风险，XSS排在第七位，因此，你们要作好安全防范，规避XSS。

附上OWASP top 10 2017 版本 OWASP Top 10 2017