HTML5学习笔记-浅谈前端安全以及如何防范

随着互联网的发达，各类WEB应用也变得愈来愈复杂，知足了用户的各类需求，可是随之而来的就是各类网络安全的问题。做为前端开发行业的咱们也逃不开这个问题。因此今天我就简单聊一聊WEB前端安全以及如何防范。

首先前端攻击都有哪些形式，咱们该如何防范？

1、XSS攻击

XSS是一种常常出如今web应用中的计算机安全漏洞，它容许恶意web用户将代码植        入到提供给其它用户使用的页面中。好比这些代码包括HTML代码和客户端脚本。攻        击者利用XSS漏洞旁路掉访问控制——例如同源策略(same origin policy)。这种类型        的漏洞因为被黑客用来编写危害性更大的网络钓鱼(Phishing)攻击而变得广为人知。        XSS攻击的危害包括：

一、盗取各种用户账号，如机器登陆账号、用户网银账号、各种管理员账号
二、控制企业数据，包括读取、篡改、添加、删除企业敏感数据的能力
三、盗窃企业重要的具备商业价值的资料
四、非法转帐
五、强制发送电子邮件
六、网站挂马
七、控制受害者机器向其它网站发起攻击

XSS攻击的具体表现

一、JavaScript代码注入
下面是代码的页面

这段代码的做用是把第一个输入框的字符串，输出到第二个输入框，咱们输入1，那么第二个input里的value值就是1，下面是页面的截图和源代码的截图(这里我输入下面的代码来测试)

1. <script>alert('xss')</script>

复制代码

明显的能够看到，并无弹出对话框，你们可能会疑惑为何没有弹窗呢，看看源代码

咱们看到咱们输入的字符串被输出到第15行input标签里的value属性里面，被当成value里的值来显现出来，因此并无弹窗，这时候咱们该怎么办呢？聪明的人已经发现了能够在

1. <script>alert('xss')</script>

复制代码

前面加个">来闭合input标签。因此应该获得的结果为

成功弹窗了，咱们在看看这时的页面

看到后面有第二个input输入框后面跟有">字符串，为何会这样呢，咱们来看看源代码

解决办法：目前来说，最简单的办法防治办法，仍是将前端输出数据都进行转义最为稳妥，虽然显示出来是有script标签的，可是实际上，script标签的左右尖括号(><)，均被转义为html字符实体，因此，便不会被当作标签来解析的，可是实际显示的时候，这两个尖括号，仍是能够正常展现的。

二、append的利用上一小节咱们防住了script标签的左右尖括号，但聪明的黑客们仍是想出了好办法去破解，咱们知道，直接给innerHTML赋值一段js，是没法被执行的。好比，

1. $('div').innerHTML = '<script>alert("okok");</script>';

复制代码

可是，jQuery的append能够作到，究其缘由，就是由于jquery会在将append元素变为fragment的时候，找到其中的script标签，再使用eval执行一遍。jquery的append使用的方式也是innerHTML。而innerHTML是会将unicode码转换为字符实体的。

利用这两种知识结合，咱们能够得出，网站使用append进行dom操做，若是是append咱们能够决定的字段，那么咱们能够将左右尖括号，使用unicode码假装起来，就像这样--"\u003cscript\u003ealert('xss');"。接下来转义的时候，假装成\u003的<会被漏掉，append的时候，则会被从新调用。虽然进行了转义，注入的代码仍是会再次被执行

三、img标签的再次利用
img标签，在加载图片失败的时候，会调用该元素上的onerror事件。咱们正能够利用这种方式来进行攻击。

可是，若是这张图片的地址咱们换种写法呢？

这时的源码已经变为--src为空，可是onerror的时候，执行注入代码。咱们刷新查看页面，就会发现，代码注入已经成功，须要继续转义。

2、 CSRF攻击

什么是CSRF攻击？

CSRF（Cross-site request forgery跨站请求伪造，也被称为“One Click Attack”或者Session Riding，一般缩写为CSRF或者XSRF，是一种对网站的恶意利用。其实就是网站中的一些提交行为，被黑客利用，你在访问黑客的网站的时候，进行的操做，会被操做到其余网站上(如：你所使用的网络银行的网站)。

一、要合理使用post与get

一般咱们会为了省事儿，把一些应当提交的数据，作成get请求。却不知，这不只仅是违反了http的标准而已，也一样会被黑客所利用。
好比，你开发的网站中，有一个购买商品的操做。你是这么开发的：

那么，黑客的网站能够这样开发：

这样的话，用户只须要访问一次黑客的网站，其实就至关于在你的网站中，操做了一次。然而用户却没有感知。
因此，咱们平常的开发，仍是要遵循提交业务，严格按照post请求去作的。更不要使用jsonp去作提交型的接口，这样很是的危险。

