1 同源策略
同源的定义,两条URL同一协议protocol,同一端口port,同一主机地址host,则两个URL是同源的。 浏览器的同源策略是重要的安全机制,主要跨域规避一下重要问题,防止csrf攻击和xss攻击
2 CROS
一个W3C标准,跨域资源共享(Cross-origin resource sharing),允许浏览器跨源向服务器进行请求不同源的资源。CROS需要浏览器和服务器同时支持,不过客户端浏览器会自动完成,所以只需要服务器实现CORS接口即可
两种请求
浏览器会把CORS请求分为两种,简单请求和非简单请求 同时为了兼容表单form的跨域请求功能,简单请求包括两个特点:
- 请求方法是下面三者之一
- HTTP的头信息不超过一下几种字段
- Accept
- Accept-Language
- Content-Language
- Last-Event-ID
- Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
2.1 简单请求
浏览器发现此次请求为跨域请求,请求Headers会自然带上Origin字段,其值为跨域的域名,浏览器会设置Access-Control-Allow-Origin 的字段,其值跨域指定具体的域名,也可是*,表示任意域名。 若Origin指定的域名在许可范围内,服务器返回的响应,会多出几个共同前缀 Access-Control头信息的字段:
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8
- Access-Control-Allow-Origin:必填字段,它的值要么是请求时Origin字段的值,要么是一个*
- Access-Control-Allow-Credentials : 可选字段,表示是否为发送cookie请求,浏览器CORS默认不带cookie,设为true时,表示服务器中可以接受带cookie的跨域请求
- Access-Control-Expose-Headers,CORS请求时,拿到的响应只能有六个字段Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma,若其他字段值,服务器需放在Access-Control-Expose-Headers中返回去
2.2 非简单请求
预检测请求
浏览器检测到是非简单请求,会自动会发出一次预检测请求,返回码是204,预检测通过才会真正发出请求,这才返回200。预检请求请求方法是OPTIONS,还有上文提到的Origin,除此之外还有
- Access-Control-Request-Method:必须的,说明浏览器的CORS请求会用到哪些HTTP方法
- Access-Control-Request-Headers:指定浏览器CORS请求会额外发送的头信息字段
预检测信息的检验也有会返回一些特殊字段:
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000
浏览器的正常请求和响应
一旦服务器通过预检测请求后,以后每次浏览器都和简单请求也有,带上Origin字段,服务器也会响应Access-Control-Allow-Origin 字段
3 JSONP
- JSONP是利用script标签没有跨域限制漏洞,网页跨域从其他域得到JSON数据。JSONP的请求也需要服务器支持
- JSONP简单兼容性好,但是仅支持get方法,有局限性,其会受到XSS攻击
- 实现流程:
- 浏览器事先准备一个接受数据的全局函数
- 浏览器解析到外联的script标签,发出请求
- 服务端收到请求,返回函数调用
- 客户端收到数据,执行回调
4 postMessage
postMessage是HTML5 的API,是跨域实现跨域操作的windows熟悉,跨域解决下面的问题:
- 页面和其打开的新窗口的数据传递
- 多窗口之间消息传递
- 页面与嵌套的iframe消息传递
- 上面三个场景的跨域数据传递
-postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨文本档、多窗口、跨域消息传递。 otherWindow.postMessage(message, targetOrigin, [transfer]) 其中message是要发送到其他window的数据,targetOrigin是指定哪些窗口跨域接受
5 websocket
|