瀏覽器同源策略，及跨域解決方案

源由下面三個部分組成：

網域名稱埠

協議兩個 url ，只有這三個都相同的情況下，才可以稱為同源。

對比url

結果原因

不同源網域名稱不同

不同源協議不同

不同源埠不同

同源同網域名稱，同埠，同協議

瀏覽器的同源策略是一種安全功能，同源策略限制了從同乙個源載入的文件或指令碼如何與來自另乙個源的資源進行互動。這是乙個用於隔離潛在惡意檔案的重要安全機制。所以a.com下的js指令碼採用ajax讀取b.com裡面的檔案資料是會報錯的。

對於瀏覽器來說，除了dom、cookie、xmlhttprequest 會受到同源策略的限制外，瀏覽器載入的一些第三方外掛程式也有各自的同源策略。最常見的一些外掛程式如 flash ，有自己的控制策略。

所以，想要體驗下，同源策略限制，你就可以寫乙個ajax 請求，比如127.0.0.1:80 要請求127.0.0.1:8080 的 a.js ;

127.0.0.1:80 裡的index.html

然後就會報錯了，出現了同源策略限制了。

說的跨域，其實呢就是跨源。而跨域是乙個統稱，通過上面的我們知道了，因為同源策略，不同源之間，不能進行互動。那麼跨域就是解決不同源之間發起請求、請求資料、傳送資料、通訊等互動問題解決方法的統稱。

在瀏覽器中，

127.0.0.1:8080 index.js

function say()

到底什麼是jsonp 跨域呢？其實，jsonp 跟 json 兩者沒有什麼關係，也沒有什麼相似的地方，大家都知道json 是一種資料格式，而jsonp 之所以被稱為jsonp，我認為跟它發出請求後，一般得到的，都是json格式資料有關吧。

上面說過了，：

function say()
say();

當開啟127.0.0.1/index.html頁面時,然後是127.0.0.1:8080 index.php檔案：

<?php 
$data = array(
'name' => 'zdx',
'***' => 'man',
'age' => 18
);$callback = $_get['callback'];
echo $callback . '(' . json_encode($data) . ')';
?>

當訪問jsonp.html時，其中的而ie8 - ie9是通過xdr物件實現 cors 的。

基於xdr的index.html**如下：

注意：cors可以發起 get、post請求，但是傳送的請求，預設不會隨帶 cookie 一起傳送，也不會接受後端發過來的 cookie；要想隨帶cookie 一起傳送。

需要在127.0.0.1:8080 index.php新增header('access-control-allow-credentials:true');頭部，然後在127.0.0.1:80 index.html中var xhr = new xmlhttprequest();後面新增xhr.withcredentials = true;

同源策略認為域和子域屬於不同的域，如：

child1.a.com 與 a.com，

child1.a.com 與 child2.a.com，

***.child1.a.com 與 child1.a.com

兩兩不同源，可以通過設定 document.domain='a.com'，瀏覽器就會認為它們都是同乙個源。想要實現以上任意兩個頁面之間的通訊，兩個頁面必須都設定documen.damain='a.com'。

此方式的特點：

只能在父網域名稱與子網域名稱之間使用，且將 ***.child1.a.com網域名稱設定為a.com後，不能再設定成child1.a.com。

存在安全性問題，當乙個站點被攻擊後，另乙個站點會引起安全漏洞。

這種方法只適用於 cookie 和 iframe 視窗。

下面來模擬一下，在a.com 與 child1.a.com 之間通訊。如果要在本機測試，請自行更改host 等，訪問的都是本機80埠，這裡就不在累述了。

a.com index.html

child1.a.com index.php

<?php 
echo "我是document.domain 降域過來的！";
?>

child1.a.com index1.html

注意：此方法可以發起 get、post 請求，發起的請求不會隨帶 cookie 一起傳送，也不能接受後端發過來的 cookie這是html5 新加的方法。

這個方法允許乙個頁面的指令碼傳送資料到另乙個頁面的指令碼中，不管指令碼是否跨域。在乙個window物件上呼叫postmessage()會非同步的觸發window上的onmessage事件，然後觸發定義好的事件處理方法。乙個頁面上的指令碼仍然不能直接訪問另外乙個頁面上的方法或者變數，但是他們可以安全的通過訊息傳遞技術交流。

比如說父頁面為127.0.0.1:80 的頁面，傳送資料給 127.0.0.1:8080 的子頁面：

127.0.0.1:80 index.html

127.0.0.1:8080 index.html

然後訪問：127.0.0.1:80/index.html，就得到想要的結果了，這方法通常用來進行兩個視窗通訊。

現代瀏覽器允許指令碼直連乙個websocket位址而不管同源策略。然而，使用websocket uri的時候，在請求中插入origin頭就可以標識指令碼請求的源。為了確保跨站安全，websocket伺服器必須根據允許接受請求的白名單中的源列表比較頭資料。

這個因為需要後端的支援，而且比較複雜，這裡就不舉例子了，感興趣的可以去查閱資料。

這裡貼乙個阮老師的websocket教程吧：websocket 教程

window物件有乙個name屬性，該屬性有乙個特徵：即在乙個視窗的生命週期內，視窗載入的所有的頁面都是共享乙個window.name的，每乙個頁面對window.name都有讀寫的許可權，window.name是持久的存在於乙個視窗載入的所有頁面中的，並不會因為新的頁面的載入而被重置。

因此，就可以利用此特性，進行跨域通訊。

127.0.0.1:80 index.html

127.0.0.1:8080 index.html

這時，訪問127.0.0.1:80/index.html，跳轉到的127.0.0.1:8080/index.html就能接受傳過來的資料了。

原理是利用location.hash來進行傳值。在url：中的『#helloworld』就是location.hash。

127.0.0.1:80 index.html

127.0.0.1:8080 index.html

這時，訪問127.0.0.1:80/index.html，跳轉到的127.0.0.1:8080/index.html就能接受傳過來的資料了。

這個完全是後端的實現，我就不說了，我也搞不懂，也沒意義。哈哈。

這裡說的還是皮毛，這些跨域方案只是工具，怎麼利用，就看你了。

瀏覽器同源策略，及跨域解決方案

同源策略跨域解決方案

瀏覽器跨域解決方案

跨域問題瀏覽器同源策略及原因

瀏覽器同源策略，及跨域解決方案

同源策略 跨域解決方案

瀏覽器跨域解決方案

跨域問題 瀏覽器同源策略及原因

相關推薦

同源策略跨域解決方案

跨域問題瀏覽器同源策略及原因