浏览器特性与安全策略

同源策略

同源策略规定：不同域的客户端脚本在没有明确授权的情况下，不能读写对象的资源。

同源和异源

不同域

• 协议不同(HTTP与HTTPS)
• 域名不同(顶级域，www域和子域)
• 端口不同(比如80端口和81端口)

同域

• 多了目录，符号协议，域名，端口都相同

网页授权

通过HTTP响应头返回字段设置的，设置字段如下：Access-Controll-Allow-Origin: http://www.demo.com

沙盒框架(Sandboxed frame)

• 是对常规<iframe>表现行为的扩展，它能让顶级页面对其嵌入的子页面及这些子页面的子资源设置一些额外的限制
• 通过<iframe>的参数实现限制
  • Allow-scripts ：是否允许执行javascript脚本，没有则不允许
  • Allow-forms ： 是否允许使用form表单，没有则不允许
  • Allow-top-navigation : 是否允许嵌入子页面控制顶级窗口的地址跳转，没有则不允许
  • Allow-same-origin : 是否允许访问同源数据，没有则不允许

Flash安全沙箱

• 分为本地沙箱与远程沙箱
• 类似同源策略，在同一域内的资源会被放到一个安全组下，称为安全沙箱
• Web站点通过crossdomain.xml文件配置可以提供允许的跨域访问本域上内容的权限(放置于站点根目录)

    <cross-domain-policy>
     <allow-access-form domain=".youku.com" />
    </cross-domain-policy>

Cookie的安全策略

• Domain 用于指定Cookie的有效域
• Path 用于指定Cookie的有效URL路径
• Secure 如果设置该属性，仅在HTTPS请求中提交Cookie
• Http 其实是HttpOnly, 如果设置该属性，客户端javascript无法获取Cookie的值

内容安全策略 (Content Security Polity, CSP)

通过编码在HTTP响应头中的指令来实施策略

• Content-Security-Polity:script-src 'self' https://baidu.com
• CSP的一些指令
  • default-src : 该指令在某种资源类型指定指令没有被定义的情况下制定了所有资源类型的加载策略(即默认的资源加载策略)
  • script-src : 该指令指定了Web应用程序可以加载的脚本的域或URL
  • object-src : 该指令制定了Web应用程序可以加载的插件，如Falsh
  • style-src : 该指令制定了Web应用程序可以加载的CSS样式表的域或URL
  • img-src : 该指令指定了Web应用程序可以加载的图片的域或URL
  • media-src : 该指令指定了Web应用程序可以加载的音视频的域或URL
  • frame-src : 该指令指定了Web应用程序可以加载的框架的域或URL
  • font-src : 该指令指定了Web应用程序可以加载的字体的域或URL
  • connect-src : 该指令指定了Web应用程序可以加载的像XHR, WebSockets, 以及EventSource等脚本接口的域或URL
  • plugin-types : 该指令指定了哪些MIME类型的插件可以被加载(浏览器支持度不够)
  • form-action : 该指令指定了HTML表单可以提交的URLS(浏览器支持度不够)
  • reflected-xss : 该指令告诉浏览器开启或关闭任何用于过滤或组织反射跨站脚本攻击的启发式算法，这相当于X-XSS-Protection响应头的效果(浏览器支持度不够)

---

浏览器的缓存策略

前端缓存策略：

已开始生产的项目，用户每次刷新的时候大多数与上次请求的数据一致。那么服务器端的数据没有更新，客户端也没有必要每次都去服务器端拉取数据，占用服务器的带宽。这时候需要前端的静态文件缓存机制。以下以nginx配置为例(前提，已对nginx有基本的了解)。

如何配置，请看下一篇 《nginx缓存配置》

一、介绍

1、Last-Modified

在浏览器第一次请求某一个URL时，服务器端的返回状态码会是200，内容是你请求的资源，同时有一个Last-Modified的属性标记（在HttpReponse Header），此文件在服务器端最后被修改的时间。

客户端第二次请求此URL的时，根据HTTP协议的规定，浏览器会向服务器询问是否被修改过(If-Modified-Since在HttpRequest Header)

如果服务器端的资源没有变化，则自动返回HTTP状态码为304（NotChanged）内容为空,这样就节省了传输量，节省了带宽。当服务器端代码发生变化或重启服务器时，则重新发送资源，如第一次请求时返回数据一样。

2、ETag

Http协议说明定义EFlag为“被请求变量的实体标记”，及服务器响应时会给URL做标记，并在HttpReponse Header返回给客户端。同样，如果Etag没有变，返回状态码为304。

当下次需要发Request索要同一个URI的时候，浏览器同时发出一个If-None-Match报头(Http RequestHeader)此时包头中信息包含上次访问得到的Etag。

If-None-Match:“5d8c72a5edda8d6a:3239“

,这样，Client端等于Cache了两份，服务器端就会比对2者的ETag。如果If-None-Match为False，不返回200，返回304(Not Modified) Response。

3、Expries

缓存有效期。用于控制请求文件的有效时间，当请求数据在有效期内客户端获取数据是从缓存请求数据而不是从服务器。当缓存时间过期后，才从服务器更新数据。

4、Last-Modified和Expires

Last-Modified标识能够节省一点带宽，但是还是逃不掉发一个HTTP请求出去，而且要和Expires一起用。而Expires标识却使得浏览器干脆连HTTP请求都不用发，比如当用户F5或者点击Refresh按钮的时候就算对于有Expires的URI，一样也会发一个HTTP请求出去，所以，Last-Modified还是要用的，而且要和Expires一起用。

5、Etag和Expires

如果服务器端同时设置了Etag和Expires时，Etag原理同样，即与Last-Modified/Etag对应的HttpRequestHeader:If-Modified-Since和If-None-Match。我们可以看到这两个Header的值和WebServer发出的Last-Modified,Etag值完全一样；在完全匹配If-Modified-Since和If-None-Match即检查完修改时间和Etag之后，服务器才能返回304.

6、Last-Modified和Etag

注意：分布式系统里多台机器间文件的last-modified必须保持一致，以免负载均衡到不同机器导致比对失败，分布式系统尽量关闭掉Etag(每台机器生成的etag都会不一样)

Last-Modified和ETags请求的http报头一起使用，服务器首先产生Last-Modified/Etag标记，服务器可在稍后使用它来判断页面是否已经被修改，来决定文件是否继续缓存

7、Cache-Control:max-age=秒 和 Expries

Expries = 时间，HTTP 1.0 版本，缓存的时间，允许客户端在这个时间段之内不去检查(发送请求)

max-age = 秒，HTTP 1.1版本，资源在本地缓存多少秒

如果max-age 和 Expries 同时存在，则被Cache-Control:max-age覆盖。

Expires 的一个缺点就是，返回的到期时间是服务器端的时间，这样存在一个问题，如果客户端的时间与服务器的时间相差很大，那么误差就很大，所以在HTTP 1.1版开始，使用Cache-Control: max-age=秒替代。

Expires =max-age + “每次下载时的当前的request时间”

所以一旦重新下载的页面后，expires就重新计算一次，但last-modified不会变化 .

二、过程

1.客户端请求一个页面（A）。

2.服务器返回页面A，并在给A加上一个Last-Modified/ETag。

3.客户端展现该页面，并将页面连同Last-Modified/ETag一起缓存。

4.客户再次请求页面A，并将上次请求时服务器返回的Last-Modified/ETag一起传递给服务器。

5.服务器检查该Last-Modified或ETag，并判断出该页面自上次客户端请求之后还未被修改，直接返回响应304和一个空的响应体。

具体事例请看：