Web瀏覽器跨域解決方案

Web瀏覽器跨域解決方案一、什么是跨域跨域（Cross-OriginResourceSharing，CORS）是一個安全機制，用于在Web瀏覽器中控制在一個源（domain）上的web頁面可以從另一個源獲取哪些資源。由于瀏覽器的同源策略（Same-OriginPolicy），默認情況下，一個網(wǎng)頁中的JavaScript腳本只能訪問與該網(wǎng)頁具有相同源的資源，而跨域則涉及到從一個源加載的web頁面去獲取另一個源的資源。這一策略對于JavaScript代碼能夠訪問的頁面內(nèi)容做了很重要的限制，即JavaScript只能訪問與包含它的文檔在同一域下的內(nèi)容。JavaScript這個安全策略在進行多iframe或多窗口編程、以及Ajax編程時顯得尤為重要。根據(jù)這個策略，在下的頁面中包含的JavaScript代碼，不能訪問在域名下的頁面內(nèi)容；甚至不同的子域名之間的頁面也不能通過JavaScript代碼互相訪問。對于Ajax的影響在于，通過XMLHttpRequest實現(xiàn)的Ajax請求，不能向不同的域提交請求，例如，在下的頁面，不能向提交Ajax請求，等等。為什么瀏覽器要實現(xiàn)同源限制?我們舉例說明:比如一個黑客,他利用iframe把真正的銀行登錄頁面嵌到他的頁面上,當你使用真實的用戶名和密碼登錄時,如果沒有同源限制,他的頁面就可以通過javascript讀取到你的表單中輸入的內(nèi)容,這樣用戶名和密碼就輕松到手了跨域的情況分為以下幾種：特別注意兩點：1、如果是協(xié)議和端口造成的跨域問題“前臺”是無能為力的2、在跨域問題上，域僅僅是通過“URL的首部”來識別而不會去嘗試判斷相同的ip地址對應著兩個域或兩個域是否在同一個ip上。比如上面的/a.js和4/b.js；雖然域名和域名的ip對應，不過還是被認為是跨域?！癠RL的首部”指tocol+window.location.host。其中，tocol：指含有URL第一部分的字符串,如http:

window.location.host：指包含有URL中主機名:端口號部分的字符串.如///server/二、常用的幾種跨域處理方法：

1、CORS（Cross-OriginResourceSharing）策略CORS是一個W3C標準，全稱是"跨域資源共享"（Cross-originresourcesharing）。它允許瀏覽器向跨源服務器，發(fā)出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。它為Web服務器定義了一種方式，允許網(wǎng)頁從不同的域訪問其資源.CORS系統(tǒng)定義了一種瀏覽器和服務器交互的方式來確定是否允許跨域請求。它是一個妥協(xié)，有更大的靈活性，但比起簡單地允許所有這些的要求來說更加安全。實現(xiàn)方法：CORS需要瀏覽器和服務器同時支持。目前，所有瀏覽器都支持該功能，IE瀏覽器不能低于IE10。整個CORS通信過程，都是瀏覽器自動完成，不需要用戶參與。對于開發(fā)者來說，CORS通信與同源的AJAX通信沒有差別，代碼完全一樣。瀏覽器一旦發(fā)現(xiàn)AJAX請求跨源，就會自動添加一些附加的頭信息，有時還會多出一次附加的請求，但用戶不會有感覺。服務器端對于CORS的支持，主要就是通過設置Access-Control-Allow-Origin來進行的。如果瀏覽器檢測到相應的設置，就可以允許Ajax進行跨域的訪問。CORS策略的優(yōu)缺點：優(yōu)點：1、CORS支持所有類型的HTTP請求。2、使用CORS，開發(fā)者可以使用普通的XMLHttpRequest發(fā)起請求和獲得數(shù)據(jù)，比起JSONP有更好的錯誤處理。缺點：

兼容性方面相對差一點，ie10或以上才支持這是官方推薦的解決方案。服務端設置響應頭部，允許客戶端在跨域請求時進行訪問。服務器端需要設置Access-Control-Allow-Origin等相關(guān)的CORS頭，允許特定來源的請求。2、JSONP原理

