js跨域訪問

同源策略

在客戶端編程語言中,如javascript和 ActionScript,同源策略是一個很重要的安全理念,它在保證數據的安全性方面有着重要的意義。同源策略規定跨域之間的腳本是隔離的,一個域的腳 本不能訪問和操作另外一個域的絕大部分屬性和方法。那麼什麼叫相同域,什麼叫不同的域呢?當兩個域具有相同的協議(如http), 相同的端口(如80),相同的host(如www.example.org),那麼我們就可以認爲它們是相同的域。比如 http://www.example.org/index.html和http://www.example.org/sub/index.html是 同域,而http://www.example.org, https://www.example.org, http://www.example.org:8080, http://sub.example.org中的任何兩個都將構成跨域。同源策略還應該對一些特殊情況做處理,比如限制file協議下腳本的訪問權限。 本地的HTML文件在瀏覽器中是通過file協議打開的,如果腳本能通過file協議訪問到硬盤上其它任意文件,就會出現安全隱患,目前IE8還有這樣的 隱患。

 

受到同源策略的影響,跨域資源共享就會受到制約。但是隨着人們的實踐和瀏覽器的進步,目前在跨域請求的技巧上,有很多寶貴經驗的沉澱和積累。這裏我 把跨域 資源共享分成兩種,一種是單向的數據請求,還有一種是雙向的消息通信。接下來我將羅列出常見的一些跨域方式,以下跨域實例的源代碼可以從這裏獲得。


A : 單向跨域


JSONP

JSONP (JSON with Padding)是一個簡單高效的跨域方式,HTML中的script標籤可以加載並執行其他域的javascript,於是我們可以通過script標 記來動態加載其他域的資源。例如我要從域A的頁面pageA加載域B的數據,那麼在域B的頁面pageB中我以JavaScript的形式聲明pageA 需要的數據,然後在 pageA中用script標籤把pageB加載進來,那麼pageB中的腳本就會得以執行。JSONP在此基礎上加入了回調函數,pageB加載完之後 會執行pageA中定義的函數,所需要的數據會以參數的形式傳遞給該函數。JSONP易於實現,但是也會存在一些安全隱患,如果第三方的腳本隨意地執行, 那麼它就可以篡改頁面內容,截獲敏感數據。但是在受信任的雙方傳遞數據,JSONP是非常合適的選擇。


flash URLLoader

flash有自己的一套安全策略,服務器可以通過crossdomain.xml文件來聲明能被哪些域的SWF文件訪問,SWF也可以通過API來 確定自 身能被哪些域的SWF加載。當跨域訪問資源時,例如從域www.a.com請求域www.b.com上的數據,我們可以藉助flash來發送HTTP請 求。首先,修改域www.b.com上的crossdomain.xml(一般存放在根目錄,如果沒有需要手動創建) ,把www.a.com加入到白名單。其次,通過Flash URLLoader發送HTTP請求,最後,通過Flash API把響應結果傳遞給JavaScript。Flash URLLoader是一種很普遍的跨域解決方案,不過需要支持iOS的話,這個方案就無能爲力了。


Access Control

Access Control是比較超越的跨域方式,目前只在很少的瀏覽器中得以支持,這些瀏覽器可以發送一個跨域的HTTP請求(Firefox, Google Chrome等通過XMLHTTPRequest實現,IE8下通過XDomainRequest實現),請求的響應必須包含一個Access- Control-Allow-Origin的HTTP響應頭,該響應頭聲明瞭請求域的可訪問權限。例如www.a.com對www.b.com下的 asset.php發送了一個跨域的HTTP請求,那麼asset.php必須加入如下的響應頭:

header("Access-Control-Allow-Origin: http://www.a.com");

 

window.name

window 對象的name屬性是一個很特別的屬性,當該window的location變化,然後重新加載,它的name屬性可以依然保持不變。那麼我們可以在頁面 A中用iframe加載其他域的頁面B,而頁面B中用JavaScript把需要傳遞的數據賦值給window.name,iframe加載完成之後,頁 面A修改iframe的地址,將其變成同域的一個地址,然後就可以讀出window.name的值了。這個方式非常適合單向的數據請求,而且協議簡單、安 全。不會像JSONP那樣不做限制地執行外部腳本。


server proxy

