摘要：于是乎同源策略應(yīng)運(yùn)而生主要限制在于和無(wú)法讀取。怎么繞過(guò)同源策略首先一般來(lái)說(shuō)協(xié)議和端口造成的跨域問(wèn)題大部分方法是沒(méi)有辦法繞過(guò)的。二級(jí)域名是寄存在主域名之下的域名。當(dāng)主域名受到懲罰二級(jí)域名也會(huì)連帶懲罰。

這是一道前端跨不過(guò)躲不掉面試必備的知識(shí),掙扎多年沒(méi)能做到刻骨銘心深入脊髓,只能好好寫(xiě)篇博文記錄起來(lái)了;

廣義來(lái)說(shuō),A域執(zhí)行的文檔腳本試圖去請(qǐng)求B域下的資源是不被允許的,源于瀏覽器的同源策略,所謂同源指的是協(xié)議,域名 (domain) ,端口都相同,例如下面四個(gè)URL就屬于不同源;
舉例URL： http://www.a.com(:80)/index.html
協(xié)議不同： https://www.a.com(:80)/index.html
域名不同： http://www.b.com(:80)/index.html
端口不同： http://www.a.com(:8080)/index.html

目的就是為了保證用戶信息的安全,阻止和減少通過(guò)惡意分子竊取數(shù)據(jù)(例如普遍的CSRF攻擊)。
首先同源策略也分兩種XmlHttpRequest同源策略和DOM同源策略,
我們常說(shuō)的同源策略一般是指XmlHttpRequest同源策略;

例如用戶登陸某個(gè)購(gòu)物平臺(tái);

用戶登陸www.shopping.com購(gòu)物頁(yè),用戶信息被保存在cookie中;

用戶被引導(dǎo)進(jìn)惡意詐騙頁(yè)面www.spite.com,執(zhí)行了當(dāng)中的惡意代碼請(qǐng)求www.shopping.com,默認(rèn)會(huì)發(fā)送對(duì)應(yīng)cookie信息;

www.shopping.com驗(yàn)證通過(guò),返回請(qǐng)求數(shù)據(jù),這時(shí)候相當(dāng)于賬戶信息和權(quán)限都在他人手中了

這一過(guò)程不為用戶所知道,這是屬于XmlHttpRequest同源策略,總的來(lái)說(shuō)就是禁止使用XHR對(duì)象向不同源的服務(wù)器地址發(fā)起HTTP請(qǐng)求。

至于DOM同源策略也是差不多道理

用戶被引導(dǎo)進(jìn)惡意詐騙頁(yè)面www.spite.com,它用iframe偽裝成www.shopping.com購(gòu)物頁(yè);

用戶登陸賬號(hào)密碼,惡意詐騙頁(yè)面就能拿用戶信息跨域訪問(wèn)www.shopping.com的DOM節(jié)點(diǎn);

這一過(guò)程不為用戶所知道,這是屬于DOM同源策略,總的來(lái)說(shuō)就是禁止對(duì)不同源頁(yè)面DOM進(jìn)行操作。

于是乎同源策略應(yīng)運(yùn)而生,主要限制在于

Cookie、LocalStorage 和 IndexDB 無(wú)法讀取。

DOM 無(wú)法獲得。

AJAX 請(qǐng)求不能發(fā)送。

需要注意的是同源策略只對(duì)網(wǎng)頁(yè)的HTML文檔做了限制,對(duì)加載的其他靜態(tài)資源如javascript、css、圖片等仍然認(rèn)為屬于同源。

既然同源策略存在的重要性不言而喻,為什么我們需要嘗試?yán)@過(guò)這道坎？
例如銀行的安全性夠高了吧,相對(duì)應(yīng)的限制性也是極高的,同理可得安全往往也是犧牲了部分靈活自由的。今時(shí)今日的互聯(lián)網(wǎng)人流量,如果大型網(wǎng)站全部文件都只能訪問(wèn)指定一臺(tái)服務(wù)器,根本不可能,也絕對(duì)支撐不起雙十一的電商網(wǎng)站用戶流量;于是在遵循同源策略的基礎(chǔ)下,瀏覽器也適當(dāng)?shù)亟o開(kāi)發(fā)者留下一些“密道”。

首先,一般來(lái)說(shuō)協(xié)議和端口造成的跨域問(wèn)題大部分方法是沒(méi)有辦法繞過(guò)的。

然后我們認(rèn)識(shí)一下強(qiáng)大的跨域神器

