《前端安全精讲》

web前端安全虽然在平时的开发中涉及的不是不少，但也是前端综合技能领域重要的一环。不管是对于提高产品总体的安全性可靠性，仍是做为技术人员自身能力的提高，了解基本常见的前端安全问题，都是很是有必要的。

本文旨在对前端安全涉及的内容作一个梳理。其实做为讲解安全的文章，有一个痛点，那就是很难用文章的形式把这个具体的发生实现过程展现清楚，这可能须要大量的代码以及辅助的贴图，这样反而会让人看的迷糊。因此本文只会以文字形式讲解安全问题，以供你们对这个领域知识的梳理和回顾。

1、XSS(Cross-Site-Scripting)跨站脚本攻击

1.1 XSS攻击原理

XSS攻击的重点其实不在“跨站”这个字面上，重点是“脚本”。之因此这么说，是由于XSS攻击是发生在目标用户的浏览器层面的一种攻击，当用户浏览器渲染整个HTML文档的过程当中出现了不被预期的脚本时，XSS就会发生。

其实XSS攻击攻击的原理还能够说的更加简单明了，就是用户访问的页面中，被植入了不安全的脚本。而这些脚本，具备各类危害用户的能力。至于这些脚本是如何被植入的，那形式就多种多样了。举几个例子。
1.不少网站内部的JavaScript代码，会读取浏览器地址中携带的信息，并做为内容在页面中展现。假若有这样一个URL地址

http://www.demo.com?xss=<script>alert(document.cookie)</script>
复制代码

这段地址中的query值xss若是被读取而且执行，就具有了在页面中执行程序的能力。这只是一个简单的alert，若是经过src的方式引入第三方JS文件，那么攻击者可作的事情就更多了。
2.比较常见的是一些带有用户留言功能的网站。好比攻击者A在留言中写入了一段攻击代码，这段代被发送到服务器，而且没有通过转义过滤，。当用户B访问网页的时候，获取了这段代码并直接执行了，这就产生了XSS攻击。
总之，XSS的攻击者的目的就是想尽一切办法将他的脚本内容在目标网站中目标用户的浏览器上解析执行。

1.2 XSS攻击类型

XSS攻击根据类型能够分为:
1.反射型XSS(非持久型XSS)。XSS代码出如今URL中，攻击者须要将带有攻击脚本的URL发送给目标用户。用户点击访问后，在本地的浏览器解析执行了攻击代码。
2.存储型XSS(持久型XSS)。存储型的XSS代码，会被存储在服务器端。当用户访问网页的时候，从服务器拿到攻击代码并执行。
3.DOM XSS。它和其它两个类型的差异在于DOM XSS的XSS代码并不须要服务器解析响应的参与，触发XSS考的就是浏览器的DOM解析。

1.3 XSS攻击防护

说完了XSS的原理和类型，就得了解一下相关的解决防护方案。
对于反射型XSS，须要注意的地方有：
1.web页面渲染的内容必须从服务的获取，用户的输入必须通过处理才能展现。 2.不要从URL等这些途径获取数据直接展现到页面中。 3.对于用户输入，或者是动态获取的数据，须要通过转义才能执行展现。 对于存储型XSS，须要注意的地方有：
1.后端将数据存入数据库以前，先进行转义。
2.后端输出给前端的数据，须要进行统一转义处理。
3.前端获取后端的数据后，对数据进行转义处理。

2、CSRF(Cross-Site-Request-Forgery)跨站请求伪造

2.1 CSRF的原理和实现

CSRF的攻击有两个关键点:
1.跨站点的请求。
2.请求是伪造的。
咱们知道，不一样域的Ajax请求时不合法的，同源策略禁止了跨域的数据传输。那么不一样站点的CSRF攻击是如何产生的呢？
这里有一个很重要的知识点就是，客户端HTML标签发出的跨域GET请求被认为是合法的，不在同源策略的限制中。
1.恶意网站B上有一个带有CSRF攻击代码的页面，其中的代码多是这样

<img src="http://www.a.com/blog/del?id=5">
复制代码

2.攻击者诱使登陆了正规A网站的用户，访问了他的B网站上的CSRF页面。
3.因为用户登陆了A网站，因此访问这个页面请求了携带在img标签中的地址。而且在这个访问中，http中请求信息几乎是如出一辙的。
经过这样的方式，攻击者不但绕开了同源策略的限制，还伪造了请求的身份信息。

2.2CSRF的防护

虽然CSRF的攻击可以伪造用户的信息，可是这样的请求毕竟是从第三方网站发起的，它并不会通过正规网站自己。因此对于CSRF的防护大概有 1.经过设置sameSite-Strict属性，禁止第三方网站携带cookie。 2.在正规网站的页面提交内容，能够设置验证码，或者是token。 3.虽然第三方网站的跨站请求信息几乎和正规网站是同样的，可是仍是有所不一样。这个不一样就是请求信息中的Referer字段，这个字段描述了请求的来源。能够经过这个字段禁止第三方网站的请求。

3、界面操做劫持攻击

界面操做劫持攻击是一种基于视觉欺骗的web会话攻击，它经过在页面可见控件上覆盖一个不可见的框(iframe)，使得用户误觉得本身在操做可见框，从而在用户不知情的状况下篡改数据、窃取信息等。
界面劫持攻击大概有三类:
1.点击劫持。
2.拖放劫持。
3.触屏劫持。
界面操做劫持的防护主要在于禁止网站被嵌入到iframe中，能够经过JavaScript代码实现。也能够经过X-FRAME-OPTIONS属性的设置，禁止页面被嵌入到iframe中。

4、Cookie安全问题

cookie是一种前端数据存储方式，后端经过HTTP响应头设置cookie。不少攻击的实现，都是经过获取用户的cookie信息，从而伪造身份形成攻击。因此保证cookie的安全，是前端安全的重要一环。
cookie的安全能够从如下几个方面着手。
1.经过加签名的方式，防止cookie被篡改。
2.经过对cookie内容的加密，防止被盗用。
3.设置响应头中的http-only字段，方式客户端的JavaScript代码读取cookie。
4.设置secure字段，只容许在https下使用cookie。
5.经过same-site保证cookie安全(浏览器兼容性较差)。

关于前端安全的问题，各式各样的变形还有不少。攻击每每也不是单一的方式，而是多种多样的攻击手段的组合。为了保证前端页面的安全性和可靠性，须要先后端的通力合做。