同源策略和跨域訪問

一：什麼是同源策略

同源策略是瀏覽器上爲安全性考慮實施的很是重要的安全策略。

同源：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的跨域技術。

一、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不足：

1. 只能使用 GET 方法發起請求，不安全，這是因爲 script 標籤自身的限制決定的。
2. 不能很好的發現錯誤，並進行處理。與 Ajax 對比，因爲不是經過 XmlHttpRequest 進行傳輸，因此不能註冊 success、 error 等事件監聽函數。

二、使用 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的網站請求數據。

三、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那樣不作限制地執行外部腳本。

四、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請求。這個跨域方式下不須要和目標資源簽定協議，帶有侵略性。

五、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的話，這個方案就不可行了。

六、document.domain（兩個iframe之間）

經過修改document的domain屬性，咱們能夠在域和子域或者不一樣的子域之間通訊。同域策略認爲域和子域隸屬於不一樣的域，好比baidu.com和 youxi.baidu.com是不一樣的域，這時，咱們沒法在baidu.com下的頁面中調用youxi.baidu.com中定義的JavaScript方法。可是當咱們把它們document的domain屬性都修改成baidu.com，瀏覽器就會認爲它們處於同一個域下，那麼咱們就能夠互相獲取對方數據或者操做對方DOM了。

問題：

一、安全性，當一個站點被攻擊後，另外一個站點會引發安全漏洞。

二、若是一個頁面中引入多個iframe，要想可以操做全部iframe，必須都得設置相同domain。

七、使用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 (IE八、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是共享的。