iT邦幫忙

2023 iThome 鐵人賽

DAY 9
0
自我挑戰組

菜鳥建立自信心系列 第 9

跨來源資源共用(CORS)

  • 分享至 

  • xImage
  •  

CORS 代表跨來源資源共用(Cross-Origin Resource Sharing)。它是一種瀏覽器的機制,用於限制網頁應用程式在不同來源(主機host、協定protocol、端口port)之間的資源共用。這是出於安全考量,以確保一個網頁應用程式只能請求和存取它自己的來源資源,而不容易被其他不受信任的網站濫用。

講到CORS就不得不提到同源政策

同源政策(Same-Origin Policy)
同源政策是一個瀏覽器安全機制,用於限制在網頁中的JavaScript程式碼如何與來自不同來源的資源進行交互。來源(origin)通常由協定(protocol)、主機(host)、和端口(port)組成,只有當兩個網頁的來源完全相同時,它們就被認為是同源的,否則就是跨源的。

  1. 協定(protocol):這指的是URL中的協定部分,通常是"http"或"https"。同一個來源的資源的協定必須完全一致,否則就被視為不同的來源。

  2. 主機(host):這是URL中的主機名稱或IP地址部分。同一個來源的資源的主機部分必須相同,包括子域名(subdomain)。

  3. 端口(port):這是URL中的端口號部分,通常在冒號後面指定,例如":80"或":443"。如果指定了端口,則同一個來源的資源的端口號也必須相同,如果未指定端口,則使用默認的端口號(http默認為80,https默認為443)。

同源政策的主要目的是確保網站的資源只能被它自己的網站訪問,以防止惡意網站在瀏覽器中執行釣魚攻擊、盜取用戶敏感信息等不當行為。以下是一個例子來說明同源政策:

假設現在有兩個網站,網站A是https://example.com,網站B是https://malicious.com

以網站A做例子,先忽略網站B
https://example.com網站的JavaScript程式碼中嘗試訪問https://example.com/secret上的資源,這是同源,被允許的,因為它們的來源相同。

URL 是否同源 原因
https://example.com/secret
http//example.com 不同協定protocol
https://example.com:6000 不同端口port
https://happy.com 不同主機host

再來,以網站B做例子
如果在https://malicious.com上的JavaScript代碼嘗試訪問https://malicious.com/evil上的資源,這也是允許的,因為它們的來源相同。

和同源的相反的情況就是
跨源情況(Cross-Origin Situation)
跨源情況下:
如果在https://example.com的JavaScript代碼中嘗試訪問https://malicious.com/evil上的資源,這就會違反同源政策,瀏覽器會阻止這樣的請求,因為它們的來源不同。這樣做可以防止惡意網站對其他網站的資源進行未授權的訪問。

用一個簡單的例子來解釋CORS跨來源資源共用:

網站Ahttps://example.com並且使用者在該網站上運行JavaScript程式碼,該程式碼嘗試從網站B是https://malicious.com上請求資源,例如JSON數據。
因為有同源政策(Same-Origin Policy),瀏覽器默認情況下不允許這種跨來源請求,因為網站A和網站B不屬於相同的來源。
那CORS的用途是什麼呢?
CORS可以允許網站A在瀏覽器中請求網站B的資源,但是需要網站B明確地設置CORS規則以允許這種跨來源請求。
有機會的話,未來繼續說明CORS規則。

CORS是增強瀏覽器的安全性,同時允許網站之間進行有限的跨來源資源共用。
以下是CORS的主要目的:

  1. 安全性:CORS旨在防止跨站請求偽造(Cross-Site Request Forgery,CSRF)和跨站點腳本攻擊(Cross-Site Scripting,XSS)等安全攻擊。它確保網頁僅能訪問來自相同來源的資源,防止惡意網站在瀏覽器中執行不當操作。

  2. 防止資訊外洩:CORS可以防止用戶的敏感資訊在未授權的情況下被其他網站訪問。這可以通過僅允許特定來源訪問資源來實現。

  3. 資源共用:儘管CORS強調安全性,但它同時允許網站之間進行一定程度的資源共用。這是通過在伺服器端設置CORS標頭來實現的,使伺服器可以指定哪些來源網站被允許訪問它的資源。

  4. 跨域API請求:CORS使得跨網域的API請求變得可能。這對於網站之間的合作和資源共用非常重要。例如,一個前端網站可以通過CORS設置來訪問另一個後端API服務,以獲取數據或執行操作。


上一篇
什麼是SOLID? 程式設計的重要原則
下一篇
CORS運作方式 - 簡單請求(Simple requests)
系列文
菜鳥建立自信心30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言