IFrame 對(duì)象代表一個(gè) HTML 的內(nèi)聯(lián)框架,由于它是獨(dú)立的頁(yè)面,因而擁有自己的事件,擁有自己的窗口對(duì)象(contentWindow);

很多時(shí)候我們想要繞過(guò)同源策略都得經(jīng)過(guò)iframe對(duì)象其他窗口對(duì)象

這個(gè)方法實(shí)現(xiàn)前提：這兩個(gè)域名必須屬于同一個(gè)基礎(chǔ)域名,即主域相同,子域可以不同;

document.domain 默認(rèn)的值是整個(gè)域名,所以即使兩個(gè)域名的二級(jí)域名一樣,那么他們的 document.domain 也不一樣。通過(guò)把兩個(gè)頁(yè)面的document.domain都設(shè)置成相同域名(只能設(shè)置成自身或者更高一級(jí)的父域,且主域必須相同),兩個(gè)頁(yè)面之間可以獲取window對(duì)象,和下圖部分屬性和方法;

二級(jí)域名SLD(Second-level domain):是互聯(lián)網(wǎng)DNS等級(jí)之中,處于頂級(jí)域名之下的域。二級(jí)域名是域名的倒數(shù)第二個(gè)部分,二級(jí)域名就是主域名分出來(lái)的域名。

二級(jí)域名是寄存在主域名之下的域名。

二級(jí)域名屬于一個(gè)獨(dú)立的分支,他有自己的收錄、快照、PR值、反鏈等。

當(dāng)主域名受到懲罰,二級(jí)域名也會(huì)連帶懲罰。

以此為例,我們有域名劃分為：

.com 頂級(jí)域名
example.com 一級(jí)域名
A.example.com 二級(jí)域名
B.example.com 二級(jí)域名

document.domain = "example.com";

一般使用不建議直接頁(yè)面插入iframe,所以我們可以自己封裝方法使用

function createIframe(url, id, callback) {
  var iframe = document.createElement("iframe");
  iframe.id = id || "iframe";
  iframe.src = url;
  iframe.style.display = "none";
  iframe.onload = function() {
    //this指向
    callback && callback.call(iframe);
  };
  document.body.appendChild(iframe);
}

也可以在服務(wù)器通過(guò)設(shè)置Set-Cookie,讓客戶端下?lián)碛邢嗤赣蛳滤凶佑蛎蚕韈ookie;

在一個(gè)窗口 (window) 的生命周期內(nèi),窗口載入的所有的頁(yè)面都是共享一個(gè) window.name 的,每個(gè)頁(yè)面對(duì) window.name 都有讀寫(xiě)的權(quán)限,window.name 是持久存在一個(gè)窗口載入過(guò)的所有頁(yè)面中的,并不會(huì)因新頁(yè)面的載入而進(jìn)行重置。換成人話就是在同一個(gè)窗口打開(kāi)的所有頁(yè)面即使不同域名不同頁(yè)面它們也會(huì)共享同一個(gè)name值(包括跳轉(zhuǎn),iframe等都屬于并且可以支持非常長(zhǎng)的 name 值2MB視瀏覽器而定)

與 document.domain 方法相比,放寬了域名后綴要相同的限制,可以從任意頁(yè)面獲取 string 類型的數(shù)據(jù)。

例如下面會(huì)跳到百度,然后進(jìn)入打印window.name依然能拿到設(shè)置的字符串

window.name = "123";
window.location.;

上面的例子應(yīng)該能起到一個(gè)拋磚引玉的作用了,接下來(lái)說(shuō)所怎么通過(guò)window.name進(jìn)行跨域;
條件,分別需要三個(gè)頁(yè)面http://www.A.com/index.html,http://www.B.com/data.php,http://www.A.com/data.html,注意是否同源;

index.html通過(guò)動(dòng)態(tài)創(chuàng)建一個(gè)iframe作為中間的橋梁,然后src屬性指向遠(yuǎn)端服務(wù)器data.php發(fā)起請(qǐng)求;

data.php設(shè)置name,因?yàn)椴荒芸缬虿僮鱪ame值,所以只能再次重定向回同源頁(yè)面data.html;

同源頁(yè)面data.html可以直接獲取數(shù)據(jù),index.html也可以無(wú)障礙操作iframe,拿到name值后立馬移除iframe保證安全;

