AJAX 同源與跨域2

2021-09-26 02:34:20 字數 1946 閱讀 4914

跨域是指乙個域下的文件或指令碼試圖去請求另乙個域下的資源,這裡跨域是廣義的。

廣義的跨域:

2、資源嵌入: 、2.) 子視窗:(

3、window.name + iframe

window.name屬性的獨特之處:name值在不同的頁面(甚至不同網域名稱)載入後依舊存在,並且可以支援非常長的 name 值(2mb)。

1.)a.html:(

var proxy = function(url, callback)  else if (state === 0) 

};// 獲取資料以後銷毀這個iframe,釋放記憶體;這也保證了安全(不被其他域frame js訪問)

function destoryframe()

};// 請求跨域b頁面資料

proxy('', function(data));

2.)proxy.html:(

中間**頁,與a.html同域,內容為空即可。

3.)b.html:()

總結:通過iframe的src屬性由外域轉向本地域,跨域資料即由iframe的window.name從外域傳遞到本地域。這個就巧妙地繞過了瀏覽器的跨域訪問限制,但同時它又是安全操作。

4、location.hash + iframe

實現原理: a欲與b跨域相互通訊,通過中間頁c來實現。 三個頁面,不同域之間利用iframe的location.hash傳值,相同域之間直接js訪問來通訊。

具體實現:a域:a.html -> b域:b.html -> a域:c.html,a與b不同域只能通過hash值單向通訊,b與c也不同域也只能單向通訊,但c與a同域,所以c可通過parent.parent訪問a頁面所有物件。

1.)a.html:(

2.)b.html:()

3.)c.html:(

5、window.postmessage()

postmessage是html5 xmlhttprequest level 2中的api,且是為數不多可以跨域操作的window屬性之一,它可用於解決以下方面的問題:

a.) 頁面和其開啟的新視窗的資料傳遞

b.) 多視窗之間訊息傳遞

c.) 頁面與巢狀的iframe訊息傳遞

d.) 上面三個場景的跨域資料傳遞

用法:postmessage(data,origin)方法接受兩個引數

data: html5規範支援任意基本型別或可複製的物件,但部分瀏覽器只支援字串,所以傳參時最好用json.stringify()序列化。

origin: 協議+主機+埠號,也可以設定為"*",表示可以傳遞給任意視窗,如果要指定和當前視窗同源的話設定為"/"。

1.)a.html:(

2.)b.html:()

6、websocket協議跨域

websocket protocol是html5一種新的協議。它實現了瀏覽器與伺服器全雙工通訊,同時允許跨域通訊,是server push技術的一種很好的實現。

原生websocket api使用起來不太方便,使用socket.io,它很好地封裝了websocket介面,提供了更簡單、靈活的介面,也對不支援websocket的瀏覽器提供了向下相容。

【案例:圖靈機械人】

我說你好 對方說

你好

ajax跨域以及同源策略

一 同源策略 在不同的url中,如果協議 網域名稱 埠相同,那麼這些url則為同源,如果協議 網域名稱 埠其中有一項不同,與路徑不同無關,則為不同源,不同源的url傳送請求則為跨域請求。在瀏覽器中跨域採用同源策略,除非js的 的 前端框架 css的外部樣式等,可以發現這些不受同源策略的限制可以載入跨...

09 ajax跨域問題,同源策略

有三個標籤允許跨域載入資源 ajax的傳輸方式 如果要處理 ajax 得到的資料,則需要使用 函式 beforesend error datafilter success complete 跨域問題,ajax返回值有哪幾個 1xx 資訊提示 2xx成功 3xx重定向 200,請求成功 206,請求內...

跨域訪問與同源策略

因為在同乙個瀏覽器視窗中能夠同時開啟多個 的頁面,而且它們都處於同乙個會話中,如果不禁止跨域訪問則會造成使用者隱私資料洩露和登入身份冒用的問題,所以瀏覽器會使用同源策略限制跨域訪問。跨域訪問被禁止有時會給應用開發帶來阻礙,但在符合特定條件時也有相應的方法在保證安全的情況下能夠解決跨域訪問的問題。在對...