在數據提供方沒有提供對JSONP協議或者 window.name協議的支持,也沒有對其它域開放訪問權限時,我們可以通過server proxy的方式來抓取數據。例如當www.a.com域下的頁面需要請求www.b.com下的資源文件asset.txt時,直接發送一個指向 www.b.com/asset.txt的Ajax請求肯定是會被瀏覽器阻止。這時,我們在www.a.com下配一個代理,然後把Ajax請求綁定到這 個代理路徑下,例如www.a.com/proxy/, 然後這個代理髮送HTTP請求訪問www.b.com下的asset.txt,跨域的HTTP請求是在服務器端進行的,客戶端並沒有產生跨域的Ajax請 求。這個跨域方式不需要和目標資源簽訂協議,帶有侵略性,另外需要注意的是實踐中應該對這個代理實施一定程度的保護,比如限制他人使用或者使用頻率。


B : 雙向跨域


document.domain

通過修改document的domain屬性,我們可以在域和子域或者不同的子域之間通信。同域策略認爲域和子域隸屬於不同的域,比如 www.a.com 和 sub.a.com是不同的域,這時,我們無法在www.a.com下的頁面中調用sub.a.com中定義的JavaScript方法。但是當我們把它 們document的domain屬性都修改爲a.com,瀏覽器就會認爲它們處於同一個域下,那麼我們就可以互相調用對方的method來通信了。


FIM——Fragment Identitier Messaging

不同的域之間,JavaScript只能做很有限的訪問和操作,其實我們利用這些有限的訪問權限就可以達到跨域通信的目的了。FIM (Fragment Identitier Messaging)就是在這個大前提下被髮明的。父窗口可以對iframe進行URL讀寫,iframe也可以讀寫父窗口的URL,URL有一部分被稱 爲frag,就是#號及其後面的字符,它一般用於瀏覽器錨點定位,Server端並不關心這部分,應該說HTTP請求過程中不會攜帶frag,所以這部分 的修改不會產生HTTP請求,但是會產生瀏覽器歷史記錄。FIM的原理就是改變URL的frag部分來進行雙向通信。每個window通過改變其他 window的location來發送消息,並通過監聽自己的URL的變化來接收消息。這個方式的通信會造成一些不必要的瀏覽器歷史記錄,而且有些瀏覽器 不支持onhashchange事件,需要輪詢來獲知URL的改變,最後,URL在瀏覽器下有長度限制,這個制約了每次傳送的數據量。


Flash LocalConnection

頁面上的雙向通信也可以通過Flash來解決,Flash API中有LocalConnection這個類,該類允許兩個SWF之間通過進程通信,這時SWF可以播放在獨立的Flash Player或者AIR中,也可以嵌在HTML頁面或者是PDF中。遵循這個通信原則,我們可以在不同域的HTML頁面各自嵌套一個SWF來達到相互傳遞 數據的目的了。SWF通過LocalConnection交換數據是很快的,但是每次的數據量有40kb的大小限制。用這種方式來跨域通信過於複雜,而且 需要了2個SWF文件,實用性不強。


window.postMessage

window.postMessage是HTML5定義的一個很新的方法,這個方法可以很方便地跨window通信。由於它是一個很新的方法,所以在很舊和比較舊的瀏覽器中都無法使用。


Cross Frame

Cross Frame是FIM的一個變種,它藉助了一個空白的iframe,不會產生多餘的瀏覽器歷史記錄,也不需要輪詢URL的改變,在可用性和性能上都做了很大 的改觀。它的基本原理大致是這樣的,假設在域www.a.com上有頁面A.html和一個空白代理頁面proxyA.html, 另一個域www.b.com上有個頁面B.html和一個空白代理頁面proxyB.html,A.html需要向B.html中發送消息時,頁面會創建 一個隱藏的iframe, iframe的src指向proxyB.html並把message作爲URL frag,由於B.html和proxyB.html是同域,所以在iframe加載完成之後,B.html可以獲得iframe的URL,然後解析出 message,並移除該iframe。當B.html需要向A.html發送消息時,原理一樣。Cross Frame是很好的雙向通信方式,而且安全高效,但是它在Opera中無法使用,不過在Opera下面我們可以使用更簡單的 window.postMessage來代替。postMessage在 ie8+  ff  opera chrome safari 中都有支持。可以完美跨域,針對ie6-7, 可以使用 修改iframe的window.opener來達到跨域。被跨的域下,只需要一個靜態HTML代理文件(用來發起ajax請求)。


總結

 

跨域的方法很多,不同的應用場景我們都可以找到一個最合適的解決方案。比如單向的數據請求,我們應該優先選擇JSONP或者 window.name,雙向 通信我們採取Cross Frame,在未與數據提供方沒有達成通信協議的情況下我們也可以用server proxy的方式來抓取數據。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章