Who the hell are you CORS

前言

經過我的研究，CORS（跨來源資源共用，英語：Cross-origin resource sharing）是一個非常深的坑，但我這裡會簡單介紹它的概念，如果各位有興趣，可以再參考我的資源。

簡單來說，當一個網站使用 API 請求另一個來源的資源時，瀏覽器的安全機制通常會阻止這種行為，這就是所謂的「同源政策」。同源政策的目的是確保網頁只能安全地請求同一來源的資源。

Fun fact

404

麻瓜解釋

今天，小銘建立了自己的網站 α，然後想從小華的網站 β 取得最新的好想工作室資訊，並顯示在自己的網站上。但是 β 和 α 不是來自同一個來源（網域），所以根據同源政策，α 無法直接使用 β 的資源。

後來小華在自己的網站 β 設置了 CORS 政策，這相當於一把網站的大鎖，小華可以自行設定規則，讓伺服器自動檢查來訪的人是否可以進入並取得自家網站資訊。

最後，小銘再一次發送請求，而小華的網站允許了這次請求，小銘就順利獲取了好想工作室的資訊。

• 同源政策：代表網頁只能跟自己互動，可以想像自立更生，自給自足，但不跟他人分享。

歷史

CORS 的起源可以追溯到網頁應用不斷成長的時代。隨著 AJAX 技術的廣泛使用，網頁應用開始需要從不同來源獲取數據。瀏覽器最初實行嚴格的同源政策，以避免潛在的安全風險，但這也限制了網頁應用的靈活性。為了解決這個問題，W3C 制定了 CORS 標準，讓開發者可以指定哪些來源能夠被允許請求資源。

後記

我這裡想補充一下，可能新手會發現，在 HTML 中使用<img src="">可以隨意抓取資訊，卻沒有 CORS 的問題。為什麼呢？這裡涉及一些深層技術，我會簡單說明。

根據 Huli 大神的文章，我個人的解讀如下，歡迎指教：

先解釋 Ajax：當你使用 Ajax 去抓取資料時，會被擋住，因為 Ajax 可以透過 XHR 和 fetch 去獲取資料。假設今天駭客 A 知道 B 公司的內部專用網站 α，這個網站只能通過公司員工的電腦訪問。

如果 B 的員工在用公司電腦同時開啟 α 和 A 的惡意網站，A 的網站內有一段程式碼（詳細可參見 Huli 的文章），它會利用 Ajax 技術竊取 α 的內容，並將其傳回 A 的伺服器。

而 標籤的情況不同，它能取得的只是網頁資源的一部分，這些標籤能拿到的資源是有限的。此外，這些取得的資源無法被程式讀取。

了解這些基礎概念就可以了。

參考

跨來源資源共用 CORS 基本介紹 | Beyond XSS
跨來源資源共用 - 維基百科
CORS 完全手冊（一）：為什麼會發生 CORS 錯誤？ - Huli's blog