解決跨域的具體操作

2021-08-20 07:44:56 字數 3404 閱讀 7783

最近做專案的時候遇到了一些跨域問題,雖然網上對於跨域的問題分享還挺多的。不過當我實際遇到的時候還是有點懵。趁專案剛上線完,寫篇文章總結下。

瀏覽器的同源策略會導致跨域,這裡同源策略又分為以下兩種

只要協議、網域名稱、埠有任何乙個不同,都被當作是不同的域,之間的請求就是跨域操作。

了解完跨域之後,想必大家都會有這麼乙個思考,為什麼要有跨域的限制,瀏覽器這麼做是出於何種原因呢。其實仔細想一想就會明白,跨域限制主要是為了安全考慮。

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.comb頁面為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第一次使用...