前端开发涉及的Web安全

前端开发涉及常见的Web安全漏洞有：浏览器Web安全，跨站脚本攻击（XSS），跨站请求伪装（CSRF），点击劫持，HTTP劫持，DNS劫持，文件上传漏洞等，以跨站脚本攻击漏洞最为常见，作为前端开发需要了解一些基本的Web安全漏洞和相关的防御措施。

浏览器安全

1. 同源策略

同源策略：是浏览器安全功能的基本措施，限制了来自不同源的脚本和document对当前对象的一些属性的获取或者设置。同源策略的影响因素：域名或者IP，子域名，端口，协议。

不是浏览器所有的元素收到同源策略的约束。srcipt，img，iframe，link等DOM标签可以通过src属性加载跨域资源，但是同时浏览器限制了JavaScript的权限，不能对读写返回的内容。

XMLHttpRequest对象本身不能进行跨站请求，但是可以通过设置HTTP header报文的方式，获得跨站资源请求的能力，这个策略基础是：浏览器上JavaScript没有访问HTTP header的权限。涉及的请求首部：Origin，响应首部：Access-Control-Allow-Origin。

同源策略也可能存在漏洞，比如IE8的CSS跨域漏洞。

1. 沙箱（SandBox）

SandBox是提供一种设置访问内容范围的措施，确保沙箱内部的进程只能访问被分配的资源，不能访问未被分配的资源，从而对系统本身提供安全保护。

现代浏览器是一般基于多进程架构，以Chrome为例主要有browser进程，renderer进程，插件进程和扩展进程。不同的进程各自分工通过特殊接口通信，browser进行管理浏览器前端页面，renderer进程管理page tab，browser进程管理renderer进程的资源分配，chrome的SandBox用来保护renderer对象，确保renderer进程的访问权限只能访问被分配的资源。

1. 恶意网站拦截

对于恶意网站的定义，那些对于普通网民或者社会有害的网站都是恶意网站，仿冒，木马，盗号，博彩，色情这些常见的恶意网站，一般浏览器都有恶意网站举报功能，对于确认的恶意网站浏览器厂商会维护一份恶意网站黑名单，浏览器定时获取黑名单的最新目录进行拦截操作。

跨站脚本攻击（XSS）

跨站脚本攻击（XSS），全称Cross Site Script，为了区层叠样式表CSS使用了XSS简称。

跨站脚本攻击的产生是因为Web页面被植入了恶意的JavaScript代码，当用户浏览页面时诱导用户进行点击等操作后，这些恶意代码被执行，从而完成攻击目的。XSS按照不同的效果分类：

1. 反射型XSS

将用户输入“反射”到浏览器上成为反射型XSS，也成为非持久性的XSS，比如：

<div><script>alert("xss")</script></div>

1. 存储型XSS

相对于非持久性XSS，存储型的XSS是将用户输入进行数据持久化操作，具有一定的稳定性。

1. 常见的XSS攻击

a. Cookie劫持

存储型XSS常见的安全漏洞有Cookie劫持，因为Cookie保存用户的登录凭证，如果获取到用户当前的Cookie可以绕过登录密码进行Web操作，具有很大的破坏力。可以通过设置Cookie过期时间，设置Cookie的HttpOnly标识，绑定客户端IP等操作封装Cookie劫持。

b. 模拟HTTP请求

可以通过模拟GET，POST请求请求或者操作服务器资源也是XSS漏洞的一种情况，通过操作DOM页面的操作完成对服务器的攻击。

c. 获取用户浏览器信息

通过JavaScript获取用户浏览器UserAgent获取用户浏览器准确信息，因为不同的浏览器都有自己特定的一些属性或者方法，使用浏览器版本特征判断可以准确的获取用户的浏览器信息，因为UserAngent对象是可以伪造的。

通过判断不同的操作系统，不同的浏览器以及版本信息，攻击者可以更精准的实施安全攻击。

XSS的防御：

a. 前端输入输出进行检查，对于特殊字符进行过滤，转码等操作

b. 使用带有HttpOnly的Cookie

c. 富文本编辑器禁止使用事件，可以实现跨域操作的inframe，form，base等危险的标签也会被禁止，比如github上<base> 元素字符串格式也会被转义。

跨站点请求伪装（CSRF）

 跨站点请求伪装 （CSRF即Cross-site request forgery）利用用户身份，执行非本意的操作。

