在現代 Web 開發中，為了保護使用者免於惡意攻擊，瀏覽器內建了多種安全機制。其中，同源策略 (SOP)、內容安全策略 (CSP) 和 跨來源資源共享 (CORS) 是三個最核心、最關鍵的概念。理解它們的運作原理，是打造安全應用程式的基礎。
1. SOP (Same-Origin Policy) - 同源策略
什麼是 SOP？
同源策略是瀏覽器最核心的安全策略，用於隔離來自不同「來源 (Origin)」的文件或腳本，限制它們之間的互動。簡單來說，一個來源的腳本，在未經允許的情況下，不能讀取或修改另一個來源的資源。
「同源」的定義
當兩個 URL 的 通訊協定 (Protocol)、主機 (Host) 和 通訊埠 (Port) 三者完全相同時，才被視為同源。
| URL | 與 http://example.com/ 比較 | 結果 |
|---|---|---|
http://example.com/page.html | 三者皆同 | 同源 |
https://example.com/ | 協定不同 (https) | 不同源 |
http://www.example.com/ | 主機不同 (www) | 不同源 |
http://example.com:8080/ | 通訊埠不同 (8080) | 不同源 |
SOP 主要限制了對 Cookie、LocalStorage 和 DOM 的存取，是防禦多種攻擊的基礎。
2. CORS (Cross-Origin Resource Sharing) - 跨來源資源共享
什麼是 CORS？
SOP 雖然安全，但也限制了 Web 應用的靈活性（例如，前端應用需要呼叫不同網域的 API）。CORS 是一種官方的「例外機制」，它允許伺服器在 HTTP 標頭中聲明，哪些外部來源有權限存取其資源，從而安全地放寬同源策略的限制。
運作方式
- 客戶端：當瀏覽器發起跨來源請求時，會自動在 HTTP 請求標頭中加入
Origin欄位，標明請求的來源。 - 伺服器：伺服器收到請求後，根據預設的策略，在 HTTP 回應標頭中加入
Access-Control-Allow-Origin等欄位，告訴瀏覽器是否允許這次請求。
常見的 CORS 標頭
Access-Control-Allow-Origin: 指定允許存取資源的來源 URL。Access-Control-Allow-Methods: 指定允許的 HTTP 方法 (GET, POST 等)。Access-Control-Allow-Headers: 指定允許的自訂請求標頭。
3. CSP (Content Security Policy) - 內容安全策略
什麼是 CSP？
CSP 是一種額外的安全層，主要目標是防止 跨站腳本攻擊 (XSS) 和其他內容注入攻擊。它允許網站管理者定義一份「白名單」，明確告知瀏覽器只允許載入和執行來自這些指定來源的資源（如 JavaScript、CSS、圖片、<iframe> 等）。
運作方式
CSP 透過 HTTP 回應標頭 Content-Security-Policy 來實作。管理者可以在這個標頭中定義多種指令。
常見的 CSP 指令
default-src: 為其他未設定的指令提供預設值。script-src: 定義允許執行的 JavaScript 來源。style-src: 定義允許載入的 CSS 來源。img-src: 定義允許載入的圖片來源。form-action: 限制<form>提交的目標 URL。child-src: 定義允許嵌入的<iframe>來源。
安全風險與預防措施
1. CORS 設定不當
- 風險: 如果
Access-Control-Allow-Origin標頭被設為萬用字元*，意味著任何外部網站都能存取您的 API 或資源，可能導致敏感資訊洩漏。 - 預防:
- 精確設定
Access-Control-Allow-Origin，只列出受信任的網域。 - 避免在需要身分驗證的 API 上使用
*。
- 精確設定
2. CSP 設定不當
- 風險: 如果 CSP 規則設定得過於寬鬆（例如，允許
unsafe-inline或unsafe-eval），或者白名單包含了惡意來源，將無法有效防禦 XSS 攻擊。 - 預防:
- 盡可能詳細地列出每個資源的合法來源。
- 優先設定
default-src作為基礎防線。 - 避免使用
unsafe-inline和unsafe-eval，改用 nonce 或 hash 的方式。 - 定期審查和更新您的 CSP 規則。
說些什麼吧！