CORS跨來源資源共用

發表於 更新於 分類於

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服務，以獲取數據或執行操作。