1. 程式人生 > >跨域(一)

跨域(一)

lin ip add 完全 before 目前 請求 hand 跨域請求 安全策略

跨域源資源共享
通過XHR實現Ajax通信的一個主要限制,來源與跨域安全策略。默認情況下,xhr對象只能訪問與包含它的頁面位於同一個域中的資源。
實現合理的跨域請求對開發瀏覽器應用程序至關重要

CORS(Cross-Origin Resource Sharing,跨域源資源共享)
CORS背後的基本思想就是使用自定義的HTTP頭部讓瀏覽器與服務器進行狗從,從而決定請求或響應是否成功

//沒有自定義頭部,而主體內容是text/plain。在發送該請求時,附加一個額外的Origin頭部
Origin:http://www.nczonline.net
//如果服務器認為這個請求可以接受,就在Access-Control-Allow-Origin頭部中回發相同的源信息
Access-Control-Allow-Origin:http://www.nczonline.net

如果沒有這個頭部,或者這個頭部但源信息不匹配,瀏覽器就會駁回請求。正常情況下,瀏覽器會處理請求。
*:請求和響應都不包含cookie信息

跨瀏覽器的CORS
檢測xhr是否支持CORS的最簡單方式,就是檢查是否存在withCredentials屬性。再結合檢測XDomainRequest對象是否存在,就可以兼顧所有瀏覽器

function createCORSRequest(method,url){
    var xhr=new XMLHttpRequest();
    
// "withCredentials"屬性是XMLHTTPRequest2中獨有的 if("withCredentials" in xhr){ xhr.open(method, url, true); }else if(typeof XDomainRequest!=‘undefined‘){ // 檢測是否XDomainRequest可用 xhr =new XDomainRequest(); xhr.open(method,url); }else{ //othewise CORS is not supported by the browser
xhr=null; } return xhr; } var request = createCORSRequest("get", "http://182.254.146.112/demo.php"); if (request){ request.onload = function(){ console.log(request.responseText); //對 request.responseText 進行處理 }; request.send(); }

其他跨域技術-圖像ping
雖然CORS技術已經無處不在,但開發人員自己發明的這些技術仍然被廣泛使用,畢竟這樣不需要修改服務器代碼
我們知道,一個網頁可以從任何網頁中加載圖像,不用擔心跨域不跨域。
動態創建圖像經常用於圖像Ping。圖像Ping是與服務器進行簡單、單向的跨域通信的一種方式

var img = new Image();
img.onload = img.onerror = function(){
    alert(Done!);
}
img.src = ‘http://www.example.com/test?name=Nicholas‘;

圖像Ping最常用與跟蹤用戶點擊頁面或動態廣告曝光次數。圖像Ping兩個主要的缺點。一是只能發送get請求,二是無法訪問服務器的響應文本。
因此,圖像Ping只能用於瀏覽器與服務器間的單向通信

其他跨域技術-JSONP
JSONP看起來與JSON差不多,只不過是被包含在函數調用中的JSON,就像這樣

callback({ ‘name‘:‘Nicholas‘ })

JSONP由兩部分組成:回調函數和數據。回調函數是當響應到來時應該在頁面中調用的函數。回調函數的名字一般是在請求中指定的。而數據就是傳入
回調函數中的json數據。下面是一個典型的JSONP請求

http://freegeoip.net/json/?callback=handleResponse

JSONP是通過動態<script>元素來使用的。這裏的<script>跟<img>元素類似,都有能力不受限制地從其他域加載資源

function handleResponse(response){
    alert(‘you are at ip address ‘ + response.ip + response.city +     response.region_name);
}
var script = document.createElement(‘script‘);
script.src = ‘http://freegeoip.net/json/?callback=handleResponse‘;
document.body.insertBefore(script, document.body.firstChild);

JSONP之所以在開發人員中極為流行,主要原因是它非常簡單易用。與圖像Ping相比,它地優點在於能夠直接訪問響應文本,支持在瀏覽器與服務器之間雙向通信。
不過,JSONP也有兩點不足:
1、JSONP是從其他域中加載代碼執行。如果其它域不安全,很可能會在響應中夾帶一些惡意的代碼,而此時除了完全放棄JSONP調用之外,沒有辦法追究。因此,
一定要保證它安全可靠
2、要確定JSONP請求是否失敗並不容易。雖然給scrip元素新增了一個onerror事件處理程序,但目前還沒有得到任何瀏覽器的支持。

跨域(一)