关于跨域简单总结

摘要：开发者需要在中设置属性为跨域是的简称这是一种利用浏览器漏洞解决跨域的办法脚本元素可以不受浏览器同源策略的限制。

同源是指,域名,协议,端口号均相同,如图:

注意:localhost和127.0.0.1虽然都指向本机,但也是跨域.

浏览器同源策略(same-origin policy).简单的讲,同源策略就是浏览器为了保证用户安全,防止恶意的网站盗取数据,禁止不同域之间的JS进行交互.会限制如下行为:

Cookie,LocalStorage 和indexDB无法读取.

DOM无法获取.

AJAX请求不能发送.

CORS是跨域资源共享(Crocss-Origin Resource Sharing)的缩写.是W3C标准.跨域资源共享机制允许Web应用服务器进行跨域访问控制,从而使跨域传输得以安全进行.对于这个方式阮一峰老师有一篇文章专门讲这个的,跨域资源共享CORS详解可供参考.还有就是MDN里有关于HTTP访问控制的文档.HTTP访问控制CORS

简单的说就是:

请求方在头信息中多一个Origin字段来说明本次请求来自哪个源.(协议+域名+端口)
服务器响应头信息中会多几个字段

Access-Control-Allow-Origin

该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求.

Access-Control-Allow-Credentials

该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可.

Access-Control-Expose-Headers

该字段可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。上面的例子指定，getResponseHeader("FooBar")可以返回FooBar字段的值。

开发者需要在AJAX中设置withCredentials属性为true.

JSONP是JSON with Padding的简称.这是一种利用浏览器漏洞解决跨域的办法.HTML脚本元素可以不受浏览器同源策略的限制。即我们请求HTML、CSS、JS文件时浏览器不会做限制。所以运用这个特点，通过加载外部js文件的方式来向其他资源发出http请求。正是因为是请求文件,所以JOSNP只能GET,不能POST.简单来说,JSONP方案就是页面动态创建一个script标签.

//b页面

页面与嵌套的iframe消息

//a页面

var iframe = document.getElementsByTagName("iframe")[0];
window.onMessage = function(event) {
    if(event.source == iframe.contentWindow) {}   //嵌套iframe除了origin外还可以比较用source
}

//iframe页面
window.parent.postMessage(data, target)
window.addEventListener("message",function(e){
    if(e.source!=window.parent) return;     //子页面可以通过此方法判断是否是父页面的消息
    window.parent.postMessage("data","*");
},false);

多窗口之间消息传递不是指我用浏览器分别打开了两个页面，就能互相通信了。需要一个otherWindow，一个其他窗口的引用 window.postMessage

语法 ——> otherWindow.postMessage(message, targetOrigin, [transfer]);
otherWindow ——> 其他窗口的一个引用，比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。
message ——> 将要发送到其他 window的数据
targetOrigin——> 通过窗口的origin属性来指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示无限制）或者一个URI。

iframe跨域也是利用浏览器中带有src的标签可以跨域访问.凡是拥有src属性的标签都有跨域的能力.例如:

