iT邦幫忙

2021 iThome 鐵人賽

DAY 18
0
自我挑戰組

登堂入室!前端工程師的觀念技術 _30_ 題系列 第 18

17. 解釋 Same-Origin Policy

Same-Origin Policy 同源政策


瀏覽器基於安全性的考量,在應用fetch API或是XHR(XMLHttpRequest)請求資源時,必須遵守 同源政策(Same-Origin Policy)

只有網站與呼叫的API同源時,才能成功存取資源,而不受限制。

相反地,如果網站與呼叫的API非同源,即使成功送出了request,瀏覽器也收到了response,瀏覽器會因為同源政策,拒絕將資源回傳給javaScript。

Same-Origin 同源


同源基本上得遵守三個條件:

  1. protocol 通訊協定相同-如http和https是兩種協定,所以為非同源。
  2. port 埠號相同 - HTTP的預設埠號是 80; HTTPS 的預設埠號是 443。
  3. domain 網域/主機位置相同

只要有一個不同都是非同源,比較以下的例子:

原網址
https://ithelp.ithome.com.tw/questions

比較
https://ithelp.ithome.com.tw/questions?tab=hot → 同源 (O)
http://ithelp.ithome.com.tw/questions → 協定不同,非同源 (X)
https://ithelp.ithome.com.tw:8080/questions → 埠號不同,非同源 (X)
https://cannothelp.ithome.com.tw/questions → 網域不同,非同源 (X)

Cross-origin network access 跨來源存取


非同源的請求就是進行跨來源存取,基於同源政策,瀏覽器不允許這樣的行為。

但我們還是得仰賴許多非同源的API,(實際上前幾天的範例也用了很多。)

這時可以使用 CORS(跨來源資源共用,Cross-Origin Resource Sharing) 標頭,就能讓瀏覽器允許跨來源存取的情況。

CORS


在同源政策下,藉由server在response裡加入Access-Control-Allow-Origin這個header,瀏覽器就會讀取這些資訊,讓程式接收到response。

網路應用程式所使用的 API 除非使用 CORS 標頭,否則只能請求與應用程式相同網域的 HTTP 資源。
跨來源資源共用(Cross-Origin Resource Sharing,簡稱 CORS)機制提供了網頁伺服器跨網域的存取控制,增加跨網域資料傳輸的安全性。

如果想要深入了解很推薦這兩篇文章:

【如內文有誤還請不吝指教>< 謝謝閱覽至此的各位:D】

參考資料:

-----正文結束-----

今天的題目好像不是那麼常見,但沒概念的話,接API會很難debug,所以還是幫自己簡單整理了一下。
明天寫JSOP。


上一篇
16. HTTP request methods ( 下 )--- PUT vs. PATCH
下一篇
18. 解釋 JSONP 如何運作
系列文
登堂入室!前端工程師的觀念技術 _30_ 題31

尚未有邦友留言

立即登入留言