版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡介
Web瀏覽器跨域解決方案一、什么是跨域跨域(Cross-OriginResourceSharing,CORS)是一個(gè)安全機(jī)制,用于在Web瀏覽器中控制在一個(gè)源(domain)上的web頁面可以從另一個(gè)源獲取哪些資源。由于瀏覽器的同源策略(Same-OriginPolicy),默認(rèn)情況下,一個(gè)網(wǎng)頁中的JavaScript腳本只能訪問與該網(wǎng)頁具有相同源的資源,而跨域則涉及到從一個(gè)源加載的web頁面去獲取另一個(gè)源的資源。這一策略對于JavaScript代碼能夠訪問的頁面內(nèi)容做了很重要的限制,即JavaScript只能訪問與包含它的文檔在同一域下的內(nèi)容。JavaScript這個(gè)安全策略在進(jìn)行多iframe或多窗口編程、以及Ajax編程時(shí)顯得尤為重要。根據(jù)這個(gè)策略,在下的頁面中包含的JavaScript代碼,不能訪問在域名下的頁面內(nèi)容;甚至不同的子域名之間的頁面也不能通過JavaScript代碼互相訪問。對于Ajax的影響在于,通過XMLHttpRequest實(shí)現(xiàn)的Ajax請求,不能向不同的域提交請求,例如,在下的頁面,不能向提交Ajax請求,等等。為什么瀏覽器要實(shí)現(xiàn)同源限制?我們舉例說明:比如一個(gè)黑客,他利用iframe把真正的銀行登錄頁面嵌到他的頁面上,當(dāng)你使用真實(shí)的用戶名和密碼登錄時(shí),如果沒有同源限制,他的頁面就可以通過javascript讀取到你的表單中輸入的內(nèi)容,這樣用戶名和密碼就輕松到手了跨域的情況分為以下幾種:特別注意兩點(diǎn):1、如果是協(xié)議和端口造成的跨域問題“前臺(tái)”是無能為力的2、在跨域問題上,域僅僅是通過“URL的首部”來識別而不會(huì)去嘗試判斷相同的ip地址對應(yīng)著兩個(gè)域或兩個(gè)域是否在同一個(gè)ip上。比如上面的/a.js和4/b.js;雖然域名和域名的ip對應(yīng),不過還是被認(rèn)為是跨域。“URL的首部”指tocol+window.location.host。其中,tocol:指含有URL第一部分的字符串,如http:
window.location.host:指包含有URL中主機(jī)名:端口號部分的字符串.如///server/二、常用的幾種跨域處理方法:
1、CORS(Cross-OriginResourceSharing)策略CORS是一個(gè)W3C標(biāo)準(zhǔn),全稱是"跨域資源共享"(Cross-originresourcesharing)。它允許瀏覽器向跨源服務(wù)器,發(fā)出XMLHttpRequest請求,從而克服了AJAX只能同源使用的限制。它為Web服務(wù)器定義了一種方式,允許網(wǎng)頁從不同的域訪問其資源.CORS系統(tǒng)定義了一種瀏覽器和服務(wù)器交互的方式來確定是否允許跨域請求。它是一個(gè)妥協(xié),有更大的靈活性,但比起簡單地允許所有這些的要求來說更加安全。實(shí)現(xiàn)方法:CORS需要瀏覽器和服務(wù)器同時(shí)支持。目前,所有瀏覽器都支持該功能,IE瀏覽器不能低于IE10。整個(gè)CORS通信過程,都是瀏覽器自動(dòng)完成,不需要用戶參與。對于開發(fā)者來說,CORS通信與同源的AJAX通信沒有差別,代碼完全一樣。瀏覽器一旦發(fā)現(xiàn)AJAX請求跨源,就會(huì)自動(dòng)添加一些附加的頭信息,有時(shí)還會(huì)多出一次附加的請求,但用戶不會(huì)有感覺。服務(wù)器端對于CORS的支持,主要就是通過設(shè)置Access-Control-Allow-Origin來進(jìn)行的。如果瀏覽器檢測到相應(yīng)的設(shè)置,就可以允許Ajax進(jìn)行跨域的訪問。CORS策略的優(yōu)缺點(diǎn):優(yōu)點(diǎn):1、CORS支持所有類型的HTTP請求。2、使用CORS,開發(fā)者可以使用普通的XMLHttpRequest發(fā)起請求和獲得數(shù)據(jù),比起JSONP有更好的錯(cuò)誤處理。缺點(diǎn):
兼容性方面相對差一點(diǎn),ie10或以上才支持這是官方推薦的解決方案。服務(wù)端設(shè)置響應(yīng)頭部,允許客戶端在跨域請求時(shí)進(jìn)行訪問。服務(wù)器端需要設(shè)置Access-Control-Allow-Origin等相關(guān)的CORS頭,允許特定來源的請求。2、JSONP原理
:我們知道,在頁面上有三種資源是可以與頁面本身不同源的。它們是:js腳本,css樣式文件,圖片,像淘寶等大型網(wǎng)站,肯定會(huì)將這些靜態(tài)資源放入cdn中,然后在頁面上連接,如下所示,所以它們是可以鏈接訪問到不同源的資源的。1)<scripttype="text/javascript"src="某某cdn地址"></script>2)<linktype="text/css"rel="stylesheet"href="某個(gè)cdn地址"/>3)<imgsrc="某個(gè)cdn地址"alt=""/>而jsonp就是利用了script標(biāo)簽的src屬性是沒有跨域的限制的,從而達(dá)到跨域訪問的目的。因此它的最基本原理就是:動(dòng)態(tài)添加一個(gè)<script>標(biāo)簽來實(shí)現(xiàn)。實(shí)現(xiàn)方法:
這里是使用ajax來請求的,看起來和ajax沒啥區(qū)別,其實(shí)還是有區(qū)別的。
ajax的核心是通過XmlHttpRequest獲取非本頁內(nèi)容,而jsonp的核心則是動(dòng)態(tài)添加<script>標(biāo)簽來調(diào)用服務(wù)器提供的js腳本。$.ajax({ url:"/services.php", dataType:'jsonp', data:'', jsonp:'callback', success:function(result){ //somecode }});JSONP的不足之處:1、只能使用get方法,不能使用post方法我們知道script,link,img等等標(biāo)簽引入外部資源,都是get請求的,那么就決定了jsonp一定是get的。但有時(shí)候我們使用的post請求也成功,為啥呢?這是因?yàn)楫?dāng)我們指定dataType:'jsonp',不論你指定:type:"post"或者type:"get",其實(shí)質(zhì)上進(jìn)行的都是get請求!沒有關(guān)于JSONP調(diào)用的錯(cuò)誤處理。如果動(dòng)態(tài)腳本插入有效,就執(zhí)行調(diào)用;如果無效,就靜默失敗。失敗是沒有任何提示的。例如,不能從服務(wù)器捕捉到404錯(cuò)誤,也不能取消或重新開始請求。不過,等待一段時(shí)間還沒有響應(yīng)的話,就不用理它了。3、document.domain+iframe的設(shè)置
(只有在主域相同的時(shí)候才能使用該方法)原理:瀏覽器中不同域的框架之間是不能進(jìn)行js的交互操作的。但是不同的框架之間(父子或同輩),是能夠獲取到彼此的window對象的,但是,我們也只能獲取到一個(gè)幾乎無用的window對象。比如,有一個(gè)頁面,它的地址是/a.html,在這個(gè)頁面里面有一個(gè)iframe,它的src是/b.html,很顯然,這個(gè)頁面與它里面的iframe框架是不同域的,所以我們是無法通過在頁面中書寫js代碼來獲取iframe中的東西的。這個(gè)時(shí)候,document.domain就可以派上用場了,我們只要把/a.html和
/b.html這兩個(gè)頁面的document.domain都設(shè)成相同的域名就可以了。但要注意的是,document.domain的設(shè)置是有限制的,我們只能把document.domain設(shè)置成自身或更高一級的父域,且主域必須相同。例如:中某個(gè)文檔的document.domain可以設(shè)成、、中的任意一個(gè),但是不可以設(shè)成,因?yàn)檫@是當(dāng)前域的子域,也不可以設(shè)成,因?yàn)橹饔蛞呀?jīng)不相同了。使用方法:比如在/a.html的頁面里要訪問/b.html里面的東西。在頁面/a.html中設(shè)置document.domain:$(function(){ try{ document.domain="";//這里將document.domain設(shè)置成一樣 }catch(e){} $("#iframe").load(function(){ variframe=$("#iframe").contentDocument.$; ifram.get("/接口",function(data){}); });});在頁面/b.html中也設(shè)置document.domain,而且這也是必須的,雖然這個(gè)文檔的domain就是,但是還是必須顯示的設(shè)置document.domain的值:$(function(){ try{ document.domain="";//這里將document.domain設(shè)置成一樣 }catch(e){}});里有個(gè)注意點(diǎn),就是在A頁面中,要等iframe標(biāo)簽完成加載B頁面之后,再取iframe對象的contentDocument,否則如果B頁面沒有被iframe完全加載,在A頁面中通過contentDocument屬性就取不到B頁面中的jQuery對象。
一旦取到B頁面中的jQuery對象,就可以直接發(fā)ajax請求了,這種類似“代理”方式可以解決主子域的跨域問題。缺點(diǎn):只有在主域相同的時(shí)候才能使用該方法
4、HTML5的postMessage原理:就是一個(gè)html5所提供的一個(gè)API--->HTML5window.postMessage是一個(gè)安全的、基于事件的消息API。
在需要發(fā)送消息的源窗口調(diào)用postMessage方法即可發(fā)送消息。其中.源窗口可以是全局的window對象,也可以是以下類型的窗口:文檔窗口中的iframe: iframe.documentWindow;JavaScript打開的彈窗: window.open();當(dāng)前文檔窗口的父窗口: window.parent;發(fā)送消息:找到源window對象后,即可調(diào)用postMessageAPI向目標(biāo)窗口發(fā)送消息:說明:postMessage函數(shù)接收兩個(gè)參數(shù):1、msg,將要發(fā)送的消息,可以使一切javascript參數(shù),如字符串,數(shù)字,對象,數(shù)組等。2、targetOrigin,這個(gè)參數(shù)稱作“目標(biāo)域”,注意,是目標(biāo)域不是本域!比如,你想在2.com的網(wǎng)頁上往1.com網(wǎng)頁上傳消息,那么這個(gè)參數(shù)就是“http://1.com/”,而不是2.com.協(xié)議,(一個(gè)完整的域名包括:主機(jī)名,端口號。如::80/)
接收消息:那目標(biāo)窗口要怎么接收傳過來的數(shù)據(jù)呢,只要監(jiān)聽window的message事件就可以接收了。message事件監(jiān)聽函數(shù)接收一個(gè)參數(shù),Event對象實(shí)例,該對象有三個(gè)屬性:data:
消息origin:消息的來源地址source:發(fā)送消息窗口的window對象引用優(yōu)缺點(diǎn):優(yōu)點(diǎn):方便,安全,有效的解決了跨域問題缺點(diǎn):萬惡的資本主義,ie8+才支持,而且ie8+<ie10只支持iframe的方式。
5、使用來進(jìn)行跨域(相對比較完美的方法)
原理:當(dāng)iframe的頁面跳到其他地址時(shí),其值保持不變,并且可以支持非常長的name值(2MB)。瀏覽器跨域iframe禁止互相調(diào)用/傳值.但是調(diào)用iframe時(shí)卻不變,正是利用這個(gè)特性來互相傳值,當(dāng)然跨域下是不容許讀取ifram的值.
所以這里我們還要準(zhǔn)備一個(gè)和主頁面/main.html相同域下的代理頁面/other.html,iframe調(diào)用子頁面/data.html使用方法:1、準(zhǔn)備三個(gè)頁面:/main.html
//應(yīng)用頁面/other.html
//代理頁面,要求和應(yīng)用頁面在同一個(gè)域。一般是一個(gè)空的html
/data.html
//應(yīng)用頁面獲取數(shù)據(jù)的頁面,簡稱:數(shù)據(jù)頁面2、數(shù)據(jù)頁面將數(shù)據(jù)傳到中去。如下:/data.html中的="蒼老師";/main.html
//應(yīng)用頁面的代碼如下: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改變了,相當(dāng)于重新載入頁面(這是iframe的性質(zhì)決定的),于是重新執(zhí)行l(wèi)oadfn方法。
由于當(dāng)iframe的頁面跳到其他地址時(shí),其值保持不變,并且此時(shí)開關(guān)變量state已經(jīng)變?yōu)?,
于是就可以獲取到值,也就達(dá)到了跨域訪問的目的了。**/ };}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ù)以后銷毀這個(gè)iframe,釋放內(nèi)存;這也保證了安全(不被其他域framejs訪問)。iframe.contentWindow.document.write('');iframe.contentWindow.close();document.body.removeChild(iframe);優(yōu)缺點(diǎn):瀏覽器支持情況好,是比較普遍的使用方法總結(jié)以上總結(jié)了js跨
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025-2030年中國汽車美容行業(yè)開拓第二增長曲線戰(zhàn)略制定與實(shí)施研究報(bào)告
- 2025-2030年中國電影行業(yè)營銷創(chuàng)新戰(zhàn)略制定與實(shí)施研究報(bào)告
- 2025-2030年中國礦用車輛維修行業(yè)營銷創(chuàng)新戰(zhàn)略制定與實(shí)施研究報(bào)告
- 2025-2030年中國動(dòng)力總成零部件行業(yè)并購重組擴(kuò)張戰(zhàn)略制定與實(shí)施研究報(bào)告
- 2025-2030年中國模擬集成電路設(shè)計(jì)行業(yè)開拓第二增長曲線戰(zhàn)略制定與實(shí)施研究報(bào)告
- 建設(shè)數(shù)據(jù)倉庫的八個(gè)步驟
- 廣東省2025屆兩校高三上學(xué)期第一次聯(lián)合模擬考試英語試題
- 2021-2026年中國動(dòng)物用疫苗市場調(diào)查研究及行業(yè)投資潛力預(yù)測報(bào)告
- 二年級數(shù)學(xué)計(jì)算題專項(xiàng)練習(xí)集錦
- 5米古樹提前放電避雷針 防側(cè)擊輕質(zhì)玻璃鋼接閃桿 伸縮式抱箍
- 工程總承包(EPC)項(xiàng)目管理辦法
- 小學(xué)三年級上冊數(shù)學(xué)應(yīng)用題100題
- 石油工程概論
- 加油站安全生產(chǎn)檢查表(資質(zhì)管理、安全生產(chǎn)規(guī)章制度、設(shè)備設(shè)施、特種作業(yè)人員管理、教育培訓(xùn)、勞防用品)
- 運(yùn)維應(yīng)急預(yù)案
- 漫談班主任的道與術(shù)
- 如何高效學(xué)習(xí)學(xué)習(xí)通超星課后章節(jié)答案期末考試題庫2023年
- 【航空個(gè)性化服務(wù)淺析4700字(論文)】
- 《巧擦黑板》(教案)-一年級下冊勞動(dòng)浙教版
- 腫瘤-實(shí)驗(yàn)四腫瘤(病理學(xué)課件)
- 亞洲杯足球比賽應(yīng)急預(yù)案
評論
0/150
提交評論