前端筆記之跨域

跨域

Q1：跨域的概念

A1：跨域指的是隻要協議（protocol）、域名（host）、埠號（port）有任何一個不同，都被當做不同的域。而由於受到瀏覽器的同源策略的限制，無法正常進行互動通訊。之所以會產生這種問題，思考下，要是隨便引用外部檔案，不同標籤下的頁面彼此引用，瀏覽器會懵逼的。
Q2：為什麼會出現跨域問題？
A2：由於瀏覽器的同源策略限制，瀏覽器會拒絕跨域請求。                                             嚴格來說，瀏覽器並不是拒絕所有的跨域請求，實際上只拒絕跨域的讀操作。看下瀏覽器的同源策略時如何執行的。

• 通常瀏覽器允許跨域寫操作（Cross-Origin writes），例如連結、重定向
• 通常瀏覽器允許跨域資源嵌入（Cross-Origin embedding），例如img、script標籤
• 通常瀏覽器拒絕跨域讀操作（Cross-Origin reads）。

Q3：什麼才算做跨域？

A3：非同源請求，都是跨域。同源：如果兩個頁面擁有相同的協議、域名、埠，那麼這兩個頁面屬於用一個源(origin)。

跨域場景：

URL 主機(http://www.a.com)        是否跨域            說明
http://www.a.com/a.js             否                 同源，在同一域名下

https://www.a.com/b.js            是                 協議不同

http://www.a.com:8001/c.js        是                 埠不同

http://a.com/d.js                 是                 主機不同（二級域名不同）

http://amd.a.com/d.html           是                 同上，一級域名相同，二級不同

http://81.235.221.12/a.html       是                 域名和對應的域名IP也不在相同的源下
複製程式碼

同源策略

MDN 解釋： 同源策略限制了從同一個源載入的文件或指令碼如何與來自另一個源的資源進行互動。這是一個用於隔離潛在惡意檔案的重要安全機制。

瀏覽器的同源策略的目的就是為了防止 XSS，CSRF 等惡意攻擊。