function createIframe(url, id, callback) {
  var iframe = document.createElement("iframe");
  iframe.id = id || "iframe";
  iframe.status = true;
  iframe.src = url;
  iframe.style.display = "none";
  iframe.onload = function() {
    //this指向
    callback && callback.call(iframe);
  };
  document.body.appendChild(iframe);
}

createIframe("http://www.B.com/data.php", null, function() {
  //防止一直重定向
  if (this.status) {
    //跨域頁(yè)面都沒(méi)有讀寫(xiě)權(quán)限,需要跳回同源頁(yè)面操作
    iframe.status = false;
    this.contentWindow.location = "http://www.A.com/data.html";
  } else {
    alert(JSON.parse(this.contentWindow.name));
    //釋放內(nèi)存,移除iframe
    this.contentWindow.document.write("");
    this.contentWindow.close();
    document.body.removeChild(this);
  }
});

 window.name = "{"name":"data"}"; "
?>

這個(gè)方法實(shí)現(xiàn)前提有兩個(gè)：

利用url改變hash(URL 的錨部分,從 # 號(hào)開(kāi)始的部分)并不會(huì)導(dǎo)致頁(yè)面刷新;

HTML 5新增的事件onhashchange,當(dāng)#值發(fā)生變化時(shí),就會(huì)觸發(fā)這個(gè)事件;

HTTP請(qǐng)求過(guò)程中不會(huì)攜帶hash,所以這部分的修改不會(huì)產(chǎn)生HTTP請(qǐng)求,只有轉(zhuǎn)碼瀏覽器才會(huì)將其作為實(shí)義字符處理;

#后面出現(xiàn)的任何字符,都會(huì)被瀏覽器解讀為位置標(biāo)識(shí)符,瀏覽器只會(huì)滾動(dòng)到相應(yīng)位置,不會(huì)重新加載網(wǎng)頁(yè)。

每次修改都會(huì)產(chǎn)生瀏覽器歷史記錄;

有些瀏覽器不支持onhashchange事件,需要輪詢來(lái)獲知URL的改變;

數(shù)據(jù)直接暴露在了url中

過(guò)程繁瑣,起碼我認(rèn)為是

條件,分別需要三個(gè)頁(yè)面http://www.A.com/A.html,http://www.B.com/B.html,http://www.A.com/C.html,注意是否同源;

A.html下創(chuàng)建iframe打開(kāi)B.html,聲明回調(diào)方法備用,并且修改hash;

B.html下創(chuàng)建iframe打開(kāi)C.html, 監(jiān)聽(tīng)onhashchange事件改變hash;

C.html下監(jiān)聽(tīng)onhashchange事件,因?yàn)楦鶤.html同源可以往上層追蹤觸發(fā)到A.html的回調(diào)方法

function createIframe(url, id, callback) {
  var iframe = document.createElement("iframe");
  iframe.id = id || "iframe";
  iframe.src = url;
  iframe.style.display = "none";
  iframe.onload = function() {
    //this指向
    callback && callback.call(iframe);
  };
  document.body.appendChild(iframe);
}

createIframe("http://www.B.com/B.html", null, function() {
  var self = this;
  setTimeout(function() {
    self.src = self.src + "#name=123";
  }, 1000);
});

window.onCallback = function(res) {
  console.log("I got it!!", res);
};

function createIframe(url, id, callback) {
  var iframe = document.createElement("iframe");
  iframe.id = id || "iframe";
  iframe.src = url;
  iframe.style.display = "none";
  iframe.onload = function() {
    //this指向
    callback && callback.call(iframe);
  };
  document.body.appendChild(iframe);
}

createIframe("http://www.A.com/C.html");

var iframe = document.getElementById("iframe");
window.onhashchange = function() {
  iframe.src = iframe.src + location.hash;
};

window.onhashchange = function() {
  window.parent.parent.onCallback(
    "hello: " + location.hash.replace("#name=", "")
  );
};

postMessage是HTML5 XMLHttpRequest Level 2中的API,可以安全地實(shí)現(xiàn)跨源通信。

基本支持主流瀏覽器和IE8+,支持任意基本類型或可復(fù)制的對(duì)象;

真正的跨域方法,包括協(xié)議和端口不同都可以實(shí)現(xiàn);

一般來(lái)說(shuō)參數(shù) message 被使用結(jié)構(gòu)化克隆算法進(jìn)行序列化。這意味著您可以將各種各樣的數(shù)據(jù)對(duì)象安全地傳遞到目標(biāo)窗口,而不必自己序列化它們,但部分瀏覽器只支持字符串,所以傳參非字符串最好用JSON.stringify()序列化。

