最近做專案的時候遇到了一些跨域問題,雖然網上對於跨域的問題分享還挺多的。不過當我實際遇到的時候還是有點懵。趁專案剛上線完,寫篇文章總結下。
瀏覽器的同源策略會導致跨域,這裡同源策略又分為以下兩種
只要協議、網域名稱、埠有任何乙個不同,都被當作是不同的域,之間的請求就是跨域操作。了解完跨域之後,想必大家都會有這麼乙個思考,為什麼要有跨域的限制,瀏覽器這麼做是出於何種原因呢。其實仔細想一想就會明白,跨域限制主要是為了安全考慮。
ajax同源策略主要用來防止csrf攻擊。如果沒有ajax同源策略,相當危險,我們發起的每一次http請求都會帶上請求位址對應的cookie,那麼可以做如下攻擊:
使用者登入了自己的銀行頁面,
向使用者的cookie中新增使用者標識。
使用者瀏覽了惡意頁面。執行了頁面中的惡意ajax請求**。
向
發起ajax http請求,請求會預設把
對應cookie也同時傳送過去。
銀行頁面從傳送的cookie中提取使用者標識,驗證使用者無誤,response中返回請求資料。此時資料就洩露了。
而且由於ajax在後台執行,使用者無法感知這一過程。
dom同源策略也一樣,如果iframe之間可以跨域訪問,可以這樣攻擊:
做乙個假**,裡面用iframe巢狀乙個銀行**。
把iframe寬高啥的調整到頁面全部,這樣使用者進來除了網域名稱,別的部分和銀行的**沒有任何差別。
這時如果使用者輸入賬號密碼,我們的主**可以跨域訪問到的dom節點,就可以拿到使用者的輸入了,那麼就完成了一次攻擊。
所以說有了跨域跨域限制之後,我們才能更安全的上網了。
跨域資源共享
cors是乙個w3c標準,全稱是」跨域資源共享」(cross-origin resource sharing)。
對於這個方式,阮一峰老師總結的文章特別好,希望深入了解的可以看一下。
這裡我就簡單的說一說大體流程。
對於客戶端,我們還是正常使用xhr物件傳送ajax請求。
唯一需要注意的是,我們需要設定我們的xhr屬性withcredentials
為true,不然的話,cookie是帶不過去的哦,設定:xhr.withcredentials = true
;
對於伺服器端,需要在 response header中設定如下兩個字段:
access-control-allow-origin:
access-control-allow-credentials:true
這樣,我們就可以跨域請求介面了。
jsonp實現跨域
基本原理就是通過動態建立script標籤,然後利用src屬性進行跨域。
這麼說比較模糊,我們來看個例子:
當然,這個只是乙個原理演示,實際情況下,我們需要動態建立這個fun函式,並且在資料返回的時候銷毀它。
因為在實際使用的時候,我們用的各種ajax庫,基本都包含了jsonp的封裝,不過我們還是要知道一下原理,不然就不知道為什麼jsonp不能發post請求了~
伺服器**
瀏覽器有跨域限制,但是伺服器不存在跨域問題,所以可以由伺服器請求所要域的資源再返回給客戶端。
伺服器**是萬能的。document.domain來跨子域
對於主網域名稱相同,而子網域名稱不同的情況,可以使用document.domain來跨域
這種方式非常適用於iframe跨域的情況,直接看例子吧
比如a頁面位址為a.yourhost.com
b頁面為b.yourhost.com
。
這樣就可以通過分別給兩個頁面設定document.domain = yourhost.com
來實現跨域。
之後,就可以通過 parent 或者 window[『iframename』]等方式去拿到iframe的window物件了。
使用window.name進行跨域
window.name跨域同樣是受到同源策略限制,父框架和子框架的src必須指向統一網域名稱。window.name的優勢在於,name的值在不同的頁面(或者不同的網域名稱),載入後仍然存在,除非你顯示的更改。並且支援的長度達到2m.
**如下:
**如下:window.location.hash跨域
location.hash方式跨域,是子框架具有修改父框架src的hash值,通過這個屬性進行傳遞資料,且更改hash值,頁面不會重新整理。但是傳遞的資料的位元組數是有限的。
注意:父子框架受同源策略的限制
window.top方法可以訪問最頂層的window物件,可以取到最頂層window物件的屬性和方法。這樣子框架就可以操作父頁面的互動了。window.parent可以得到父框架的window物件。
使用postmessage實現頁面之間通訊
資訊傳遞除了客戶端與伺服器之前的傳遞,還存在以下幾個問題:
1.頁面和新開的視窗的資料互動。
2.多視窗之間的資料互動。
3.頁面與所巢狀的iframe之間的資訊傳遞。
window.postmessage是乙個html5的api,允許兩個視窗之間進行跨域傳送訊息。這個應該就是以後解決dom跨域通用方法了,具體可以參照mdn。
補充: 其實還有一些方法,比如window.name和location.hash。就很適用於iframe的跨域,不過iframe用的比較少了,所以這些方法也就有點過時了。
這些就是我對跨域的了解了,實際情況下,一般用cors,jsonp等常見方法就可以了。不過遇到了一些非常規情況,我們還是需要知道有更多的方法可以選擇的
Spring 具體操作
1.建立物件 ioc建立物件的方式1.預設使用無參構造建立物件 2.在呼叫 getbean 方法時,配置檔案內的所有物件都被建立 使用有參構造建立物件 xmlns xmlns xsi xsi schemalocation user class com.liye.pojo.user name age ...
MFC ListControl 具體操作詳細用法
1 listcontrol初始化 listcontrol初始化 新增在虛函式cdlg oninitdialog 中 m mylist.modifystyle 0l,lvs showselalways dword dwstyle m mylist.getextendedstyle dwstyle lv...
github fork工作(具體操作)
更新於20201110 git add remote upstream url.git 遠端庫,公共開發倉庫 git add remote localhost url.git 本地庫,自己倉庫切換到轉殖的資料夾 cd 在本地建立乙個新的分支,用來提交 git checkout b cq b第一次使用...