一：什麼是同源策略
同源策略是瀏覽器上為安全性考慮實施的非常重要的安全策略。
同源：URL由協議、域名、埠和路徑組成，如果兩個URL的協議、域名和埠相同，則表示他們同源。
同源策略：瀏覽器的同源策略，限制了來自不同源的"document"或指令碼，對當前"document"讀取或設定某些屬性。從一個域上載入的指令碼不允許訪問另外一個域的文件屬性。
在瀏覽器中，<script>、<img>、<iframe>、<link>等標籤都可以載入跨域資源，而不受同源限制，但瀏覽器限制了JavaScript的許可權使其不能讀、寫載入的內容。
另外同源策略只對網頁的HTML文件做了限制，對載入的其他靜態資源如javascript、css、圖片等仍然認為屬於同源。
二：Ajax跨域
Ajax (XMLHttpRequest)請求受到同源策略的限制。Ajax通過XMLHttpRequest能夠與遠端的伺服器進行資訊互動，另外XMLHttpRequest是一個純粹的Javascript物件，這樣的互動過程，是在後臺進行的，使用者不易察覺。因此，XMLHTTP實際上已經突破了原有的Javascript的安全限制。
舉個例子：
假設某網站引用了其它站點的javascript，這個站點被compromise並在javascript中加入獲取使用者輸入並通過ajax提交給其他站點，這樣就可以源源不斷收集資訊。
或者某網站因為存在漏洞導致XSS注入了javascript指令碼，這個指令碼就可以通過ajax獲取使用者資訊並通過ajax提交給其他站點，這樣就可以源源不斷收集資訊。
如果我們又想利用XMLHTTP的無重新整理非同步互動能力，又不願意公然突破Javascript的安全策略，可以選擇的方案就是給XMLHTTP加上嚴格的同源限制。
這樣的安全策略，很類似於Applet的安全策略。IFrame的限制還僅僅是不能訪問跨域HTMLDOM中的資料，而XMLHTTP則根本上限制了跨域請求的提交。（實際上下面提到了CORS已經放寬了限制）
隨著Ajax技術和網路服務的發展，對跨域的要求也越來越強烈。下面介紹Ajax的跨域技術。
1、JSONP
JSONP技術實際和Ajax沒有關係。我們知道<script>標籤可以載入跨域的javascript指令碼，並且被載入的指令碼和當前文件屬於同一個域。因此在文件中可以呼叫/訪問指令碼中的資料和函式。如果javascript指令碼中的資料是動態生成的，那麼只要在文件中動態建立<script>標籤就可以實現和服務端的資料互動。
JSONP就是利用<script>標籤的跨域能力實現跨域資料的訪問，請求動態生成的JavaScript指令碼同時帶一個callback函式名作為引數。其中callback函式本地文件的JavaScript函式，伺服器端動態生成的指令碼會產生資料，並在程式碼中以產生的資料為引數呼叫callback函式。當這段指令碼載入到本地文件時，callback函式就被呼叫。
原理：通過script標籤引入的js不收同源策略的限制，而XmlHttpRequest 物件受到同源策略的影響，可以載入跨域伺服器上的指令碼，用 JSONP 獲取的不是 JSON 資料，而是可以直接執行的 JavaScript 語句。
jsonp包含兩個引數：回撥函式和資料。回撥函式是當響應到來時要放在當前頁面被呼叫的函式。資料就是傳入回撥函式中的json資料，也就是回撥函式的引數了。
a.使用 jQuery 整合的 $.ajax 實現 JSONP 跨域呼叫
下面的例子，我們將 伺服器 3000 上的請求頁面的 JavaScript 程式碼為：
1 // 回撥函式
2 function jsonpCallback(data) {
3 console.log("jsonpCallback: " + data.name)
4 }
5 $("#submit").click(function() {
6 var data = {
7 name: $("#name").val(),
8 id: $("#id").val()
9 };
10 $.ajax({
11 url: 'http://localhost:3001/ajax/deal',
12 data: data,
13 dataType: 'jsonp',
14 cache: false,
15 timeout: 5000,
16 // jsonp 欄位含義為伺服器通過什麼欄位獲取回撥函式的名稱
17 jsonp: 'callback',
18 // 宣告本地回撥函式的名稱，jquery 預設隨機生成一個函式名稱
19 jsonpCallback: 'jsonpCallback',
20 success: function(data) {
21 console.log("ajax success callback: " + data.name)
22 },
23 error: function(jqXHR, textStatus, errorThrown) {
24 console.log(textStatus + ' ' + errorThrown);
25 }
26 });
27 });
複製程式碼伺服器 3001 上對應的處理函式為：
1 app.get('/ajax/deal', function(req, res) {
2 console.log("server accept: ", req.query.name, req.query.id)
3 var data = "{" + "name:'" + req.query.name + " - server 3001 process'," + "id:'" + req.query.id + " - server 3001 process'" + "}"
4 var callback = req.query.callback //獲得請求端回撥函式
5 var jsonp = callback + '(' + data + ')'
6 console.log(jsonp)
7 res.send(jsonp)
8 res.end()
9 })
複製程式碼這裡一定要注意 data 中字串拼接，不能直接將 JSON 格式的 data 直接傳給回撥函式，否則會發生編譯錯誤： parsererror Error: jsonpCallback was not called。
b.使用 <script> 標籤原生實現 JSONP
經過上面的事件，你是不是覺得 JSONP 的實現和 Ajax 大同小異？
其實，由於實現的原理不同，由 JSONP 實現的跨域呼叫不是通過 XmlHttpRequset 物件，而是通過 script 標籤，所以在實現原理上，JSONP 和 Ajax 已經一點關係都沒有了。看上去形式相似只是由於 jQuery 對 JSONP 做了封裝和轉換。
比如在上面的例子中，我們假設要傳輸的資料 data 格式如下：
{
name: "chiaki",
id": "3001"
}
複製程式碼那麼資料是如何傳輸的呢？HTTP 請求頭的第一行如下：
GET /ajax/deal?callback=jsonpCallback&name=chiaki&id=3001&_=1473164876032 HTTP/1.1
複製程式碼可見，即使形式上是用 POST 傳輸一個 JSON 格式的資料，其實傳送請求時還是轉換成 GET 請求。
其實如果理解 JSONP 的原理的話就不難理解為什麼只能使用 GET 請求方法了。由於是通過 script 標籤進行請求，所以上述傳輸過程根本上是以下的形式：
<script src = 'http://localhost:3001/ajax/deal?callback=jsonpCallback&name=chiaki&id=3001&_=1473164876032'></script>
複製程式碼這樣從伺服器返回的程式碼就可以直接在這個 script 標籤中執行了。下面我們自己實現一個 JSONP：
伺服器 3000請求頁面的 JavaScript 程式碼中，只有回撥函式 jsonpCallback：
function jsonpCallback(data) {
console.log("jsonpCallback: "+data.name)
}
複製程式碼伺服器 3000請求頁面還包含一個 script 標籤：
<script src = 'http://localhost:3001/jsonServerResponse?jsonp=jsonpCallback'></script>
複製程式碼伺服器 3001上對應的處理函式：
app.get('/jsonServerResponse', function(req, res) {
var cb = req.query.jsonp //這裡得到請求頁面的回撥函式
console.log(cb)
//思考一下為什麼這裡要這樣寫
var data = 'var data = {' + 'name: $("#name").val() + " - server 3001 jsonp process",' + 'id: $("#id").val() + " - server 3001 jsonp process"' + '};'
var debug = 'console.log(data);' //列印var data="";
var callback = '$("#submit").click(function() {' + data + cb + '(data);' + debug + '});'
res.send(callback) //返回的是一個點選按鈕的事件
res.end()
})
複製程式碼與上面一樣，我們在所獲取的引數後面加上 “ - server 3001 jsonp process” 代表伺服器對資料的操作。從程式碼中我麼可以看到，處理函式除了根據引數做相應的處理，更多的也是進行字串的拼接。
JSONP不足：
- 只能使用 GET 方法發起請求，不安全，這是由於
script標籤自身的限制決定的。 - 不能很好的發現錯誤，並進行處理。與 Ajax 對比，由於不是通過 XmlHttpRequest 進行傳輸，所以不能註冊 success、 error 等事件監聽函式。
2、使用 CORS 實現跨域呼叫
原理：CORS的思想，就是使用自定義的HTTP頭部讓瀏覽器與伺服器進行溝通，從而決定請求或響應是應該成功，還是應該失敗。
Cross-Origin Resource Sharing（CORS）跨域資源共享是一份瀏覽器技術的規範，提供了 Web 服務從不同域傳來沙盒指令碼的方法，以避開瀏覽器的同源策略，是 JSONP 模式的現代版。與 JSONP 不同，CORS 除了 GET 要求方法以外也支援其他的 HTTP 請求。 CORS 一般用XMLHttpRequest，這種方式的錯誤處理比 JSONP 要來的好。另一方面，JSONP 可以在不支援 CORS 的老舊瀏覽器上運作。現代的瀏覽器都支援 CORS。
CORS與JSONP的使用目的相同，但是比JSONP更強大。
JSONP只支援GET請求，CORS支援所有型別的HTTP請求。JSONP的優勢在於支援老式瀏覽器，以及可以向不支援CORS的網站請求資料。
3、window.name
window 物件的name屬性是一個很特別的屬性，當該window的location變化，然後重新載入，它的name屬性可以依然保持不變。那麼我們可以在頁面 A中用iframe載入其他域的頁面B，而頁面B中用JavaScript把需要傳遞的資料賦值給window.name，iframe載入完成之後（iframe.onload），頁面A修改iframe的地址，將其變成同域的一個地址，然後就可以讀出iframe的window.name的值了（因為A中的window.name和iframe中的window.name互相獨立的，所以不能直接在A中獲取window.name，而要通過iframe獲取其window.name）。這個方式非常適合單向的資料請求，而且協議簡單、安全。不會像JSONP那樣不做限制地執行外部指令碼。
4、Proxy伺服器代理
在資料提供方沒有提供對JSONP協議或者window.name協議的支援，也沒有對其它域開放訪問許可權，我們可以通過server proxy的方式來抓取資料。例如當baidu.com域下的頁面需要請求google.com下的資原始檔getUsers.php時，直接傳送一個指向google.com/getUsers.php的Ajax請求肯定是會被瀏覽器阻止。這時，我們在Baidu.com下配一個代理，然後把Ajax請求繫結到這個代理路徑下，例如baidu.com/proxy/,然後這個代理髮送HTTP請求訪問google.com下的getUsers.php，跨域的HTTP請求是在伺服器端進行的（伺服器端沒有同源策略的限制），客戶端並沒有產生跨域的Ajax請求。這個跨域方式下不需要和目標資源簽訂協議，帶有侵略性。
5、flash URLLoader
flash有自己的一套安全策略，伺服器可以通過crossdomain.xml檔案來宣告能被哪些域的SWF檔案訪問，SWF也可以通過API來確定自身能被哪些域的SWF載入。當跨域訪問資源時，例如從域baidu.com請求域google.com上的資料，我們可以藉助flash來傳送HTTP請求。首先，修改域google.com上的crossdomain.xml(一般存放在根目錄，如果沒有需要手動建立) ，把baidu.com加入到白名單。其次，通過Flash URLLoader傳送HTTP請求，最後，通過Flash API把響應結果傳遞給JavaScript。Flash URLLoader是一種很普遍的跨域解決方案，不過需要支援iOS的話，這個方案就不可行了。
6、document.domain（兩個iframe之間）
通過修改document的domain屬性，我們可以在域和子域或者不同的子域之間通訊。同域策略認為域和子域隸屬於不同的域，比如baidu.com和 youxi.baidu.com是不同的域，這時，我們無法在baidu.com下的頁面中呼叫youxi.baidu.com中定義的JavaScript方法。但是當我們把它們document的domain屬性都修改為baidu.com，瀏覽器就會認為它們處於同一個域下，那麼我們就可以互相獲取對方資料或者操作對方DOM了。
問題：
1、安全性，當一個站點被攻擊後，另一個站點會引起安全漏洞。
2、如果一個頁面中引入多個iframe，要想能夠操作所有iframe，必須都得設定相同domain。
7、使用HTML5的postMessage方法（兩個iframe之間或者兩個頁面之間）
高階瀏覽器Internet Explorer 8+, chrome，Firefox , Opera 和 Safari 都將支援這個功能。這個功能主要包括接受資訊的"message"事件和傳送訊息的"postMessage"方法。比如baidu.com域的A頁面通過iframe嵌入了一個google.com域的B頁面，可以通過以下方法實現A和B的通訊
A頁面通過postMessage方法傳送訊息：
window.onload = function() {
var ifr = document.getElementById('ifr');
var targetOrigin = "http://www.google.com";
ifr.contentWindow.postMessage('hello world!', targetOrigin);
};
複製程式碼postMessage的使用方法：
otherWindow.postMessage(message, targetOrigin);
otherWindow: 指目標視窗，也就是給哪個window發訊息，是 window.frames 屬性的成員或者由 window.open 方法建立的視窗
message: 是要傳送的訊息，型別為 String、Object (IE8、9 不支援)
targetOrigin: 是限定訊息接收範圍，不限制請使用 '*'
B頁面通過message事件監聽並接受訊息:
var onmessage = function (event) {
var data = event.data;//訊息
var origin = event.origin;//訊息來源地址
var source = event.source;//源Window物件
if(origin=="http://www.baidu.com"){
console.log(data);//hello world!
}
};
if (typeof window.addEventListener != 'undefined') {
window.addEventListener('message', onmessage, false);
} else if (typeof window.attachEvent != 'undefined') {
//for ie
window.attachEvent('onmessage', onmessage);
}
複製程式碼三：Cookie 同源策略
Cookie中的同源只關注域名，忽略協議和埠。所以https://localhost:8080/和http://localhost:8081/的Cookie是共享的。