跨域知识梳理

参考:
维基百科 – Root domain
https://en.wikipedia.org/wiki…
浏览器同源政策及其规避方法 – 阮一峰
http://www.ruanyifeng.com/blo…
window.name 跨域实现原理及实例
http://blog.csdn.net/qq_34099…
html5 postMessage 官方API
https://developer.mozilla.org…
JSONP(直接跳到JSONP那段)
http://kb.cnblogs.com/page/13…
跨域资源共享 CORS 详解 – 阮一峰
http://www.ruanyifeng.com/blo…
跨域资源共享(CORS) – 阿里云技术文档
https://www.alibabacloud.com/…

1 基本概念

1.1 域&域名

域 domian :
. 根域、
.org 顶级域(一级域)、
.baidu.com 二级域

域名 domain name : baidu
.com 顶级域名(一级域名)、www
.baidu
.com 二级域名

1.2 同源策略&跨域

同源条件:协议相同、域名相同、端口相同,不满足即为
跨域

同源目的:浏览器
同源策略,保证用户信息的安全,防止恶意的网站窃取数据

1.3 限制范围

很多文章中介绍,跨域会对以下3种行为进行限制:

1)cookie、localStorage、indexedDB

2)dom

3)ajax 请求

我理解按如下分类更为合理:

1)cookie

2)iframe/window.open ( localStorage、indexedDB、dom )

3)ajax 请求

  • cookie 身份授权单独一类
  • localStorage、indexedDB、dom 跨域受限,一般发生在 iframe 或 window.open 的跨域需求时,无法获取新页面的 window 对象,自然无法访问 window.localStorage、window.indexedDB、document.getElementById
  • ajax 请求单独一类。

2 实现跨域

2.1 document.domain

浏览器允许通过设置 document.domain 来实现跨子域

如有 a.example.com 和 b.example.com 2个二级域名,设置 document.domain=example.com 或 Set-Cookie:key=value;domain=example.com;path=/ 可实现2个二级域之间的跨域

可解决 cookie、iframe、window.open、ajax 的跨域问题

2.2 URL #hash + hashChange事件监听

可解决 iframe 的跨域问题

不推荐,如 angular.ui.router 前端路由组件会使用到 URL #hash 字段。

2.3 window.name

可解决 iframe 的跨域问题

window.name 的变化如何监听是一个问题,大约可以存储2M的内容

2.4 html5 postMessage + message事件监听

可解决 iframe & window.open 的跨域问题

语法:otherWindow.postMessage(message, targetOrigin, [transfer]);

官方API参考

2.5 ajax – JSONP

参考:http://kb.cnblogs.com/page/13…

实现原理:web页面上调用js文件时不受同源策略影响,拥有src属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>。基于此特性,开发人员总结出JSONP方法。

优点:浏览器兼容性好,服务器改造工作量小。
缺点:仅适用 GET 请求;请求出错时,无法获得http错误状态码

客户端实现
《跨域知识梳理》
服务端实现
《跨域知识梳理》

客户端将 http 跨域查询参数 flightNumber 与回调函数 flightHandler 传递给服务器,服务器处理完后动态生成 test.js 返回,浏览器加载 test.js 完成后执行 flightHandler,完成跨域请求。

在实际编码时,客户端可使用如 jQuery 封装好的 JSONP API。

2.6 ajax – websocket

WebSocket是一种通信协议,使用ws://(非加密)和wss://(加密)作为协议前缀。该协议不实行同源政策,只要服务器支持,就可以通过它进行跨源通信。
摘自阮一峰博客

WebSocket 延伸阅读(不涉及跨域)

2.7 ajax – CORS

CORS 跨源资源分享(Cross-Origin Resource Sharing)为 W3C 标准(
兼容性参考

优点:提供安全的跨域数据传输,且不限于 GET 请求。

整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求。因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。
跨域资源共享(CORS) – 阿里云技术文档
跨域资源共享CORS详解 – 阮一峰

    原文作者:Eric
    原文地址: https://segmentfault.com/a/1190000010701786
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