浏览器的同源限制解决方案
2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>
1.對于不同的二級域名中的cookie共享
php中的setcookie函數(shù)的第四個參數(shù),只寫一級域名即可,如:
2.網(wǎng)頁中用iframe嵌入一個不同源的網(wǎng)頁
不同源則雙方無法拿到對方的dom,即下面的語句會報(bào)錯:
方法一:利用js設(shè)置document.domain 實(shí)現(xiàn)跨域,前提條件:這兩個域名必須屬于同一個基礎(chǔ)域名!而且所用的協(xié)議,端口都要一致,否則會報(bào)"參數(shù)無效錯誤。"。
比如在:aaa.com的一個網(wǎng)頁(a.html)里面利用iframe引入了bbb.com里的一個網(wǎng)頁(b.html)。
這時在a.html里面可以看到b.html里的內(nèi)容,但是卻不能利用javascript來操作它。因?yàn)檫@兩個頁面屬于不同的域,在操作之前,js會檢測兩個頁面的域是否相等,如果相等,就允許其操作,如果不相等,就會拒絕操作。
這里也不可能把a(bǔ).html與b.html利用JS改成同一個域的。因?yàn)樗鼈兊幕A(chǔ)域名不相等。(強(qiáng)制用JS將它們改成相等的域的話會報(bào)"參數(shù)無效錯誤。")
有另一種情況,兩個子域名:
aaa.xxx.com
bbb.xxx.com
aaa里的一個網(wǎng)頁(a.html)引入了bbb 里的一個網(wǎng)頁(b.html),這時a.html里同樣是不能操作b.html里面的內(nèi)容的。因?yàn)閐ocument.domain不一樣,一個是aaa.xxx.com,另一個是bbb.xxx.com。這時我們就可以通過Javascript,將兩個頁面的domain改成一樣的,需要在a.html里與b.html里都加入代碼如下:
這樣這兩個頁面就可以互相操作了。也就是實(shí)現(xiàn)了同一基礎(chǔ)域名之間的"跨域"。
方法二:如果只是想在兩個窗口間傳遞數(shù)據(jù),可以利用url中的hash
父窗口可以把信息,寫入子窗口的hash中:
子窗口通過監(jiān)聽hashchange事件得到通知,獲取數(shù)據(jù):
window.onhashchange = function() {var message = window.location.hash;// ...}同樣的,子窗口也可以改變父窗口的片段標(biāo)識符:
?? ?parent.location.href= target + "#" + hash;?
方法三:利用html5提供的接口方法window.postMessage,在跨窗口通信中,允許這兩個窗口不同源。
父窗口http://aaa.com向子窗口http://bbb.com發(fā)消息,調(diào)用postMessage方法就可以了:
postMessage方法的第一個參數(shù)是具體的信息內(nèi)容,第二個參數(shù)是接收消息的窗口的源(origin),即"協(xié)議 + 域名 + 端口"。也可以設(shè)為*,表示不限制域名,向所有窗口發(fā)送。
子窗口向父窗口發(fā)送消息的寫法類似:
父窗口和子窗口都可以通過message事件,監(jiān)聽對方的消息:
?? ?window.addEventListener('message', function(e) {console.log(e.data);},false);//message事件的事件對象event,提供以下三個屬性://event.source:發(fā)送消息的窗口//event.origin: 消息發(fā)向的網(wǎng)址//event.data: 消息內(nèi)容3.通過ajax向不同的源請求數(shù)據(jù)
方法一:JSONP
它的基本思想是,網(wǎng)頁通過添加一個<script>元素,向服務(wù)器請求JSON數(shù)據(jù),這種做法不受同源政策限制;服務(wù)器收到請求后,將數(shù)據(jù)放在一個指定名字的回調(diào)函數(shù)里傳回來。但是它只能發(fā)送GET請求。
首先,網(wǎng)頁動態(tài)插入<script>元素,由它向跨源網(wǎng)址發(fā)出請求:
服務(wù)器收到這個請求以后,會將數(shù)據(jù)放在回調(diào)函數(shù)的參數(shù)位置,以字符串的形式返回:
由于<script>元素請求的腳本,直接作為代碼運(yùn)行。這時,只要瀏覽器定義了foo函數(shù),該函數(shù)就會立即執(zhí)行。
方法二:CORS
比較復(fù)雜 http://www.ruanyifeng.com/blog/2016/04/cors.html
轉(zhuǎn)載于:https://my.oschina.net/codespring/blog/715725
總結(jié)
以上是生活随笔為你收集整理的浏览器的同源限制解决方案的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: android studio 中 .9.
- 下一篇: bzoj1202[HNOI2005]狡猾