摘要:了解跨域這件事,我們先看看導致會存在跨域問題的根源瀏覽器的同源策略瀏覽器的同源策略又是什么鬼好像了解一點,但是又說不清楚。請參考阮老師的跨域資源共享詳解
跨域的理解
跨域,顧名思義,即為請求了不同域的資源。
了解跨域這件事,我們先看看導致會存在跨域問題的根源:瀏覽器的同源策略
瀏覽器的同源策略又是什么鬼? 好像了解一點,但是又說不清楚。這次我們就來詳細探索一下。
聲明一下,本文是參考眾多其他有關跨域文章結合自己技術認識所做的記錄,請與
瀏覽器同源政策及其規避方法參考著看更加合適。
MDN
維基百科:
In computing, the same-origin policy is an important concept in the web application security model. Under the policy, a web browser permits scripts contained in a first web page to access data in a second web page, but only if both web pages have the same origin. An origin is defined as a combination of URI scheme, host name, and port number. This policy prevents a malicious script on one page from obtaining access to sensitive data on another web page through that page"s Document Object Model.
簡單翻譯一下:
在web應用安全模型中,同源策略是一個重要的概念。在該策略下,僅倆個頁面有相同的源, web瀏覽器才允許包含在第一個頁面中的腳本訪問第二個web頁面的數據。源被定義為 URI協議,主機名,端口號的組合。該策略阻止了一個頁面的惡意腳本通過文檔對象模型(DOM)獲得其他的web頁面的敏感數據.
那為什么會有同源策略呢,可以參考一下,CSRF這篇文章談到CSRF這種情況。
那哪些數據會被限制呢?
敏感數據一般指的是瀏覽器中的Cookies, SessionStorage, LocalStorage, IndexedDB數據, CacheStorage, ApplicationCache...;
阮一峰老師還對同源策略對于非同源,限制的行為做了歸納:
“ 如果非同源,共有三種行為受到限制。 (1) Cookie、LocalStorage 和 IndexDB 無法讀取。 (2) DOM 無法獲得。 (3) AJAX 請求不能發送。 雖然這些限制是必要的,但是有時很不方便,合理的用途也受到影響。下面,我將詳細介紹,如何規避上面三種限制。 ”以下對阮老師總結的方法進行測試 Cookies
瀏覽器允許通過設置document.domain共享 Cookie。
document.domain的寫操作是有要求的。只能寫入基礎域名和當前域名,其他域名是無法寫入的,所以domain這種方式只能在親子域名之間共享cookies
// 由于還沒有相關資源(三級域名資源,域名資源),沒有做驗證
頁面1 localhost:8080的頁面,包含一個頁面2 (iframe = http://localhost:8081); 頁面2中訪問window.parent.document報跨源錯誤 在頁面2中window.parent可以訪問,但是在iframe中訪問獲取到的window.parent對象中屬性缺少了有關DOM的部分,而直接在頁面1中查看window對象,可以看到document屬性對象,而使用夸源window.parent無法獲取document屬性對象
片段識別符(fragment identifier)
window.name
跨文檔通信API(Cross-document messaging)
片段識別符 fragment identifier所以這種方式,無論是否夸源,父窗口可以通過更改子窗口的iframe的src中的hash值來傳遞數據給子窗口;
但是 在存在跨源的情況下,子窗口獲取parent.location.href(可寫不可讀)讀操作會報跨源錯誤,所以子窗口課件寫入url的方式傳遞數據給父窗口。
片段識別符方式可以父傳子,子傳父。
document.getElementById("iframe").contentWindow.name
訪問出錯,所以無法跨域
頁面1 調用iframe的iframe.contentWindow.postMessage(data,"http://localhost:8081")
頁面2 調用window的 window.parent.postMessage(data,"http://localhost:8080")
“ 同源政策規定,AJAX請求只能發給同源的網址,否則就報錯。 除了架設服務器代理(瀏覽器請求同源服務器,再由后者請求外部服務),有三種方法規避這個限制。 JSONP WebSocket CORS ”JSONP
// 客戶端(瀏覽器頁面) function addScriptTag(src) { var script = document.createElement("script"); script.setAttribute("type","text/javascript"); script.src = src; document.body.appendChild(script); } window.onload = function () { addScriptTag("http://example.com/ip?callback=foo");//需要指定回調函數名 } function foo(data) { console.log("Your public IP address is: " + data.ip); }; //服務端 foo({ "ip": "8.8.8.8" });CORS
CORS是跨源資源分享(Cross-Origin Resource Sharing)的縮寫。它是W3C標準,是跨源AJAX請求的根本解決方法。相比JSONP只能發GET請求,CORS允許任何類型的請求。
請參考 阮老師的跨域資源共享 CORS 詳解
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/95047.html
摘要:前言騰訊一面,相比阿里一面來說,騰訊一面先給打電話預定時間,這也給了我們這些面試者去準備的時間。其實閉包也就是指有權訪問另一個函數作用域的函數而已。常用的創建閉包的方法就是在函數內部創建另一個函數。 前言 騰訊一面,相比阿里一面來說,騰訊一面先給打電話預定時間,這也給了我們這些面試者去準備的時間。但是也正是因為這種確定性,也有在等待電話的時候的心情的忐忑。 背景 我是一名大三學生,大一...
摘要:跨域完全講解今天在慕課網上學習了跨域完全講解我在收集面試題的時候其實就已經有過跨域的問題的了,當時候知道了為什么會存在跨域,以及跨域解決的方案有哪些,今天隨著課程的學習,又加深了跨域的理解,以此記錄下來。 AJAX跨域完全講解 今天在慕課網上學習了AJAX跨域完全講解:https://www.imooc.com/learn/947 我在收集AJAX面試題的時候其實就已經有過AJAX跨域...
摘要:跨域完全講解今天在慕課網上學習了跨域完全講解我在收集面試題的時候其實就已經有過跨域的問題的了,當時候知道了為什么會存在跨域,以及跨域解決的方案有哪些,今天隨著課程的學習,又加深了跨域的理解,以此記錄下來。 AJAX跨域完全講解 今天在慕課網上學習了AJAX跨域完全講解:https://www.imooc.com/learn/947 我在收集AJAX面試題的時候其實就已經有過AJAX跨域...
閱讀 4723·2021-11-15 11:39
閱讀 2691·2021-11-11 16:55
閱讀 2200·2021-10-25 09:44
閱讀 3504·2021-09-22 16:02
閱讀 2433·2019-08-30 15:55
閱讀 3122·2019-08-30 13:46
閱讀 2656·2019-08-30 13:15
閱讀 1944·2019-08-30 11:12