跨域之一:同源策略和跨域

本節內容:何為跨域?何為同源策略?

  • 跨域:但是在實際的場景中,又確實有很多地方需要突破同源策略的限制,也就是我們常說的跨域
  • 同源策略:為了保證用戶信息的安全,防止惡意網站竊取用戶數據,同源策略做了很嚴格的限制——只允許本域內的腳本讀寫本域內的資源

一、何為跨域?

說到跨域,有必要先了解一下同源策略。

1)同源策略

同源策略(Same origin policy)是由 NetScape 公司在1995年提出的一種安全策略;
同源策略只是一個約定,提出后被各個瀏覽器廠商采納,并以各自的方式實現了同源策略。
  • 何為同源策略?
  • 同源策略:是瀏覽器最核心也最基本的安全功能,會約束瀏覽器的行為;
  • 同源策略會限制瀏覽器:只允許本域內的腳本讀寫本域內的資源,不允許訪問本域外的資源。

  • 為何需要同源策略?
  • 為保證用戶信息的安全,防止惡意網站竊取用戶數據,瀏覽器需要實現嚴格限制

  • 例如:我剛登陸了某寶網,此時再去登陸 B 網站,B 網站就可以使用 JS 獲取到我的某寶賬戶信息,然后它做什么都可以了。

  • 如何判斷是否同源?
  • 判斷要素有三:協議、域名、端口號;

  • 三者全部一致才視為同源,即屬于同一個域;否則視為非同源。

  • 限制范圍

在非同源情況下,存在如下受限行為:

  1. 無法共享 cookie, localStorage, indexDB
  2. 無法操作彼此的 dom 元素
  3. 無法發送 ajax 請求

2)跨域

域(Domain)是Windows網絡中獨立運行的單位;
域之間相互訪問則需要建立信任關系,信任關系是連接在域與域之間的橋梁;
當一個域與其他域建立了信任關系后,2個域之間不但可以按需要相互進行管理,還可以跨網分配文件和打印機等設備資源,使不同的域之間實現網絡資源的共享與管理.

  • 跨域
  • 跨域
    突破同源策略的限制,在兩個不同的域之間(非同源頁面)實現資源交互。
本域(同源)和跨域是一對,就像國內企業和跨國企業,這樣更形象理解跨域概念
  • 跨域分類
    1)使用 Ajax 引發的跨域問題
    當調用 Ajax 時:調用 Ajax 發送請求的頁面 所在的域,和被請求頁面所在的域不一致
    2)類似頁面嵌入 ifream 引起的跨域問題
    當操作 ifream 內引入的元素時:ifream 所屬頁面的域,和 ifream 引入頁面的域不一致
自己分的類,為了方便記憶,剛接觸時還把它們弄混了
但本質都一樣,即:突破同源策略限制,請求域外資源

二、為何需要跨域?

  • 在實際的場景中,確實有很多地方需要突破同源策略的限制,也就是我們常說的跨域
  • 如果網站足夠簡單,一個網頁搞定,好吧這樣確實不需要跨域,但更多時候,我們需要它
  • 例如:
  • 我想要制作一個天氣預報軟件,就需要獲取氣象局的檢測信息
  • 我想要制作一個音樂盒,就需要獲取音樂信息……

三、跨域實現方法?

1. JSONP
2. CORS
3. 降域
4. postMessage

具體的實現方法,移步到這里!

1. 跨域之二:JSONP 和 CORS
2. 跨域之三:降域 和 postMessage

本文章著作權歸饑人谷和本人所有,轉載須說明來源!
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 跨域問題是個老生常談的問題,在WEB開發中會經常聽到,但是很多時候的開發并不涉及跨域問題什么的,所以一般也不會去深...
    __七把刀__閱讀 2,666評論 0 7
  • 本文先簡要介紹前端開發中的瀏覽器同源政策;然后在跨域問題中,具體介紹跨域ajax請求的應用場景與實現方案。 什么是...
    AlienZHOU閱讀 9,399評論 4 19
  • 1.什么是同源策略 1.要了解同源策略,我們必須先知道源即orgin 以百度頁面為例,谷歌瀏覽器打開控制臺:輸入l...
    GarenWang閱讀 1,471評論 2 8
  • 第一次領略“閑”的旨趣,大概是在一篇叫做《湖心亭看雪》的初中課文里。“……余住西湖。大雪三日,湖中人鳥聲俱絕...
    不雕閱讀 492評論 1 5
  • 找到那個可以和你攜手走一輩子的人,不易。 昨晚眾望所歸的《翻譯官》落下帷幕,對于“加菲”cp最后何去何從想必成了大...
    北有顧執閱讀 3,812評論 0 5