跨域，相識一下

2023年5月16日 143次阅读 来源: 言月

跨域的明白

跨域，望文生義，即為請求了差別域的資本。
相識跨域這件事，我們先看看致使會存在跨域題目的泉源：瀏覽器的同源戰略
瀏覽器的同源戰略又是什麼鬼？ 彷佛相識一點，然則又說不清楚。此次我們就來細緻探究一下。

聲明一下，本文是參考浩瀚其他有關跨域文章連繫本身手藝熟悉所做的紀錄，請與
瀏覽器同源政策及其躲避要領參考着看越發適宜。

同源戰略：(the same-origin policy)

MDN
維基百科：
In computing, the same-origin policy is an important concept in the web application security model. Under the policy, a web browser permits scripts contained in a first web page to access data in a second web page, but only if both web pages have the same origin. An origin is defined as a combination of URI scheme, host name, and port number. This policy prevents a malicious script on one page from obtaining access to sensitive data on another web page through that page’s Document Object Model.
簡樸翻譯一下：
在web運用平安模子中，同源戰略是一個主要的觀點。在該戰略下，僅倆個頁面有雷同的源, web瀏覽器才許可包括在第一個頁面中的劇本接見第二個web頁面的數據。源被定義為 URI協定，主機名，端口號的組合。該戰略阻撓了一個頁面的歹意劇本經由過程文檔對象模子(DOM)取得其他的web頁面的敏感數據.
那為何會有同源戰略呢，能夠參考一下，CSRF這篇文章談到CSRF這類狀況。
那哪些數據會被限定呢？
敏感數據平常指的是瀏覽器中的Cookies, SessionStorage, LocalStorage, IndexedDB數據, CacheStorage, ApplicationCache…；

同源戰略限定局限

阮一峰先生還對同源戰略關於非同源，限定的行動做了歸結：

“
假如非同源，共有三種行動受到限定。
（1） Cookie、LocalStorage 和 IndexDB 沒法讀取。
（2） DOM 沒法取得。
（3） AJAX 請求不能發送。
 雖然這些限定是必要的，然則偶然很不輕易，合理的用處也受到影響。下面，我將細緻引見，怎樣躲避上面三種限定。
”

以下對阮先生總結的要領舉行測試

Cookies

瀏覽器許可經由過程設置document.domain同享 Cookie。
document.domain的寫操縱是有請求的。只能寫入基本域名和當前域名，其他域名是沒法寫入的，所以domain這類體式格局只能在親子域名之間同享cookies
// 因為還沒有相干資本（三級域名資本，域名資本），沒有做考證

iframe

頁面1 localhost:8080的頁面，包括一個頁面2 (iframe = http://localhost:8081);
頁面2中接見window.parent.document報跨源毛病
在頁面2中window.parent能夠接見,然則在iframe中接見獵取到的window.parent對象中屬性缺少了有關DOM的部份，而直接在頁面1中檢察window對象，能夠看到document屬性對象，而運用誇源window.parent沒法獵取document屬性對象
  • 片斷辨認符（fragment identifier）
  • window.name
  • 跨文檔通訊API（Cross-document messaging）

片斷辨認符 fragment identifier

所以這類體式格局，不管是不是誇源，父窗口能夠經由過程變動子窗口的iframe的src中的hash值來通報數據給子窗口;
然則 在存在跨源的狀況下，子窗口獵取parent.location.href(可寫不可讀)讀操縱會報跨源毛病，所以子窗口課件寫入url的體式格局通報數據給父窗口。
片斷辨認符體式格局能夠父傳子，子傳父。

window.name

document.getElementById(‘iframe’).contentWindow.name
接見失足，所以沒法跨域

window.postMessage

頁面1 挪用iframe的iframe.contentWindow.postMessage(data,”http://localhost:8081″)
頁面2 挪用window的 window.parent.postMessage(data,’http://localhost:8080′)

AJAX (最常見到的狀況)

“
同源政策規定，AJAX請求只能發給同源的網址，不然就報錯。
除了架設效勞器代辦（瀏覽器請求同源效勞器，再由後者請求外部效勞），有三種要領躲避這個限定。

JSONP
WebSocket
CORS
”

JSONP

// 客戶端（瀏覽器頁面）
function addScriptTag(src) {
  var script = document.createElement('script');
  script.setAttribute("type","text/javascript");
  script.src = src;
  document.body.appendChild(script);
}

window.onload = function () {
  addScriptTag('http://example.com/ip?callback=foo');//須要指定回調函數名
}

function foo(data) {
  console.log('Your public IP address is: ' + data.ip);
};


//效勞端
foo({
  "ip": "8.8.8.8"
});

CORS

CORS是跨源資本分享（Cross-Origin Resource Sharing）的縮寫。它是W3C規範，是跨源AJAX請求的基礎解決要領。比擬JSONP只能發GET請求，CORS許可任何範例的請求。
請參考 阮先生的跨域資本同享 CORS 詳解

    原文作者：言月
    原文地址: https://segmentfault.com/a/1190000014891342
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