網路協定 EP.08資安實戰

Security Headers：
網頁安全的隱形防線

為什麼加了幾個 Header 就能防禦 90% 的攻擊？從 CORS、CSP 到 HSTS，深度解析現代瀏覽器的安全機制與正確配置方法。

傳輸層安全

深度防禦

隱私保護

✍️ Joseph Chen

隱形防線：瀏覽器與伺服器的契約

「最好的安全防禦，是讓攻擊者連出手的機會都沒有。」

當你在瀏覽器輸入網址，伺服器回傳的不只有 HTML，還有一堆隱藏在背後的 HTTP Headers。這些 Headers 就像是伺服器給瀏覽器的「行為準則」：哪些 Script 可以跑、哪些網站可以讀取資料、連線是否必須加密。

為什麼你需要 Security Headers？

1. 成本最低的防禦

不需要修改業務邏輯，只需要在伺服器設定（Nginx/Next.js）加幾行字。

2. 深度防禦 (Defense in Depth)

即便你的程式碼有 XSS 漏洞，正確的 CSP 也能阻止駭客執行惡意腳本。

一、CORS：不是用來阻擋駭客的

CORS (Cross-Origin Resource Sharing) 大概是前端工程師最討厭的錯誤。但請記住一個核心概念：CORS 是一種放寬限制的機制，而不是一種防護機制。

痛點：為什麼會有 CORS 錯誤？

瀏覽器預設遵守「同源政策 (Same-Origin Policy)」，不允許 Domain A 的網頁去讀取 Domain B 的 API 資料。這是為了防止駭客在惡意網站寫一段 JS 去偷讀你在銀行網站的個人資訊。

駭客眼中的 CORS：

「如果我能把 Access-Control-Allow-Origin 設成 *，我就能從任何地方發請求。」

最佳實踐：如何正確設定 CORS

Next.js next.config.js 設定

const nextConfig = {
  async headers() {
    return [
      {
        source: "/api/:path*",
        headers: [
          { key: "Access-Control-Allow-Credentials", value: "true" },
          // ❌ 千萬不要設成 "*"
          // { key: "Access-Control-Allow-Origin", value: "*" },
          
          // ✅ 設定特定信任的網域
          { key: "Access-Control-Allow-Origin", value: "https://app.chullin.tw" },
          { key: "Access-Control-Allow-Methods", value: "GET,DELETE,PATCH,POST,PUT" },
          { key: "Access-Control-Allow-Headers", value: "X-CSRF-Token, X-Requested-With, Content-Type, Authorization" },
        ]
      }
    ]
  }
}

二、CSP：網頁安全的「白名單」

CSP (Content Security Policy) 是防禦 XSS (跨站腳本攻擊) 的大殺器。它告訴瀏覽器：「只有這份名單上的來源可以執行 Script 或讀取圖片，其他的通通不准跑。」

沒有 CSP 的風險

駭客在評論區留下一段程式碼，瀏覽器會乖乖執行它，把使用者的 Cookie 傳到駭客伺服器。

有 CSP 的保護

瀏覽器看到該 Script 來源不在白名單內，直接報錯阻斷，駭客無功而返。

一個嚴謹的 CSP 範例：

Content-Security-Policy

Content-Security-Policy: 
  default-src 'self'; 
  script-src 'self' https://trusted.cdn.com; 
  style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
  img-src 'self' data: https://images.chullin.tw;
  connect-src 'self' https://api.chullin.tw;
  frame-ancestors 'none';

⚠️ 小提醒：

如果要完全防止 XSS，應盡量避免使用 'unsafe-inline'，改用 Nonce (一次性隨機字串) 或 Hash。

三、HSTS：強制加密，杜絕中間人攻擊

你以為把網站轉址到 HTTPS 就安全了嗎？駭客可以利用「SSL Stripping」攻擊，在使用者發出第一個 HTTP 請求時就將其劫持。HSTS (HTTP Strict Transport Security) 告訴瀏覽器：「在接下來的一年內，這個網站的所有請求都必須直接走 HTTPS，連嘗試 HTTP 都不准。」

HSTS Header

# max-age: 存留時間 (秒), 31536000 代表一年
# includeSubDomains: 套用到所有子網域
# preload: 申請加入瀏覽器內建的 HSTS 名單
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload

四、Cookie Security：保護使用者的憑證

Cookie 存載著 Session ID，是駭客最垂涎的目標。如果你沒有正確設定以下三個屬性，使用者的帳號就像沒鎖門一樣危險。

HttpOnly

防偷取

禁止 JavaScript 存取 Cookie。

防止 XSS 攻擊者利用 document.cookie 偷走 Session ID。

Secure

防監聽

強制 Cookie 只能在加密的 HTTPS 連線中傳輸。

防止在不安全的 Wi-Fi 環境下被中間人監聽抓到明文 Cookie。

SameSite

防偽造

限制第三方網站是否能帶上這個 Cookie。

設為 "Strict" 或 "Lax" 是防禦 CSRF (跨站請求偽造) 的最佳利器。

伺服器端設定 Cookie

// 在 Express 中
res.cookie('sessionId', 'abc123xyz', {
  httpOnly: true,
  secure: true,
  sameSite: 'Lax',
  maxAge: 3600000 // 1 hour
});

五、那些「不用思考也該加」的 Headers

最後這兩個 Header 設定非常簡單，但能解決一些特定的瀏覽器漏洞。

X-Frame-Options

防止 Clickjacking (點擊劫持)。禁止別人的網站用 iframe 嵌入你的頁面，然後在上面覆蓋一層透明按鈕來騙取點擊。

http

X-Frame-Options: DENY

X-Content-Type-Options

防止 MIME Sniffing。告訴瀏覽器：「不要猜測檔案類型，我說它是什麼就是什麼」，防止駭客偽裝成圖片的惡意 Script 被執行。

http

X-Content-Type-Options: nosniff

實戰懶人包：如何快速落地？

不用覺得頭大，如果你是使用 Next.js，你可以直接在 `next.config.js` 中一次性解決所有問題：

next.config.js 萬用安全配置

const securityHeaders = [
  { key: 'X-DNS-Prefetch-Control', value: 'on' },
  { key: 'Strict-Transport-Security', value: 'max-age=63072000; includeSubDomains; preload' },
  { key: 'X-Frame-Options', value: 'SAMEORIGIN' },
  { key: 'X-Content-Type-Options', value: 'nosniff' },
  { key: 'Referrer-Policy', value: 'origin-when-cross-origin' },
  { key: 'Content-Security-Policy', value: "default-src 'self'; script-src 'self' 'unsafe-eval' 'unsafe-inline' *.google-analytics.com; style-src 'self' 'unsafe-inline' fonts.googleapis.com; img-src 'self' data: res.cloudinary.com; font-src 'self' fonts.gstatic.com; connect-src 'self'; media-src 'none'; object-src 'none'; frame-src 'none';" }
];

module.exports = {
  async headers() {
    return [{ source: '/:path*', headers: securityHeaders }];
  }
};

先在 Dev 環境測試

使用 SecurityHeaders.com 檢測

#網路協議#資安#HTTP#HTTPS#CORS#CSP#Cookie#Next.js

EP.07 — HTTP/3 與 QUIC：為什麼 UDP 變快了？

EP.09 — TCP/IP 深度解析：從握手到揮手的完整旅程

覺得這篇文章有幫助嗎？

在這個 Bootcamp 系列中，我們持續分享軟體開發的核心技術。如果有任何問題，歡迎在 LinkedIn 上與我交流！

Security Headers：網頁安全的隱形防線