本節內容:何為跨域?何為同源策略?
- 跨域:但是在實際的場景中,又確實有很多地方需要突破同源策略的限制,也就是我們常說的跨域
- 同源策略:為了保證用戶信息的安全,防止惡意網站竊取用戶數據,同源策略做了很嚴格的限制——只允許本域內的腳本讀寫本域內的資源
一、何為跨域?
說到跨域,有必要先了解一下同源策略。
1)同源策略
同源策略(Same origin policy)是由 NetScape 公司在1995年提出的一種安全策略;
同源策略只是一個約定,提出后被各個瀏覽器廠商采納,并以各自的方式實現了同源策略。
-
何為同源策略?
- 同源策略:是瀏覽器最核心也最基本的安全功能,會約束瀏覽器的行為;
- 同源策略會限制瀏覽器:只允許本域內的腳本讀寫本域內的資源,不允許訪問本域外的資源。
-
為何需要同源策略?
為保證用戶信息的安全,防止惡意網站竊取用戶數據,瀏覽器需要實現嚴格限制
例如:我剛登陸了某寶網,此時再去登陸 B 網站,B 網站就可以使用 JS 獲取到我的某寶賬戶信息,然后它做什么都可以了。
-
如何判斷是否同源?
判斷要素有三:協議、域名、端口號;
三者全部一致才視為同源,即屬于同一個域;否則視為非同源。
-
限制范圍
在非同源情況下,存在如下受限行為:
- 無法共享 cookie, localStorage, indexDB
- 無法操作彼此的 dom 元素
- 無法發送 ajax 請求
2)跨域
-
域
域(Domain)是Windows網絡中獨立運行的單位;
域之間相互訪問則需要建立信任關系,信任關系是連接在域與域之間的橋梁;
當一個域與其他域建立了信任關系后,2個域之間不但可以按需要相互進行管理,還可以跨網分配文件和打印機等設備資源,使不同的域之間實現網絡資源的共享與管理.
-
跨域
- 跨域
突破同源策略的限制,在兩個不同的域之間(非同源頁面)實現資源交互。
本域(同源)和跨域是一對,就像國內企業和跨國企業,這樣更形象理解跨域概念
- 跨域分類
1)使用 Ajax 引發的跨域問題
當調用 Ajax 時:調用 Ajax 發送請求的頁面 所在的域,和被請求頁面所在的域不一致
2)類似頁面嵌入 ifream 引起的跨域問題
當操作 ifream 內引入的元素時:ifream 所屬頁面的域,和 ifream 引入頁面的域不一致
自己分的類,為了方便記憶,剛接觸時還把它們弄混了
但本質都一樣,即:突破同源策略限制,請求域外資源
二、為何需要跨域?
- 在實際的場景中,確實有很多地方需要突破同源策略的限制,也就是我們常說的跨域
- 如果網站足夠簡單,一個網頁搞定,好吧這樣確實不需要跨域,但更多時候,我們需要它
- 例如:
- 我想要制作一個天氣預報軟件,就需要獲取氣象局的檢測信息
- 我想要制作一個音樂盒,就需要獲取音樂信息……