同源与跨域

[TOC]

URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同，则表示他们同源。相反，只要协议，域名，端口有任何一个的不同，就被当作是跨域。

浏览器采用同源策略，禁止页面加载或执行与自身来源不同的域的任何脚本。换句话说浏览器禁止的是来自不同源的”document”或脚本，对当前”document”读取或设置某些属性。

浏览器中有哪些不受同源限制呢？
<script>、<img>、<iframe>、<link>这些包含 src 属性的标签可以加载跨域资源。但浏览器限制了JavaScript的权限使其不能读、写加载的内容。

跨域技术：
CORS、图像Ping、jsonp、iframe、comet、服务器发送事件、web sockets

跨域资源共享（CORS）是一种网络浏览器的技术规范，它为Web服务器定义了一种方式，允许网页从不同的域访问其资源。
在请求中附加一个额外的origin头部，其中包含请求页面的源信息(协议、域名、端口号)

图像ping

概念：利用<img>标签没有域的限制特性，在img的src中传递参数。
图像ping是单向的跨域通信方式，浏览器只能得到一个响应状态，得不到任何参数、数据，通过监听img的load事件和error事件，判断什么时候收到响应

var img=new Image();
img.src="http://baidu.com/test?name=wang";
img.onload=img.onerror=function(){
		alert("收到");
}

jsonp

jsonp利用script标签没有域的限制特性，在script是src中添加参数，与图像ping类似，但是它有返回的数据、回调函数。
jsonp请求由两部分组成：参数+回调函数名。http://baidu.com/test?参数1=参数1的值&callback=回调函数名
jsonp返回由两部分组成；回调函数+数据

请求端：

	var script = document.createElement('script');
script.type = 'text/javascript';
// 传参并指定回调执行函数为onBack
script.src = 'http://www.....:8080/login?user=admin&callback=onBack';
document.head.appendChild(script);
// 回调函数
function onBack(res) {//res是返回的数据
	alert(JSON.stringify(res));
}

iframe跨域

此方案仅限主域相同，子域不同的跨域应用场景。
使用document.getElementById('iframe的id').contentWindow获取iframe中的window对象
使用window.parent.父页面中变量可以获取父页面中变量s

  此方案仅限主域相同，子域不同的跨域应用场景。
    1.父窗口：(http://www.domain.com/a.html)
  <iframe id="iframe" src="http://child.domain.com/b.html"></iframe>
        <script>
            document.domain = 'domain.com';
            var user = 'admin';
        </script>
            2.子窗口：(http://child.domain.com/b.html)
            
      
  <script>
            document.domain = 'domain.com';
            // 获取父窗口中变量
            alert('get js data from parent ---> ' + window.parent.user);
</script>

CORS跨域资源共享(cross-irigin resourses sharing)

图像ping

jsonp

iframe跨域