跨域?如何解決?同源策略?

Du9191發表於2022-05-03

跨域:

當前頁面中的某個介面,請求的地址和當前頁面的地址中,協議、域名、埠號有一項不同就是發生了跨域請求

原因:

遊覽器為了保護網頁的安全,同源協議策略,如果缺少了同源策略,遊覽器很容易受到XSS、CSRF等攻擊

跨域報錯如下:

 

跨域解決方案:

  • JSONP(a、img)

使用script標籤,利用其可以跨域請求資源,將回撥函式作為引數拼接到url上。

後端收到請求後,呼叫該回撥函式,並將資料作為引數返回

響應頭返回文件型別應設為javascript

缺點是隻支援GET請求,安全性差可能會遭受XSS攻擊

JSONP和ajax都是向伺服器端傳送請求,但Ajax屬於同源策略,JSONP屬於非同源策略

  • CORS

通過後端設定允許跨域實現

response.setHeader('Access-Control-Allow-Origin','*');

response.setHeader('Access-Control-Allow-Origin','GET, PUT, OPTIONS, POST')

  • node中介軟體,nginx反向代理

跨域限制時,遊覽器不能跨域訪問伺服器,node中介軟體,nginx反向代理,都是讓請求發給代理伺服器,靜態頁面和代理伺服器是同源的,代理伺服器再向後端伺服器傳送請求,同源限制對伺服器不加限制

(中介軟體就是一種功能的封裝方式,就是封裝在程式中處理http請求的功能、Nginx (engine x) 是一個高效能的HTTP和反向代理web伺服器)

    • 代理伺服器接受客戶端請求,轉發請求給後端伺服器
    • 代理伺服器接收來自後端的響應,轉發給客戶端
  • postMessage

H5新增API,通過傳送和接收API實現跨域通訊,可用於解決:

  頁面和其開啟的新視窗的資料傳遞

  多視窗之間的資訊傳遞

  頁面與巢狀的iframe訊息傳遞

  如上三個場景的跨域資料傳遞

  • webSocket

websocket是HTML5的一個持久化協議,實現了遊覽器和伺服器之間的全雙工通行信,也是解決跨域請求的一種方案

websocket和HTTP都是應用層協議,都基於TCP協議

webscoket是一種雙向通訊協議,在建立連線(此時需要藉助HTTP協議之後就與HTTP無關了)後

webscoket的客戶端和伺服器端都能主動向對方傳送或接受資料

  • window.name + iframe
  • location.hash + iframe
  • document.domain +iframe

跨域場景:

前後端分離開發,請求第三方介面

同源策略:

  • 定義

當兩個url的協議、域名、埠號相同時這兩個url就是同源的,同源的兩個url間可以進行相互資源訪問和操作DOM

不同源的url之間進行資源訪問就會受到遊覽器的安全策略限制,這就是同源策略

  • 體現

DOM:同源策略限制不同源站點之間JavaScript指令碼對當前DOM物件的讀寫操作

Web資料:同源策略限制不同源站點訪問當前站點的cookie、sessionStorage、localStorage

網路:同源策略限制通過XMLHTTPRequest等方式將當前站點的內容傳送至不同源站點

 

 

 

總結:

  • CORS支援所有型別的HTTP請求,是跨域請求的根本解決方案
  • JSONP只支援GET請求,優勢在於支援老式遊覽器和不支援CORS的網站請求資料
  • Node中介軟體和nginx,都主要通過同源策略對遊覽器不加限制的原理

參考:

九種跨域實現

同源策略

相關文章