js跨域的理解與實現

域(Domain)是Windows網絡中獨立運行的單位,域之間相互訪問則需要建立信任關係(即Trust Relation)。信任關係是連接在域與域之間的橋樑。當一個域與其他域建立了信任關係後,2個域之間不但可以按需要相互進行管理,還可以跨網分配文件和打印機等設備資源,使不同的域之間實現網絡資源的共享與管理。 有一種簡明的說法來解釋廣域跨域:跨域訪問,簡單來說就是 A 網站的 javascript 代碼試圖訪問 B 網站,包括提交內容和獲取內容。由於安全原因,跨域訪問是被各大瀏覽器所默認禁止的。

在廣域網環境中,由於瀏覽器的安全限制,網絡連接的跨域訪問時不被允許的,XmlHttpRequest也不例外。但有時候跨域訪問資源是必需的。

同源策略阻止從一個域上加載的腳本獲取或操作另一個域上的文檔屬性。也就是說,受到請求的 URL 的域必須與當前 Web 頁面的域相同。這意味着瀏覽器隔離來自不同源的內容,以防止它們之間的操作。同源策略不阻止將動態腳本元素插入文檔中。

參考理論一:在瀏覽器中不能直接來跨域訪問,而在服務器端沒有跨域安全限制。

這樣的話,可以在服務端完成跨域訪問,而在客戶端來取得結果就可以了。

參考理論二:同源策略不阻止動態腳本元素插入,腳本訪問可以跨域。

用服務器端的XmlHttpRequest代理實現跨域訪問

我們不能在瀏覽器端直接使用AJAX來跨域訪問資源,但是在服務器端是沒有這種跨域安全限制的。所以,我們只需要讓服務器端幫我們完成“跨域訪問”的工作,然後在瀏覽器端用AJAX獲取服務器端“跨域訪問”的結果就可以了。這就是所謂的在服務器端創建一個XmlHttpRequest代理,通過這個代理來訪問其他域名下的資源。這裏引用Yahoo! JavaScript Developer Center上的幾張圖來進一步說明這個方案:

使用XmlHttpRequest訪問同一域名下的資源:

使用XmlHttpRequest跨域訪問資源:

用服務器端的XmlHttpRequest代理來跨域訪問資源:

編寫服務器端XmlHttpRequest代理的具體過程就不贅述了,無非是創建一個自定義的HTTP請求。

用動態script標籤實現客戶端的跨域訪問

很明顯,上一個方案必須要在服務器端做相應的改動才能實現跨域訪問。但是有些時候,用戶不能改動服務器端的源代碼,而且更多的時候,用戶並沒有Web開發的基礎,他們只會簡單的複製、粘貼操作。這個時候,第一個方案就不能滿足一個服務提供者的需求了。

我們應該能注意到,雖然瀏覽器有跨域訪問的限制,但是我們是可以通過script標籤遠程引用其他域名下的腳本文件的。而且,script標籤的 src屬性不一定必須是一個存在的js文件,也可以是一個http handler的url,只要這個http handler返回的是一個text/javascript類型的響應就可以了。

這樣,我們的第二個方案就浮出水面了。只要讓用戶添加一個script標籤,這個script標籤的src屬性指向我們api的url,並提供 api需要的一些參數,通常其中包括了一個作爲callback的js函數名。針對這個腳本請求,我們服務器端的http handler會根據url中攜帶的參數,生成並返回相應的腳本,通常這個腳本的內容是調用callback函數,並傳入用戶需要的數據作爲參數。於是,一個跨域訪問的過程就完成了。下面是一個Yahoo! JavaScript Developer Center上提供的一個例子:

01 <html>
02 <head>
03 <title>How Many Pictures Of Madonna Do We Have?</title>
04 <script type="text/javascript">
05 function ws_results(obj)
06 {
07     alert(obj.ResultSet.totalResultsAvailable);
08 }
09 </script>
11 </head>
12 <body>
13 </body>
14 </html>

將這段代碼複製到文本編輯器中,另存爲xxx.html,再將另存到文件拖到瀏覽器中,就能看到效果了(網速慢的話需要等待一下)。在這個例子中,api的url的callback參數指定了跨域訪問成功後會調用的函數的名稱,這個函數有一個參數,這個參數就是用戶跨域訪問需要的數據,通常是一個json對象。

這個例子有一個不足之處,就是這個跨域訪問實際上是“靜態的”,也就是說不能隨時動態的實現跨域訪問,例如同一個按鈕點擊事件來觸發跨域訪問。其實只要將代碼稍微修改一下,就可以實現動態的跨域訪問了,下面是修改後的代碼:

01 <html>
02 <head>
03 <title>How Many Pictures Of Madonna Do We Have?</title>
04 <script type="text/javascript">
05 function ws_results(obj)
06 {
07     alert(obj.ResultSet.totalResultsAvailable);
08 }
09   
10 function onClick()
11 {
12     var script = document.createElement("script");
13     script.type = "text/javascript";
15     document.body.appendChild(script);
16 }
17 </script>
18 </head>
19 <body>
20 <input type="button" value="click me!" οnclick="onClick()">
21 </body>
22 </html>

