前端安全中，经常提到的有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个
< : <
> : >
" : "
' : '
& : 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
