1.XSS
XSS全称(Cross Site Scripting)跨站脚本攻击，是前端最常见的安全问题。XSS是一种在web应用中的计算机安全漏洞，它允许恶意web用户将代码植入到提供给其它用户使用的页面中，攻击者通过注入非法的html标签或者javascript代码，从而当用户浏览该网页时，控制用户浏览器。
类别
1. DOM型xss
利用DOM本身存在的缺陷进行攻击。
如下代码，页面中某个图片获取路径。其中，返回的{{img.src}}='/xxx' onerror='/xxx'，img标签就变成了<img src="/xxx" onerror=xxx">。src肯定会加载失败，然后会执行onerror中注入的恶意代码，达到攻击效果。
<img src="{{img.src}}">
2. 反射型xss
反射型XSS也被称为非持久性XSS，是现在最容易出现的一种XSS漏洞。XSS代码出现在URL中，通过引诱用户点击一个链接到目标网站的恶意链接来实施攻击。
如下恶意链接，其中，xxx是恶意代码。传到服务器的参数data，被服务器接收之后，响应的页面包含data这个变量的，会将恶意代码注入到页面上面，进行攻击。
http://www.abc.com?data=xxx
3. 存储型xss
存储型XSS又被称为持久性XSS，它是最危险的一种跨站脚本，相比反射型XSS和DOM型XSS具有更高的隐蔽性，所以危害更大，它不需要用户手动触发。
当攻击者提交一段XSS代码后，被服务器端接收并存储，当所有浏览者访问某个页面时都会被XSS，其中最典型的例子就是留言板。
解决方案
1.过滤。
对用户的输入进行过滤，通过将<> '' ""等字符进行转义，移除用户输入的Style节点、Script节点、Iframe节点。
function filterXss(str){
var s = "";
if(str.length == 0) return "";
s = str.replace(/&/g,"&");
s = s.replace(/</g,"<");
s = s.replace(/>/g,">");
s = s.replace(/ /g," ");
s = s.replace(/\'/g,"'");
s = s.replace(/\"/g,""");
return s;
}
2.编码
根据输出数据所在的上下文来进行相应的编码。数据放置于HTML元素中，需进行HTML编码，放置于URL中，需要进行URL编码。此外，还有JavaScript编码、CSS编码、HTML属性编码、JSON编码等等。
3.httpOnly
在cookie中设置HttpOnly属性，使js脚本无法读取到cookie信息。
2.CSRF
CSRF全称(Cross-Site Request Forgeries)跨站请求伪造。指攻击者冒充用户发起请求（在用户不知情的情况下），完成一些违背用户意愿的事情。攻击过程如下图所示：
解决方案
1.使用token
服务器产生一个token存到session中，同时将token发送给客户端，客户端提交表单时带上该token，服务器验证token与session是否一致，一致就允许访问，否则拒绝访问。
2.Referer 验证
Referer 指的是页面请求来源，意思是，只接受本站的请求，服务器才做响应；如果不是，就拦截。
3.使用验证码
对于重要请求，要求用户输入验证码，强制用户必须与应用进行交互，才能完成最终请求。
3.点击劫持
点击劫持就是将一个危险网站设置透明，然后在其上方设置一个按钮，当你点击这个按钮的时候，就会触发底部恶意网站的某些事件。
解决方案
1.设置http响应头 X-Frame-Options
X-Frame-Options HTTP 响应头是用来给浏览器指示允许一个页面可否在<frame>, <iframe>或者 <object> 中展现的标记。网站可以使用此功能，来确保自己网站的内容没有被嵌到别人的网站中去。
2.使用CSP(Content Security Policy)内容安全策略
4.不安全的第三方依赖
现如今进行应用开发，无论是后端服务器应用还是前端应用开发，绝大多数时候我们都是在借助开发框架和各种类库进行快速开发。然而，一些第三方的依赖或者插件存在很多安全性问题，也会存在这样那样的漏洞，所以使用起来得谨慎。
解决方案
1.尽量减少第三方依赖，选用相对成熟的依赖包。
2.使用自动化工具检查这些第三方代码有没有安全问题，比如NSP(Node Security Platform)，Snyk等等。
5.本地存储数据泄露
很多开发者为了方便，把一些个人信息不经加密直接存到本地或者cookie，这样是非常不安全的，黑客们可以很容易就拿到用户的信息。
解决方案
1.不在本地存储重要数据
敏感、机密信息不要存储在本地。
2.加密
所有在放到cookie中的信息或者localStorage里的信息要进行加密，加密可以自己定义一些加密方法或者网上寻找一些加密的插件，或者用base64进行多次加密然后再多次解码。