先看看用法

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

function createIframe(url, id, callback) {
  var iframe = document.createElement("iframe");
  iframe.id = id || "iframe";
  iframe.src = url;
  iframe.style.display = "none";
  iframe.onload = function() {
    //this指向
    callback && callback.call(iframe);
  };
  document.body.appendChild(iframe);
}

createIframe("http://www.B.com/data.html", null, function() {
  var data = {
    name: "123",
  };
  this.contentWindow.postMessage(JSON.stringify(data), "http://www.B.com");
});

window.addEventListener(
  "message",
  function(e) {
    console.log(e.data);
  },
  false
);

window.addEventListener(
  "message",
  function(e) {
    console.log(JSON.parse(e.data));
    window.parent.postMessage("I got it!", "http://www.A.com/");
  },
  false
);

在這里出于本地調(diào)試原因,所以沒(méi)有驗(yàn)證過(guò)信息,實(shí)際使用中務(wù)必使用origin和source屬性驗(yàn)證發(fā)件人的身份,targetOrigin設(shè)置可信任的網(wǎng)站。
有興趣的可以在本地打開(kāi)兩個(gè)頁(yè)面通信,targetOrigin設(shè)為*就可以了,然后得到下圖的對(duì)象

這個(gè)方法實(shí)現(xiàn)前提有兩個(gè)：

還記得上面提過(guò)的同源策略只對(duì)網(wǎng)頁(yè)的HTML文檔做了限制,對(duì)加載的其他靜態(tài)資源如javascript、css、圖片等仍然認(rèn)為屬于同源。

JSON的誕生：

指的是 JavaScript 對(duì)象表示法(JavaScript Object Notation)

是輕量級(jí)的文本數(shù)據(jù)交換格式

獨(dú)立于語(yǔ)言：JSON 使用 Javascript語(yǔ)法來(lái)描述數(shù)據(jù)對(duì)象,但是 JSON 仍然獨(dú)立于語(yǔ)言和平臺(tái)。JSON 解析器和 JSON 庫(kù)支持許多不同的編程語(yǔ)言。 目前非常多的動(dòng)態(tài)(PHP,JSP,.NET)編程語(yǔ)言都支持JSON。

具有自我描述性,更易理解

因?yàn)閟cript標(biāo)簽引入的文件內(nèi)容是不能夠被客戶端的js獲取到的(實(shí)際上凡是擁有"src"這個(gè)屬性的標(biāo)簽都擁有跨域的能力),不會(huì)影響到被引用文件的安全,所以通過(guò)script標(biāo)簽引入的js是不受同源策略的限制的。而通過(guò)ajax加載的文件內(nèi)容是能夠被客戶端js獲取到的,所以ajax必須遵循同源策略,否則被引入文件的內(nèi)容會(huì)泄漏或者存在其他風(fēng)險(xiǎn);

它的兼容性更好,在更加古老的瀏覽器中都可以運(yùn)行,不需要XMLHttpRequest或ActiveX的支持;

JSON的純字符數(shù)據(jù)格式可以簡(jiǎn)潔的描述復(fù)雜數(shù)據(jù),易于處理這種格式的數(shù)據(jù);

不需要多余的中轉(zhuǎn)操作;

一旦開(kāi)始沒(méi)法取消停止,沒(méi)法重新開(kāi)始,也沒(méi)法捕捉錯(cuò)誤;

JSONP是一種腳本注入(Script Injection)行為,所以有一定的安全隱患;

只能用GET請(qǐng)求;

在客戶端先聲明回調(diào)函數(shù)例如callbackName,然后插入一個(gè)script標(biāo)簽指向請(qǐng)求地址同時(shí)傳入回調(diào)函數(shù)名字進(jìn)行跨域請(qǐng)求數(shù)據(jù);

服務(wù)端接收到之后生成json數(shù)據(jù),然后以入?yún)⒌姆绞椒胖玫揭粋€(gè)函數(shù)名為callbackName的function,再把這段js文檔返回給客戶端;

瀏覽器解析script標(biāo)簽,并執(zhí)行返回的javascript文檔,此時(shí)數(shù)據(jù)作為參數(shù),執(zhí)行客戶端預(yù)先聲明好的回調(diào)函數(shù);

//必須聲明在請(qǐng)求之前
function callbacnName(res) {
  //doSometing
}

function createScript(url, callbackName) {
  var script = document.create("script");
  script.type = "text/javascript";
  script.src = url + "?callback=" + callbackName;
  document.head.appendChild(script);
}