CSRF是一种挟持了用户身份，在已经登录的Web应用上执行非本意的攻击操作。它的请求是跨域并且利用登录Cookie，token等信息伪造的。

1. Cookie的获取

CSRF漏洞的第一步是伪造，在Web应用的删除等操作是需要登录认证才可以执行，所以需要获取用户的登录信息比如Cookie。

浏览器的Cookie策略分为两种：Sesstion Cookie和Third-party Cookie。Sesstion Cookie是临时性Cookie，保存在浏览器进程的内存中，打开新的Tab页面依旧可以在内存中获取Sesstion，生命周期在浏览器关闭时失效；Third-party Cookie又称为本地Cookie，需要在服务器设置Expire时间，保存在本地。

一些浏览器因为同源策略的原因，限制的了img，iframe等元素对Third-party Cookie的发送，比如IE浏览器，但是Firefox浏览器可以允许发生Third-party Cookie，在Firefox浏览器可以通过iframe等元素获取Third-party Cookie。比如

`<iframe ="http://www.a.com"></iframe>

`

在火狐浏览器上，我们在b网站获取a网站的内容，同时获取到Cookie的内容。

CSRF的防御：

a. 验证码：目前相对比较有效的防止CSRF漏洞的方式，通过强制的人机交互验证，更大程度的限制用户在不知情的情况下进行Web应用操作。

b. Referer Check：另外一种防止CSRF的思路，获取请求的“源”信息以判断请求是否合法，但是在实际应用中可能因为用户隐私设置，HTTPS跳转HTTP而导致获取不到相关参数，作为CSRF漏洞防御的一个补充措施。

c. Token认证：比较通用的预防措施，Token本身是一个不容易被猜中的随机数，分别保证在Cookie和和form中，通过判断Cookie的token和form的token是否一致。

点击劫持（ClickJacking）

点击劫持（ClickJacking）是一种视觉欺骗，使用iframe构建欺骗的DOM诱导用户非本意操作。

常见的点击劫持：

1. 点击劫持 在Web页面使用iframe构建透明的页面，完全覆盖当前页面，当用户操作点击页面的时候触发iframe构建的页面，可以发送攻击者需要的数据完成攻击。
2. 图片覆盖 使用ifame构建完整的图面覆盖当前页面的图片，当用户点击页面图片的时候，触发攻击代码，也可能构建新的电话号码覆盖网站原本提供的联系电话，导致用户上当受骗。
3. 拖拽劫持 iframe构建可以拖拽的元素，当用户拖拽元素的过程中触发拖住事件，敏感信息被发生到攻击者服务器。
4. 触屏劫持 发生在智能手机上的劫持漏洞，原理类似PC端，使用iframe构建元素欺骗用户。

点击劫持的防御：

点击劫持本质上是一种视觉上的欺骗，使用iframe构建欺骗DOM，用户操作这些DOM元素触发攻击事件，所以点击劫持的防御可以禁止使用iframe，常见的处理方式有两种。

a. frame busting：禁止iframe嵌套。

b. X-Frame-options：处理点击劫持的HTTP首部，可以配置是否使用iframe，以及配置iframe的来源。

HTTP劫持

HTTP劫持多见于网络运营商的操作，因为HTTP是明文传输，所以当运营上获取到网络链路上的HTTP请求时，在相应报文内容添加广告代码，当页面存在广告小弹窗说明页面目前被劫持，也可能是网络运营商的网络被攻击。

HTTPS是加密传输所以可以有效防止HTTP劫持。

HTTPS可以防止HTTP劫持。

DNS劫持

DNS劫持分为两种情况，一种是域名无法解析，则页面被路由到错误纠正页面，比如电信首页；第二种是域名解析被恶意路由到其他页面，域名是A网站结果被恶意劫持跳转到B网站导致无法访问A网站。

常见的钓鱼网站原理，其中灰色产业涉及违法问题现在已经被严厉监管。

文件上传漏洞

因为文件上传可能直接上传可执行脚本文件，所以需要处理文件上传验证以确保上传的服务器的文件是可信的，在Gmail文件上传使用文件类型检查文件格式，提供文件格式黑名单进行过滤，QQ邮箱直接使用文件后缀判断文件格式，提供白名单上传也就是指定的文件格式才可以被上传（Qmail是文件后缀判断，白名单处理是猜测的，之前做过类似处理对比过两种不同的文件处理方式）。