浏览器特性与安全策略

野性酷女 2021-07-04 22:50 570阅读 0赞

## 同源策略 ##

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

## 同源和异源 ##

不同域

*  协议不同(`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）。