循序漸進Python3（十一） --6-- Ajax 實現跨域請求 jsonp 和 cors

標籤：get   動態建立   存在   列表   發展   over   span   get請求   參數調用   

 Ajax操作如何?跨域請求？       　　Ajax (XMLHttpRequest)請求受到同源策略的限制。      　　Ajax通過XMLHttpRequest能夠與遠端伺服器進行資訊互動，另外XMLHttpRequest是一個純粹的Javascript對象，這樣的互動過程，是在後台進行的，使用者不易察覺。      因此，XMLHTTP實際上已經突破了原有的Javascript的安全限制。   舉個例子：        　假設某網站引用了其它網站的javascript，這個網站被入侵併在javascript中加入擷取使用者輸入並通過ajax提交給其他網站，這樣就可以源源不斷收集資訊。           或者某網站因為存在漏洞導致XSS注入了javascript指令碼，這個指令碼就可以通過ajax擷取使用者資訊並通過ajax提交給其他網站，這樣就可以源源不斷收集資訊。          如果我們又想利用XMLHTTP的無重新整理非同步互動能力，又不願意公然突破Javascript的安全性原則，可以選擇的方案就是給XMLHTTP加上嚴格的同源限制。          這樣的安全性原則，很類似於Applet的安全性原則。IFrame的限制還僅僅是不能訪問跨域HTMLDOM中的資料，而XMLHTTP則根本上限制了跨域請求的提交。（實際上下面提到了CORS已經放寬了限制）          隨著Ajax技術和網路服務的發展，對跨域的要求也越來越強烈。下面介紹Ajax的跨域技術。  （1）JSONP  （JSON with Padding）       JSONP（JSONP是JSON的一種“使用模式”)，利用script標籤的src屬性（瀏覽器允許script標籤跨域）。我們知道<script>標籤可以載入跨域的javascript指令碼，並且被載入的指令碼和當前文檔屬於同一個域。因此在文檔中可以調用/訪問指令碼中的資料和函數。如果javascript指令碼中的資料是動態產生的，那麼只要在文檔中動態建立<script>標籤就可以實現和服務端的資料互動。       JSONP就是利用<script>標籤的跨域能力實現跨域資料的訪問，請求動態產生的JavaScript指令碼同時帶一個callback函數名作為參數。其中callback函數本地文檔的JavaScript函數，伺服器端動態產生的指令碼會產生資料，並在代碼中以產生的資料為參數調用callback函數。當這段指令碼載入到本地文檔時，callback函數就被調用。
       這裡需要明確的一點是：所謂的域跟js的存放伺服器沒有關係，比如baidu.com的頁面載入了google.com的js，那麼此js的所在域是baidu.com而不是google.com。也就是說，此時該js能操作baidu.com的頁面對象，而不能操作google.com的頁面對象。
       如果還不太明白，這裡再詳細解釋一下：因為通過script標籤引入的js是不受同源策略的限制的（正如前文提到的baidu.com的頁面載入了google.com的js）。所以我們可以通過script標籤引入一個js或者是一個其他尾碼形式（如PHP，jsp等）的檔案，此檔案返回一個js函數的調用，如返回JSONP_getUsers(["paco","john","lili"])，也就是說此檔案返回的結果調用了JSONP_getUsers函數，並且把["paco","john","lili"]傳進去，這個["paco","john","lili"]是一個使用者列表。那麼如果此時我們的頁面中有一個JSONP_getUsers函數，那麼JSONP_getUsers就被調用到，並且傳入了使用者列表。此時就實現了在本域擷取其他域資料的功能，也就是跨域。 eg：//本域為baidu.com  <script>      function JSONP_getUsers(users){          console.dir(users);      }  </script>  //載入google.com的getUsers.php  <script src="http://www.google.com/getUsers.php">  需要google.com提供支援，getUsers.php代碼如下：<?php>      echo ‘JSONP_getUsers(["paco","john","lili"])‘;//返回一個js函數的調用  ?>             為什麼script標籤引入的檔案不受同源策略的限制？因為script標籤引入的檔案內容是不能夠被用戶端的js擷取到的，不會影響到被引用檔案的安全，所以沒必要使script標籤引入的檔案遵循瀏覽器的同源策略。而通過ajax載入的檔案內容是能夠被用戶端js擷取到的，所以ajax必須遵循同源策略，否則被引入檔案的內容會泄漏或者存在其他風險。  JSONP的缺點是：它只支援GET請求而不支援POST等其它類型的HTTP請求。不過， 一般get請求能完成所有功能。
             JSONP易於實現，但是也會存在一些安全隱患，如果第三方的指令碼隨意地執行，那麼它就可以篡改頁面內容，截獲敏感性資料。但是在受信任的雙方傳遞資料，JSONP是非常合適的選擇。可以看出來JSONP跨域一般用於擷取其他域的資料。

一般能夠用JSONP實現跨域就用JSONP實現，這也是前端用的最多的跨域方法。

   (2)CORS   (Cross origin resource sharing ，即：跨域資源共用)

　　　　通過在HTTP Header中加入擴充欄位，伺服器在相應網頁頭部加入欄位表示允許訪問的domain和HTTP method，用戶端檢查自己的域是否在允許清單中，決定是否處理響應。CORS協議提升了Ajax的跨域能力，但也增加了風險。一旦網站被注入指令碼或XSS攻擊，將非常方便的擷取使用者資訊並悄悄傳遞出去。
　　　　假設我們頁面或者應用已在 http://www.test1.com 上了，而我們打算從 http://www.test2.com 請求提取資料。一般情況下，如果我們直接使用 AJAX 來請求將會失敗，瀏覽器也會返回“源不匹配”的錯誤。
　　 　  利用 CORS，在 http://www.test2.com 上只需添加一個標題，就可以允許來自 http://www.test1.com 的請求，是我在PHP中的 hander() 設定，“*”號表示允許任何域向我們的服務端提交請求：
　　　　　   header(‘Access-Control-Allow-Origin:*‘);
也可以設定指定的網域名稱，如網域名稱 http://www.test2.com ，那麼就允許來自這個網域名稱的請求：
　　　　　　header(‘Access-Control-Allow-Origin:http://www.test2.com‘);

 

來自為知筆記(Wiz)

循序漸進Python3（十一） --6--  Ajax 實現跨域請求 jsonp 和 cors