二、xsrf攻击升级

若是你使用了post请求来处理关键业务的，仍是有办法能够破解的。咱们的业务代码以下：

黑客代码以下：

点击后，用户进行了提交，却连本身都不知情。这种状况如何防护呢？

最简单的办法就是加验证码，这样除了用户，黑客的网站是获取不到用户本次session的验证码的。可是这样也会下降用户的提交体验，特别是有些常常性的操做，若是总让用户输入验证码，用户也会很是的烦。

另外一种方式，就是在用访问的页面中，都种下验证用的token，用户全部的提交都必须带上本次页面中生成的token，这种方式的本质和使用验证码没什么两样，可是这种方式，整个页面每一次的session，使用同一个token就行，不少post操做，开发者就能够自动带上当前页面的token。若是token校验不经过，则证实这次提交并不是从本站发送来，则终止提交过程。若是token确实为本网站生成的话，则能够经过。


代码以下

并无携带本站每次session生成的token，则提交失败。

本站的网站form，则都会自动携带本站生成的token

再次使用本站的网页进行提交，则经过

固然，上面的只是例子，具体的token生成，确定是要随着session与用户ID去变的，若是各位看官以为本身的网站也须要加个token，请自行百度，进行深刻的学习。

3、网络劫持攻击

不少的时候，咱们的网站不是直接就访问到咱们的服务器上的，中间会通过不少层代理，若是在某一个环节，数据被中间代理层的劫持者所截获，他们就能获取到使用你网站的用户的密码等保密数据。好比，咱们的用户常常会在各类饭馆里面，连一些奇奇怪怪的wifi，若是这个wifi是黑客所创建的热点wifi，那么黑客就能够结果该用户收发的全部数据。这里，建议站长们网站都使用https进行加密。这样，就算网站的数据能被拿到，黑客也没法解开。
若是你的网站尚未进行https加密的化，则在表单提交部分，最好进行非对称加密--即客户端加密，只有服务端能解开。这样中间的劫持者便没法获取加密内容的真实信息了。

4、控制台注入代码

不知道各位看官有没有注意到天猫官网控制台的警告信息，如图4.1所示，这是为何呢？由于有的黑客会诱骗用户去往控制台里面粘贴东西（欺负小白用户不懂代码），好比能够在朋友圈贴个什么文章，说:"只要访问天猫，按下F12而且粘贴如下内容，则能够得到xx元礼品"之类的，那么有的用户真的会去操做，而且本身隐私被暴露了也不知道。
天猫这种作法，也是在警告用户不要这么作，看来天猫的前端安全作的也是很到位的。不过，这种攻击毕竟是少数，因此各位看官看一眼就行，若是真的发现有的用户会被这样攻击的话，记得想起天猫的这种解决方案。

5、钓鱼

钓鱼也是一种很是古老的攻击方式了，其实并不太算前端攻击。可毕竟是页面级别的攻击，咱们也来一块儿聊一聊。我相信不少人会有这样的经历，QQ群里面有人发什么兼职啦、什么本身要去国外了房子车子甩卖了，详情在我QQ空间里啦，之类的链接。打开以后发现一个QQ登陆框，其实一看域名就知道不是QQ，不过作得很是像QQ登陆，不明就里的用户们，就真的把用户名和密码输入了进去，结果没登陆到QQ，用户名和密码却给人发过去了。
其实这种方式，在前端也有利用。下面，咱们就来试试若是利用前端进行一次逼真的钓鱼。

1 首先，咱们在xx空间里分享一篇文章，而后吸引别人去点击。

2 接着，咱们在cheat.php这个网站上面，将跳转过来的源网页地址悄悄的进行修改。

因而，在用户访问了咱们的欺骗网站后，以前的tab已经悄然发生了变化，咱们将其悄悄的替换为了钓鱼的网站，欺骗用户输入用户名、密码等。

3 咱们的钓鱼网站，假装成XX空间，让用户输入用户名与密码

这种钓鱼方式比较有意思，重点在于咱们比较难防住这种攻击，咱们并不能将全部的页面连接都使用js打开。因此，要么就将外链跳转的链接改成当前页面跳转，要么就在页面unload的时候给用户加以提示，要么就将页面全部的跳转均改成window.open，在打开时，跟大多数钓鱼防治异曲同工的一点是，咱们须要网民们的安全意识提升。

6、咱们平时开发要注意些什么？

开发时要提防用户产生的内容，要对用户输入的信息进行层层检测要注意对用户的输出内容进行过滤(进行转义等)重要的内容记得要加密传输(不管是利用https也好，本身加密也好)

get与post请求，要严格遵照规范，不要混用，不要将一些危险的提交使用jsonp完成。

对于URL上携带的信息，要谨慎使用。心中时刻记着，本身的网站哪里可能有危险。