網頁安全完整指南：CORS、CSP與HSTS

1. CORS（跨來源資源共享）：保護你的API

要理解CORS，你必須先理解同源政策（Same-Origin Policy，SOP）。預設情況下，瀏覽器會限制網頁向提供該網頁以外的不同網域（來源）發出請求。舉例來說，https://myblog.com上的腳本無法任意從https://api.mybank.com取得私密資料。這是一項至關重要的內建防護機制。

然而，現代的全球化應用程式高度去中心化。你的前端可能架設在Vercel上，API架設在AWS上，圖片則存放在Cloudflare上。CORS正是讓你能安全繞過SOP限制的協定。它透過專用的HTTP標頭告訴瀏覽器：「允許這個特定的外部網域存取我的資源。」

• 預檢請求：遇到繁複的請求時（例如透過POST或PUT傳送JSON資料），瀏覽器會先送出一個看不見的OPTIONS請求（即「預檢」），詢問伺服器是否允許實際的請求。如果伺服器核准，才會送出真正的請求。
• 致命的錯誤：許多開發者因CORS錯誤而感到挫折，於是直接設定Access-Control-Allow-Origin: *（萬用字元）。這是一個災難性的安全漏洞，因為它等於允許網路上任何一個網站查詢你的API。請務必指定確切且受信任的來源網域。

2. CSP（內容安全策略）：抵抗XSS的終極防線

跨站腳本攻擊（Cross-Site Scripting，XSS）是網路上最常見且最危險的漏洞之一。當攻擊者成功將惡意JavaScript注入你的網站時（例如透過存在漏洞的留言區），就會發生這種情況。當使用者造訪該頁面時，惡意腳本便會執行，盜取使用者的工作階段Cookie，或將使用者重新導向到釣魚網站。

CSP就像是你網頁的一位極其苛刻的門衛。這是一種HTTP標頭，讓網站管理者能夠宣告一份核准的「白名單」，列出允許載入的動態資源。如果某個腳本試圖執行，但其來源不在白名單上，瀏覽器就會直接封鎖它。

3. HSTS（HTTP Strict Transport Security）：強制走安全路線

你已經安裝了SSL/TLS憑證，網站也透過HTTPS載入。這樣就安全了，是嗎？其實並非完全如此。當使用者在瀏覽器中手動輸入yourdomain.com時，最初的請求通常會預設走未加密的http://協定。在伺服器將其重新導向到https://之前的那一瞬間，處於同一公共Wi-Fi網路上的攻擊者，就能發動一次中間人（MITM）SSL降級攻擊，擷取流量。

HSTS能完全消除這個漏洞視窗。當伺服器送出HSTS標頭時，就等於向瀏覽器發出一道強制指令：「在接下來的這段時間內，永遠不要嘗試透過HTTP載入這個網站。在請求離開裝置之前，就先在內部強制轉為HTTPS。」此外，你還可以將你的網域提交到全球性的HSTS預載清單（HSTS Preload List），這份清單已直接內建於Chrome、Firefox與Safari中，確保使用者即使是第一次造訪，也能安全地連線。

4. 實作：伺服器設定程式碼片段

實作這些政策需要修改你的伺服器設定。以下是一段可直接用於生產環境的Nginx程式碼片段，它設定了精確的CORS規則、強健的CSP，以及最高安全等級的HSTS。

server {
    listen 443 ssl http2;
    server_name www.yourglobaldomain.com;

    # 1. HSTS設定
    # 強制使用HTTPS 1年（31536000秒），包含所有子網域，並允許預先載入
    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;

    # 2. CSP（內容安全策略）設定
    # 僅允許來自你的網域與Google Analytics的腳本。禁止行內腳本。
    add_header Content-Security-Policy "default-src 'self'; script-src 'self' https://www.google-analytics.com; img-src 'self' data: https:; style-src 'self' 'unsafe-inline';" always;

    # 3. CORS設定（用於API區塊）
    location /api/ {
        # 生產環境中絕不要使用'*'。請指定確切的可信前端網域。
        add_header 'Access-Control-Allow-Origin' 'https://www.yourfrontend.com' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
        add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type' always;

        # 處理預檢請求
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' 'https://www.yourfrontend.com';
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain; charset=utf-8';
            add_header 'Content-Length' 0;
            return 204;
        }
    }
}

結語：安全性就是SEO

在現代網路生態系統中，安全性與SEO緊密交織在一起。Google明確將HTTPS作為排名訊號之一，其演算法在使用者安全指標上也高度敏感。透過正確實作CORS、CSP與HSTS，你不僅是在保護使用者的資料——更是在打造一項堅韌、高度值得信任的數位資產，讓搜尋引擎能夠放心地將它推薦給全球使用者。從今天就開始稽核你的HTTP標頭，把門關上，阻絕惡意人士。

標籤：#網頁安全 #CORS #內容安全策略 #HSTS #網路安全 #全球SEO #HTTPS #技術標準