子窗口(http://script.a.com/b.html)

这样就能在子窗口获取父窗口里的数据了.

1、安全性，当一个站点（b.a.com）被攻击后，另一个站点（c.a.com）会引起安全漏洞。
2、如果一个页面中引入多个iframe，要想能够操作所有iframe，必须都得设置相同domain。

对于主域不同的情形,可用location.hash 和window.name解决.

原理是利用location.hash来进行传值。在url： http://a.com#segmentfault中的‘#segmentfault’就是location.hash，改变hash并不会导致页面刷新，所以可以利用hash值来进行数据传递，当然数据容量是有限的。假设域名a.com下的文件test1.html要和b.com域名下的test2.html传递信息，test1.html首先创建自动创建一个隐藏的iframe，iframe的src指向b.com域名下的test2.html页面，这时的hash值可以做参数传递用。test2.html响应请求后再将通过修改test1.html的hash值来传递数据（由于两个页面不在同一个域下IE、Chrome不允许修改parent.location.hash的值，所以要借助于a.com域名下的一个代理iframe；Firefox可以修改）。同时在test1.html上加一个定时器，隔一段时间来判断location.hash的值有没有变化，一点有变化则获取获取hash值。

a.com下的test1.html

function startRequest(){
    var iframe = document.createElement("iframe");
    iframe.style.display = "none";
   iframe.src = "http://www.b.com/test2.html#paramdo";
    document.body.appendChild(iframe);
}

function checkHash() {
    try {
        var data = location.hash ? location.hash.substring(1) : "";
        if (console.log) {
            console.log("Now the data is "+data);
        }
    } catch(e) {};
}
setInterval(checkHash, 2000);

b.com域名下的test2.html

//模拟一个简单的参数处理操作
switch(location.hash){
    case "#paramdo":
        callBack();
        break;
    case "#paramset":
        //do something……
        break;
}

function callBack(){
    try {
        parent.location.hash = "somedata";
    } catch (e) {
        // ie、chrome的安全机制无法修改parent.location.hash，
        // 所以要利用一个中间的b.com域下的代理iframe
        var iframeproxy = document.createElement("iframe");
        iframeproxy.style.display = "none";
        iframeproxy.src = "http://a.com/test3.html#somedata"; 
        // 注意该文件在"a.com"域下
        document.body.appendChild(iframeproxy);
    }
}

a.com域名下的test3.html

//因为parent.parent和自身属于同一个域，所以可以改变其location.hash的值
parent.parent.location.hash = self.location.hash.substring(1);

缺点,暴露数据在url中.

对于主域不同的情形,可用location.hash 和window.name解决.

iframe的src属性由外域转向本地域，跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制，但同时它又是安全操作。

有三个页面:

a.com/test1.html :应用页面

a.com/proxy.html :代理页面,需要和应用页面在同一域下.

b.com/test2.html : 存放应用页面需要用到数据的页面(数据页面)

具体过程:

1) 应用页面创建一个iframe,src指向数据页面.数据页面会把数据附加到这个iframe的window.name上.

b.com/test2.html 代码

2) 在应用页面中监听iframe的onload事件,在事件中设置这个iframe的src指向本地域的代理文件(代理页面和应用页面在同一域下,可以相互通信.)
a.com/test1.html 代码

3) 获取数据以后销毁这个iframe,释放内存.这也保证了安全性.(不被其他域iframe 访问)

window.top方法可以访问最顶层的window对象，可以取到最顶层window对象的属性和方法。这样子框架就可以操作父页面的交互了。window.parent可以得到父框架的window对象。

1) a页面代码

2) b页面的代码

3) c页面代码

cookie除了有exprise这个属性之后还有path这个属性，这个属性是用来设置可访问到cookie的路径的，默认的是在当前cookie页面的子目录下是可以访问到的，但是默认的情况下我们是无法再其他父目录下面访问到这个cookie，这个时候我们就可以通过设置cookie来实现这个功能

如上面所说，但是在跨域之间的传值要怎样实现呢，其实cookie除了有path，还存在domain，domain这个属性是可以实现跨域的，但是必须保证这两个域名有公共部分，何为公共部分？就是像www.qq.com和www.sport.qq.com 这样都有相同的qq.com的域名，具体的使用方法是把domain设置为相同部分的域名，具体如下：

document.cookie = "name=value;expires=date;path=/;domain=qq.com"

另外在使用cookie的时候我们还需要注意的是cookie的编码问题，因为在cookie是不支持逗号、空格、分号的，所以在设置cookie的时候，需要使用escape()将输入的信息进行转码，然后在要调用的时候使用unescape()来重新转换回来.

WebSocket对象提供了用于创建和管理 WebSocket 连接，以及可以通过该连接发送和接收数据的 API。

WebSocket构造器方法接受一个必须的参数和一个可选的参数：

WebSocket WebSocket(in DOMString url, in optional DOMString protocols);
WebSocket WebSocket(in DOMString url,in optional DOMString[] protocols);

url :表示要连接的URL。这个URL应该为响应WebSocket的地址。
protocoles 可以是一个单个的协议名字字符串或者包含多个协议名字字符串的数组。这些字符串用来表示子协议，这样做可以让一个服务器实现多种WebSocket子协议（例如你可能希望通过制定不同的协议来处理不同类型的交互）。如果没有制定这个参数，它会默认设为一个空字符串。(可选)
构造器方法可能抛出以下异常：
SECURITY_ERR 试图连接的端口被屏蔽。

WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很好的实现。
原生WebSocket API使用起来不太方便，我们使用Socket.io，它很好地封装了webSocket接口，提供了更简单、灵活的接口，也对不支持webSocket的浏览器提供了向下兼容。具体可参阅前端常见跨域解决方案

H5新接口window.postMessage MDN
HTTP访问控制CORS MDN
跨域资源共享CORS详解
JavaScript跨域总结与解决办法
详解跨域(最全的解决方案)
浅谈几种跨域的方法
H5新接口webSocket MDN