前端安全以及如何防范

一、XSS攻击

1.什么是XSS攻击？

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

2.XSS攻击的危害

1、盗取各类用户帐号，如机器登录帐号、用户网银帐号、各类管理员帐号
2、控制企业数据，包括读取、篡改、添加、删除企业敏感数据的能力
3、盗窃企业重要的具有商业价值的资料
4、非法转账
5、强制发送电子邮件
6、网站挂马
7、控制受害者机器向其它网站发起攻击

3.XSS攻击的具体表现

1、JavaScript代码在表单输入框的注入
2、append的被利用
3、img标签的再次利用（onerror）

4.XSS攻击的解决方法

1.转义字符
2.设置白名单

二、CSRF攻击

1.什么是CSRF攻击?

CSRF(Cross-site request forgery跨站请求伪造）通常缩写为CSRF或者XSRF，是一种对网站的恶意利用。其实就是网站中的一些提交行为，被黑客利用，你在访问黑客的网站的时候，进行的操作，会被操作到其他网站上。

2.CSRF攻击的解决方法

1、要合理使用post与get
2、xsrf攻击升级（加验证[图形验证码，短信验证码]，添加token）
3、阻止第三方网站请求接口

三、网络劫持攻击

很多的时候，我们的网站不是直接就访问到我们的服务器上的，中间会经过很多层代理，如果在某一个环节，数据被中间代理层的劫持者所截获，他们就能获取到使用你网站的用户的密码等保密数据。比如，我们的用户经常会在各种饭馆里面，连一些奇奇怪怪的wifi，如果这个wifi是黑客所建立的热点wifi，那么黑客就可以结果该用户收发的所有数据。这里，建议站长们网站都使用https进行加密。这样，就算网站的数据能被拿到，黑客也无法解开。

解决网络劫持攻击的方法：
1.对网站进行https加密
2.如果你的网站还没有进行https加密的化，则在表单提交部分，最好进行非对称加密--即客户端加密，只有服务端能解开。这样中间的劫持者便无法获取加密内容的真实信息了。

四、控制台注入代码

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

避免控制台注入代码的方法就是仿照天猫的做法，在控制台给出友情提示。

五、钓鱼

钓鱼也是一种非常古老的攻击方式了，其实并不太算前端攻击。可毕竟是页面级别的攻击。我相信很多人会有这样的经历，QQ群里面有人发什么兼职啦、什么自己要去国外了房子车子甩卖了，详情在我QQ空间里啦，之类的连接。打开之后发现一个QQ登录框，其实一看域名就知道不是QQ，不过做得非常像QQ登录，不明就里的用户们，就真的把用户名和密码输入了进去，结果没登录到QQ，用户名和密码却给人发过去了。

避免钓鱼攻击的方法就是尽量不要随便点击各种链接。

六、如何防范 Web 前端攻击？

1.不要信任任何外部传入的数据
2.针对用户输入作相关的格式检查、过滤等操作
不要信任在任何传入的第三方数据
3.使用 CORS，设置 Access-Control-Allow-Origin
更安全地使用 Cookie
4.设置Cookie为HttpOnly，禁止了JavaScript操作Cookie
防止网页被其他网站内嵌为iframe
5.服务器端设置 X-Frame-Options 响应头，防止页面被内嵌

6.开发时要提防用户产生的内容，要对用户输入的信息进行层层检测要注意对用户的输出内容进行过滤(进行转义等)重要的内容记得要加密传输(无论是利用https也好，自己加密也好)
7.get与post请求，要严格遵守规范，不要混用，不要将一些危险的提交使用jsonp完成。
8.对于URL上携带的信息，要谨慎使用。

总的来说有以下几点:
1.永远不要信任用户的输入，要对用户的输入进行校验，可以通过正则表达式，或限制长度，对单引号和双"-"进行转换等
2.永远不要使用动态拼装SQL，可以使用参数化的SQL或者直接使用存储过程进行数据查询存取
3.永远不要使用管理员权限的数据库连接，为每个应用使用单独的权限有限的数据库连接
4.不要把机密信息明文存放，请加密或者hash掉密码和敏感的信息

浅谈前端安全以及如何防范
前端面试题-安全防范
web security