：我們知道，在頁面上有三種資源是可以與頁面本身不同源的。它們是：js腳本，css樣式文件，圖片，像淘寶等大型網(wǎng)站，肯定會將這些靜態(tài)資源放入cdn中，然后在頁面上連接，如下所示，所以它們是可以鏈接訪問到不同源的資源的。1）<scripttype="text/javascript"src="某某cdn地址"></script>2）<linktype="text/css"rel="stylesheet"href="某個cdn地址"/>3）<imgsrc="某個cdn地址"alt=""/>而jsonp就是利用了script標簽的src屬性是沒有跨域的限制的，從而達到跨域訪問的目的。因此它的最基本原理就是：動態(tài)添加一個<script>標簽來實現(xiàn)。實現(xiàn)方法：

這里是使用ajax來請求的，看起來和ajax沒啥區(qū)別，其實還是有區(qū)別的。

ajax的核心是通過XmlHttpRequest獲取非本頁內(nèi)容，而jsonp的核心則是動態(tài)添加<script>標簽來調(diào)用服務器提供的js腳本。$.ajax({ url:"/services.php", dataType:'jsonp', data:'', jsonp:'callback', success:function(result){ //somecode }});JSONP的不足之處：1、只能使用get方法，不能使用post方法我們知道script，link,img等等標簽引入外部資源，都是get請求的，那么就決定了jsonp一定是get的。但有時候我們使用的post請求也成功，為啥呢？這是因為當我們指定dataType:'jsonp',不論你指定：type:"post"或者type:"get"，其實質(zhì)上進行的都是get請求！沒有關(guān)于JSONP調(diào)用的錯誤處理。如果動態(tài)腳本插入有效，就執(zhí)行調(diào)用；如果無效，就靜默失敗。失敗是沒有任何提示的。例如，不能從服務器捕捉到404錯誤，也不能取消或重新開始請求。不過，等待一段時間還沒有響應的話，就不用理它了。3、document.domain+iframe的設置

(只有在主域相同的時候才能使用該方法)原理：瀏覽器中不同域的框架之間是不能進行js的交互操作的。但是不同的框架之間（父子或同輩），是能夠獲取到彼此的window對象的，但是，我們也只能獲取到一個幾乎無用的window對象。比如，有一個頁面，它的地址是/a.html，在這個頁面里面有一個iframe，它的src是/b.html,很顯然，這個頁面與它里面的iframe框架是不同域的，所以我們是無法通過在頁面中書寫js代碼來獲取iframe中的東西的。這個時候，document.domain就可以派上用場了，我們只要把/a.html和

/b.html這兩個頁面的document.domain都設成相同的域名就可以了。但要注意的是，document.domain的設置是有限制的，我們只能把document.domain設置成自身或更高一級的父域，且主域必須相同。例如：中某個文檔的document.domain可以設成、、中的任意一個，但是不可以設成,因為這是當前域的子域，也不可以設成,因為主域已經(jīng)不相同了。使用方法：比如在/a.html的頁面里要訪問/b.html里面的東西。在頁面/a.html中設置document.domain:$(function(){ try{ document.domain="";//這里將document.domain設置成一樣 }catch(e){} $("#iframe").load(function(){ variframe=$("#iframe").contentDocument.$; ifram.get("/接口",function(data){}); });});在頁面/b.html中也設置document.domain，而且這也是必須的，雖然這個文檔的domain就是,但是還是必須顯示的設置document.domain的值：$(function(){ try{ document.domain="";//這里將document.domain設置成一樣 }catch(e){}});里有個注意點，就是在A頁面中，要等iframe標簽完成加載B頁面之后，再取iframe對象的contentDocument,否則如果B頁面沒有被iframe完全加載，在A頁面中通過contentDocument屬性就取不到B頁面中的jQuery對象。

一旦取到B頁面中的jQuery對象，就可以直接發(fā)ajax請求了，這種類似“代理”方式可以解決主子域的跨域問題。缺點：只有在主域相同的時候才能使用該方法

4、HTML5的postMessage原理：就是一個html5所提供的一個API--->HTML5window.postMessage是一個安全的、基于事件的消息API。

在需要發(fā)送消息的源窗口調(diào)用postMessage方法即可發(fā)送消息。其中.源窗口可以是全局的window對象，也可以是以下類型的窗口：文檔窗口中的iframe： iframe.documentWindow;JavaScript打開的彈窗： window.open();當前文檔窗口的父窗口： window.parent;發(fā)送消息：找到源window對象后，即可調(diào)用postMessageAPI向目標窗口發(fā)送消息：說明：postMessage函數(shù)接收兩個參數(shù)：1、msg,將要發(fā)送的消息，可以使一切javascript參數(shù)，如字符串，數(shù)字，對象，數(shù)組等。2、targetOrigin，這個參數(shù)稱作“目標域”，注意，是目標域不是本域！比如，你想在2.com的網(wǎng)頁上往1.com網(wǎng)頁上傳消息，那么這個參數(shù)就是“http://1.com/”，而不是2.com.協(xié)議，（一個完整的域名包括：主機名，端口號。如：:80/）

接收消息：那目標窗口要怎么接收傳過來的數(shù)據(jù)呢，只要監(jiān)聽window的message事件就可以接收了。message事件監(jiān)聽函數(shù)接收一個參數(shù)，Event對象實例，該對象有三個屬性：data：

消息origin：消息的來源地址source：發(fā)送消息窗口的window對象引用優(yōu)缺點：優(yōu)點：方便，安全，有效的解決了跨域問題缺點：萬惡的資本主義，ie8+才支持，而且ie8+<ie10只支持iframe的方式。

5、使用來進行跨域（相對比較完美的方法）

原理：當iframe的頁面跳到其他地址時，其值保持不變，并且可以支持非常長的name值（2MB）。瀏覽器跨域iframe禁止互相調(diào)用/傳值.但是調(diào)用iframe時卻不變,正是利用這個特性來互相傳值,當然跨域下是不容許讀取ifram的值.

所以這里我們還要準備一個和主頁面/main.html相同域下的代理頁面/other.html,iframe調(diào)用子頁面/data.html使用方法：1、準備三個頁面：/main.html

//應用頁面/other.html

//代理頁面，要求和應用頁面在同一個域。一般是一個空的html

/data.html

//應用頁面獲取數(shù)據(jù)的頁面，簡稱：數(shù)據(jù)頁面2、數(shù)據(jù)頁面將數(shù)據(jù)傳到中去。如下：/data.html中的="蒼老師";/main.html

//應用頁面的代碼如下：variframeData;varstate=0;//開關(guān)變量variframe=document.createElement('iframe');//創(chuàng)建iframevarloadfn=function(){ if(state===1){ iframeData=iframe.contentW;//讀取數(shù)據(jù) alert('獲取到了iframe傳過來的妹子'+iframeData); }elseif(state===0){ state=1; iframe.contentWindow.location='/other.html';//這里是代理頁面other.html/**這里說明一下:由于iframe的location改變了，相當于重新載入頁面（這是iframe的性質(zhì)決定的），于是重新執(zhí)行l(wèi)oadfn方法。

由于當iframe的頁面跳到其他地址時，其值保持不變，并且此時開關(guān)變量state已經(jīng)變?yōu)?，

于是就可以獲取到值，也就達到了跨域訪問的目的了。**/ };}iframe.src='/data.html';//這是是數(shù)據(jù)頁面，data.htmlif(iframe.attachEvent){ iframe.attachEvent('onload',loadfn);}else{ iframe.onload=loadfn;}document.body.appendChild(iframe);3、獲取數(shù)據(jù)以后銷毀這個iframe，釋放內(nèi)存；這也保證了安全（不被其他域framejs訪問）。iframe.contentWindow.document.write('');iframe.contentWindow.close();document.body.removeChild(iframe);優(yōu)缺點：瀏覽器支持情況好，是比較普遍的使用方法總結(jié)以上總結(jié)了js跨