一文梳理同源策略與跨域技術

2022-03-17 13:22:28 字數 2113 閱讀 8577

同源策略是乙個重要的安全策略,它用於限制乙個origin的文件或者它載入的指令碼如何能與另乙個源的資源進行互動。它能幫助阻隔惡意文件,減少可能被攻擊的媒介。

1.1何謂同源

如果兩個 url 的 protocol、port (如果有指定的話)和 host 都相同的話,則這兩個 url 是同源。這個方案也被稱為「協議/主機/埠元組」,或者直接是 「元組」。

下表給出了與 url的源進行對比的示例:

url結果

原因

同源只有路徑不同

同源只有路徑不同

失敗協議不同

失敗埠不同 (http://預設埠是80)

失敗主機不同

隨著網際網路的發展,"同源政策"越來越嚴格。目前,如果非同源,共有三種行為受到限制。

(1) cookie、localstorage 和 indexdb 無法讀取。

(2) dom 無法獲得。

(3) ajax 請求不能傳送。

雖然這些限制是必要的,但是有時很不方便,合理的用途也受到影響。

2.1 何謂跨域?

跨域問題是由於瀏覽器為了防止csrf(跨站請求偽造)攻擊,避免惡意攻擊而帶來的風險而採取的同源策略限制。當乙個頁面中使用xmlhttprequest物件傳送http請求時(xhr請求),必須保證當前頁面和請求的物件是同源的

2.2 jsonp跨域

jsonp的原理:靜態資源請求不受同源策略影響。具體:瀏覽器只對xhr(xmlhttprequest)請求有同源請求限制,而對script標籤src屬性、link標籤ref屬性和img標籤src屬性沒有這種限制,利用這個「漏洞」就可以很好的解決跨域請求.

jsonp 由兩部分組成:**函式和資料。**函式是當響應到來時應該在頁面中呼叫的函式。**

函式的名字一般是在請求中指定的。而資料就是傳入**函式中的json資料。

jsonp 是通過動態複製**後端部分

const websocket = require("ws");const server = new websocket.server();server.on("connection", function(socket) );});
總結

2.6 nginx反向**

這裡需要說明的是:跨域是瀏覽器行為,不是伺服器行為。同源策略僅是針對瀏覽器的安全策略。伺服器端呼叫http介面只是使用http協議,不需要同源策略,也就不存在跨域問題。

實際上,請求已經到達伺服器了,只不過在回來的時候被瀏覽器限制了

實現思路:通過nginx配置乙個**伺服器網域名稱與發出請求網域名稱相同,埠不同,反向**訪問目標網域名稱。

背景:domain1需要跨域訪問domain2

server 

}

同源策略僅僅是針對瀏覽器的安全策略,跨域是瀏覽器行為,如果兩個 url 的 protocol、port (如果有指定的話)和 host 都相同的話,則這兩個 url 是同源。現在有許多的跨域方案可供大家選擇,本文僅僅選擇了jsonp、cors、postmessage等6種跨域技術進行了闡述,希望能在梳理自己知識點的同時幫助到一些人。

參考文章:

jsonp完美解決跨域問題,簡單

跨域解決方案實踐cors及jsonp

跨資源共享cors詳解-阮一峰

瀏覽器同源政策及其規避方法-阮一峰

postmessage濫用導致的安全問題

10種跨域解決方案(附終極大招)

websocket教程-阮一峰

9種常見的前端跨域解決方案

跨域訪問與同源策略

因為在同乙個瀏覽器視窗中能夠同時開啟多個 的頁面,而且它們都處於同乙個會話中,如果不禁止跨域訪問則會造成使用者隱私資料洩露和登入身份冒用的問題,所以瀏覽器會使用同源策略限制跨域訪問。跨域訪問被禁止有時會給應用開發帶來阻礙,但在符合特定條件時也有相應的方法在保證安全的情況下能夠解決跨域訪問的問題。在對...

同源策略與跨域的一點了解

協議 網域名稱 埠 全部一致則說明同源!下表給出了相對同源檢測的示例 url結果 原因成功 只有路徑不同 成功 只有路徑不同 失敗 不同協議 https和http 失敗 不同埠 http 80是預設的 失敗 不同網域名稱 news和store 由同乙個源載入的文件或指令碼禁止訪問另乙個源的資源。出於...

瀏覽器同源策略與ajax跨域方法彙總

什麼是同源策略 要了解同源策略,首先得理解 源 在這個語境下,源 origin 其實就是指的url。所以,我們需要先理解url的組成。看看這個url 我們可以將它拆解為下面幾個部分協議 網域名稱和路徑 而對於乙個更為完整的url 而同源就是指url中protocol協議 host網域名稱 port埠...