JavaScript的10種跨域共享的方法

在客戶端編程語言中,如javascript和ActionScript,同源策略是一個很重要的安全理念,它在保證數據的安全性方面有著重要的意義。同源策略規定跨域之間的腳本是隔離的,一個域的腳本不能訪問和操作另外一個域的絕大部分屬性和方法。那么什么叫相同域,什么叫不同的域呢?

同源策略

在客戶端編程語言中,如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還有這樣的隱患。

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

單向跨域

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請求。這個跨域方式不需要和目標資源簽訂協議,帶有侵略性,另外需要注意的是實踐中應該對這個代理實施一定程度的保護,比如限制他人使用或者使用頻率。

雙向跨域

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來代替。

總結

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

原文鏈接:http://www.woiweb.net/10-cross-domain-methods.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/276703.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/276703.shtml
英文地址,請注明出處:http://en.pswp.cn/news/276703.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

好用的shell工具_精選5個酷斃的Python工具

來自:Python之禪工欲善其事必先利其器,一個好的工具能讓起到事半功倍的效果,Python社區提供了足夠多的優秀工具來幫助開發者更方便的實現某些想法,下面這幾個工具給我的工作也帶來了很多便利,推薦給追求美好事物的你。…

承載輝煌歷史 暢想無線未來

看了JustDI的文章“手機也能當電腦用?--談談未來智能手機操作系統的走向”,作為嵌入式愛好者,我也想談談自己的看法。首先,從網絡發展的角度看,移動互聯網的寬帶化,寬帶互聯網的移動…

接口碼釋義

1xx:信息,請求收到,繼續處理 2xx:成功,行為被成功地接受、理解和采納 3xx:重定向,為了完成請求,必須進一步執行的動作 4xx:客戶端錯誤,請求包含語法錯誤或…

java讀取文件內容,文件頭有\ufeff

"\ufeff"是UTF-8 BOM編碼的文件頭,代表該文件按照什么字節順序排序 調用java的工具類[ UnicodeInputStream ]即可解決這個問題 //第二個參數targetEncoding為null時在getDetectedEncoding方法中會自動檢測編碼類型 UnicodeInputStream unicodeInputStrea…

6款國內外SNS開源軟件 搭建社交網站利器

SNS(Social Network Service),有時稱為社交網絡,有時稱為社會化網絡,專指旨在幫助人們建立社會性網絡的互聯網應用服務。如果對SNS概念還很模糊,說到人人網、開心網你就明白了。 去年360圈、螞蟻網接連關站給SNS前景蒙上一層陰影&…

aop實現原理_從宏觀的實現原理和設計本質入手,帶你理解 AOP 框架的原理

點擊上方“Java知音”,選擇“置頂公眾號”技術文章第一時間送達!作者:FeelsChaoticjuejin.im/post/5c57b2d5e51d457ffd56ffbb前言本文將從另一個角度講解 AOP,從宏觀的實現原理和設計本質入手。大部分講 AOP 的博文都是一上來就羅…

孟憲會老師推薦的一部C#圖解教程

Amazon五星級盛譽 C# 最新特性一覽無余 數十年開發與教學經驗的結晶 圖、表和文字完美結合,最易學的C# 教程 本書詳細信息:http://www.china-pub.com/43556 微軟4大名著評選結果揭曉:http://www.china-pub.com/static07/0812/jsj_micrmingz_0…

Python數據分析Numpy庫方法簡介(三)

補充: np.ceil()向上取整 3.1向上取整是4 np.floor()向下取整 數組名.resize((m,n)) 重置行列 基礎操作 np.random.randn()符合正態分布(鐘行/高斯)的數據 矩陣的水平拼接 np.vstack((a,b)) 矩陣的垂直拼接 np.hstack((a,b)) 點陣積: np.dot(a,b)/ ab…

xxl-job源碼分析

xxl-job源碼分析 xxl-job 系統說明 安裝 安裝部署參考文檔:分布式任務調度平臺xxl-job 功能 定時調度、服務解耦、靈活控制跑批時間(停止、開啟、重新設定時間、手動觸發) XXL-JOB是一個輕量級分布式任務調度平臺,其核心設計目標是…