createScript("http://www.A.com/xxx.php", callbacnName);

整個(gè)過(guò)程就像前端發(fā)個(gè)信息給后臺(tái)說(shuō)麻煩返回一個(gè)這種格式的js代碼給我,然后后臺(tái)返回瀏覽器解析執(zhí)行了這段代碼

callbackName({
  xx: "xxx",
});

在jQuery里用法如下

//實(shí)際請(qǐng)求的url地址會(huì)變成http://www.A.com/xxx.php?callback=callbackName
$.ajax({
  url: "http://www.A.com/xxx.php",
  type: "GET",
  dataType: "jsonp",
  jsonp: "callback", //傳遞給請(qǐng)求處理程序或頁(yè)面的,用以獲得jsonp回調(diào)函數(shù)名的參數(shù)名(默認(rèn)為:callback)
  jsonpCallback: "callbackName", //自定義的jsonp回調(diào)函數(shù)名稱,默認(rèn)為jQuery自動(dòng)生成的隨機(jī)函數(shù)名
  success: function(res) {
    //doSometing
  },
});

跨域資源共享標(biāo)準(zhǔn)新增了一組 HTTP 首部字段,允許服務(wù)器聲明哪些源站有權(quán)限訪問(wèn)哪些資源。另外,規(guī)范要求,對(duì)那些可能對(duì)服務(wù)器數(shù)據(jù)產(chǎn)生副作用的 HTTP 請(qǐng)求方法(特別是 GET 以外的 HTTP 請(qǐng)求,或者搭配某些 MIME 類型的 POST 請(qǐng)求),瀏覽器必須首先使用 OPTIONS 方法發(fā)起一個(gè)預(yù)檢請(qǐng)求(preflight request),從而獲知服務(wù)端是否允許該跨域請(qǐng)求。服務(wù)器確認(rèn)允許之后,才發(fā)起實(shí)際的 HTTP 請(qǐng)求。在預(yù)檢請(qǐng)求的返回中,服務(wù)器端也可以通知客戶端,是否需要攜帶身份憑證(包括 Cookies 和 HTTP 認(rèn)證相關(guān)數(shù)據(jù))

CORS支持所有類型的HTTP請(qǐng)求;

CORS使用普通的XMLHttpRequest發(fā)起請(qǐng)求和獲得數(shù)據(jù),可以捕捉到錯(cuò)誤處理;

所有瀏覽器都支持CORS,IE瀏覽器不得低于10(IE8/9需要使用XDomainRequest對(duì)象來(lái)支持CORS);

因?yàn)闉g覽器基本支持,前端代碼差別不大,主要實(shí)現(xiàn)細(xì)節(jié)都在瀏覽器和服務(wù)器,想要了解更多細(xì)節(jié),請(qǐng)看
阮一峰老師的跨域資源共享 CORS 詳解
網(wǎng)上參考的利用CORS實(shí)現(xiàn)跨域請(qǐng)求
很詳細(xì)的文章HTTP訪問(wèn)控制(CORS)

因?yàn)榈诙恼碌膶?shí)例寫(xiě)的比我好多了,主要是做好兼容跟容錯(cuò),我就放出他的代碼好了,請(qǐng)?jiān)试S我偷個(gè)懶

function createCORSRequest(method, url) {
  var xhr = new XMLHttpRequest();
  if ("withCredentials" in xhr) {
    // 針對(duì)Chrome/Safari/Firefox.
    xhr.open(method, url, true);
  } else if (typeof XDomainRequest != "undefined") {
    // 針對(duì)IE
    xhr = new XDomainRequest();
    xhr.open(method, url);
  } else {
    // 不支持CORS
    xhr = null;
  }
  return xhr;
}

// 輔助函數(shù),用于解析返回的內(nèi)容
function getTitle(text) {
  return text.match("")[1];
}

// 發(fā)送CORS請(qǐng)求
function makeCorsRequest() {
  // bibliographica.org是支持CORS的
  var url = "http://bibliographica.org/";

  var xhr = createCORSRequest("GET", url);
  if (!xhr) {
    alert("CORS not supported");
    return;
  }

  // 回應(yīng)處理
  xhr.onload = function() {
    var text = xhr.responseText;
    var title = getTitle(text);
    alert("Response from CORS request to " + url + ": " + title);
  };

  xhr.onerror = function() {
    alert("Woops, there was an error making the request.");
  };

  xhr.send();
}