服務器端的http handler處理請求的過程這裏也不贅述了,關鍵就是根據用戶的參數生成js代碼。

其他實現跨域訪問的方案

除了上面兩種方案之外,還有其他一下方法同樣可以實現跨域訪問,例如:

  • apache server的mod_rewrite模塊或者mod_proxy模塊可以幫你自動實現服務器端的XmlHttpRequest代理,你可以像調用當前域名下的資源一樣的調用其他域名下的資源。
  • 據說動態生成iframe也可以實現跨域調用,沒有仔細研究過。

Javascript跨域和Ajax跨域解決方案

Ajax跨域和JS的跨域通信(Cross The Site)的幾種解決方案

最近做的一個項目中需要ajax跨域取得數據,如果是在本域中確實沒有問題,但是放到二級域和其他域下瀏覽器直接就彈出提示框:“該頁正在訪問其控制範圍之外的數據,這有些危險,是否繼續"。

什麼引起了ajax跨域不能的問題?ajax本身實際上是通過XMLHttpRequest對象來進行數據的交互,而瀏覽器出於安全考慮,不允許js代碼進行跨域操作,所以會警告。

有什麼完美的解決方案麼?沒有。解決方案有不少,但是隻能是根據自己的實際情況來選擇。

具體情況有:

  • 本域和子域的相互訪問: www.aa.com和book.aa.com
  • 本域和其他域的相互訪問: www.aa.com和www.bb.com 用 iframe
  • 本域和其他域的相互訪問: www.aa.com和www.bb.com 用 XMLHttpRequest訪問代理
  • 本域和其他域的相互訪問: www.aa.com和www.bb.com 用 JS創建動態腳本

解決方法:

  • 如果想做到數據的交互,那麼www.aa.com和book.aa.com必須由你來開發纔可以。可以將book.aa.com用iframe添加到 www.aa.com的某個頁面下,在www.aa.com和iframe裏面都加上document.domain = "aa.com",這樣就可以統一域了,可以實現跨域訪問。就和平時同一個域中鑲嵌iframe一樣,直接調用裏面的JS就可以了。
  • 當兩個域不同時,如果想相互調用,那麼同樣需要兩個域都是由你來開發纔可以。用iframe可以實現數據的互相調用。解決方案就是用window.location對象的hash屬性。hash屬性就是http://domian/web/a.htm#dshakjdhsjka 裏面的#dshakjdhsjka。利用JS改變hash值網頁不會刷新,可以這樣實現通過JS訪問hash值來做到通信。不過除了IE之外其他大部分瀏覽器只要改變hash就會記錄歷史,你在前進和後退時就需要處理,非常麻煩。不過再做簡單的處理時還是可以用的。大體的過程是頁面a和頁面b在不同域下,b通過iframe添加到a裏,a通過JS修改iframe的hash值,b裏面做一個監聽(因爲JS只能修改hash,數據是否改變只能由b自己來判斷),檢測到b的hash值被修改了,得到修改的值,經過處理返回a需要的值,再來修改a的hash值(這個地方要注意,如果a 本身是那種查詢頁面的話比如http://domian/web/a.aspx?id=3,在b中直接parent.window.location是無法取得數據的,同樣報沒有權限的錯誤,需要a把這個傳過來,所以也比較麻煩),同樣a裏面也要做監聽,如果hash變化的話就取得返回的數據,再做相應的處理。
  • 這種情形是最經常遇到的,也是用的最多的了。就是www.aa.com和www.bb.com你只能修改一個,也就是另外一個是別人的,人家告訴你你要取得數據就訪問某某連接參數是什麼樣子的,最後返回數據是什麼格式的。而你需要做的就是在你的域下新建一個網頁,讓服務器去別人的網站上取得數據,再返回給你。domain1下的a向同域下的GetData.aspx請求數據,GetData.aspx向domain2下的 ResponseData.aspx 發送請求,ResponseData.aspx 返回數據給 GetData.aspx,GetData.aspx 再返回給 a,這樣就完成了一次數據請求。GetData.aspx在其中充當了代理的作用。
  • 這個和上個的區別就是請求是使用<script>標籤來請求的,這個要求也是兩個域都是由你來開發才行。原理就是JS文件注入,在本域內的a 內生成一個JS標籤,它的SRC指向請求的另外一個域的某個頁面b,b返回數據即可,可以直接返回JS的代碼。因爲script的src屬性是可以跨域的。

總結:

  • 第一種情況:域和子域的問題,可以完全解決交互。
  • 第二種情況:跨域,實現過程非常麻煩,需要兩個域開發者都能控制,適用於簡單交互。
  • 第三種情況:跨域,開發者只控制一個域即可,實現過程需要增加代理取得數據,是常用的方式。
  • 第四種情況:跨域,兩個域開發者都需要控制,返回一段js代碼。

發佈了199 篇原創文章 · 獲贊 8 · 訪問量 88萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章