定制jQuery File Upload為微博式單文件上傳

原文鏈接:http://avnpc.com/pages/single-file-upload-component-by-jquery-file-upload jQuery File Upload是一個非常優秀的上傳組件,主要使用了XHR作為上傳方式,并且利用了相當多的現代瀏覽器功能,所以可以實現諸如批量上傳、超…

vb趣味編程彈球小游戲_最好玩的微信小游戲集合,總有一款是你沒玩過的

大家好,這里是小雅龍生活趣味時間,自從17年微信推出小游戲程序以來,微信小游戲行業可謂是炙手可熱,知道2019年不斷有許許多多的微信小游戲如雨后春筍般的生根發芽。下面就由我帶大家來看看今年最好玩,最受歡迎的微信小…

開發MOSS2007 Masterpage的一些經驗

一直在做MOSS平臺的Masterpage開發,碰到很多的問題,總結了一些經驗,特此記錄: masterpage的所有的ContentPlaceholder詳細解釋見以下網址:http://www.cnblogs.com/WinYoung/archive/2007/06/25/791766.html 1.如果應用masterpage以后IE狀態欄出現""網頁指令碼錯誤訊息…

Golang——垃圾回收GC(2)

1 垃圾回收中的重要概念 1.1 定義 In computer science, garbage collection (GC) is a form of automatic memory management. The garbage collector, or just collector, attempts to reclaim garbage, or memory occupied by objects that are no longer in use by the pro…

java gui框架_推薦!程序員整理的Java資源大全

構建這里搜集了用來構建應用程序的工具。Apache Maven:Maven使用聲明進行構建并進行依賴管理,偏向于使用約定而不是配置進行構建。Maven優于Apache Ant。后者采用了一種過程化的方式進行配置,所以維護起來相當困難。Gradle:Gradle…

帆軟報表(finereport)控件背景色更改

setTimeout(function() {$(.fr-trigger-btn-up).css({"background-color": "#003399" });}, 100); 轉載于:https://www.cnblogs.com/Williamls/p/11571586.html

開心網分析,師從“中國緣”

作者:麥田   一,師從“中國緣” 開心網從08年“爆發”之后,網上出現很多評論文章。幾乎100%的評論文章都談到了開心網“不可思議”的爆發增長速度,比如幾個月就進入了alexa前500等等。但是,幾乎沒有一篇文章提到“開心…

HTML5+CSS3+JQuery1.9 輸入框切換和Div失焦模擬

Div失焦原理&#xff1a;判斷document點擊對象是否在Div容器以內&#xff0c;否則觸發事件 需要腳本&#xff1a;jquery-1.9.1.js 下載地址&#xff1a;http://download.csdn.net/detail/dmtnewtons/5807757 <!DOCTYPE> <html> <head> <meta http-equ…

資本冬天已至,開發者卻可以著眼未來

云&#xff0c;在國內外都已成為軟件開發者的首選服務。縱觀歷史&#xff0c;在云計算發展的這些年里&#xff0c;不管云上做了多少產品和服務&#xff0c;其實都離不開云最本質的價值體系&#xff1a;自服務、高彈性、按需提供、免運維&#xff0c;這些特性也讓云服務天然成為…

mybatis 大于_酸爽!IDEA 中這么玩 MyBatis,讓編碼速度飛起!

作者&#xff1a;Orsoncnblogs.com/java-class/p/6237564.html1. 搭建 MyBatis Generator 插件環境a. 添加插件依賴 pom.xmlb. 配置文件 generatorConfig.xmlc. 數據庫配置文件 jdbc.propertiesd. 配置插件啟動項2.項目實戰a. 比如在一個項目 我們要刪除某個小組下某個用戶的信…

Java的三種代理模式完整源碼分析

Java的三種代理模式&完整源碼分析 Java的三種代理模式&完整源碼分析 參考資料&#xff1a; 博客園-Java的三種代理模式 簡書-JDK動態代理-超詳細源碼分析 [博客園-WeakCache緩存的實現機制](https://www.cnblogs.com/liuyun1995/p/8144676.html) 靜態代理 靜態代理在使…