前言

前面兩天聊了 bcrypt 和 JWT，今天來講講另一個很重要但常被忽略的東西 - Helmet。這個套件可以幫你的 Express 應用程式防止一些常見的網頁攻擊。

什麼是 Helmet？

Helmet 是一個非常實用的 Node.js 安全中間件，它幫你設定各種 HTTP 安全標頭（Security Headers），讓你的 Express.js 應用程式更加安全。

為什麼需要 Helmet？

在現代網路環境中，網站面臨各種安全威脅：

• XSS 攻擊：惡意腳本注入
• 點擊劫持：誘騙用戶點擊隱藏元素
• MIME 類型嗅探：瀏覽器錯誤解析檔案類型
• 資訊洩露：伺服器版本資訊暴露

Helmet 透過設定適當的 HTTP 標頭來防範這些攻擊。

專案中的使用

1. 安裝與引入

// 在 package.json 中已安裝
"helmet": "^7.1.0"

// 在 app.ts 中引入
import helmet from 'helmet';

2. 基本使用

// 在 app.ts 第 73 行
app.use(helmet());

Helmet 預設提供的安全標頭

當你使用 helmet() 時，它會自動設定以下安全標頭：

1. Content Security Policy (CSP)

Content-Security-Policy: default-src 'self'

防止 XSS 攻擊，限制資源載入來源。

2. X-Frame-Options

X-Frame-Options: SAMEORIGIN

防止點擊劫持攻擊，限制頁面是否可以被嵌入到 iframe 中。

3. X-Content-Type-Options

X-Content-Type-Options: nosniff

防止 MIME 類型嗅探攻擊，確保瀏覽器按照正確的內容類型處理檔案。

4. Referrer-Policy

Referrer-Policy: no-referrer

控制瀏覽器在導航時發送的 referrer 資訊。

5. X-DNS-Prefetch-Control

X-DNS-Prefetch-Control: off

控制瀏覽器的 DNS 預取功能。

進階配置選項

Helmet 還支援許多進階選項：

1. 自訂 CSP 政策

app.use(helmet({
  contentSecurityPolicy: {
    directives: {
      defaultSrc: ["'self'"],
      styleSrc: ["'self'", "'unsafe-inline'"],
      scriptSrc: ["'self'"],
      imgSrc: ["'self'", "data:", "https:"],
    },
  },
}));

2. 設定 HSTS（HTTP Strict Transport Security）

app.use(helmet({
  hsts: {
    maxAge: 31536000,
    includeSubDomains: true,
    preload: true
  }
}));

3. 隱藏 X-Powered-By 標頭

app.use(helmet.hidePoweredBy());

4. 設定 XSS 過濾器

app.use(helmet.xssFilter());

實際效果展示

讓我們看看 Helmet 在實際請求中的效果：

沒有 Helmet 的響應標頭

HTTP/1.1 200 OK
Content-Type: application/json
X-Powered-By: Express

有 Helmet 的響應標頭

HTTP/1.1 200 OK
Content-Type: application/json
Content-Security-Policy: default-src 'self'
X-Frame-Options: SAMEORIGIN
X-Content-Type-Options: nosniff
Referrer-Policy: no-referrer
X-DNS-Prefetch-Control: off

最佳實踐建議

1. 開發環境 vs 生產環境

// 開發環境可能需要更寬鬆的 CSP
if (process.env.NODE_ENV === 'development') {
  app.use(helmet({
    contentSecurityPolicy: {
      directives: {
        defaultSrc: ["'self'"],
        scriptSrc: ["'self'", "'unsafe-inline'", "'unsafe-eval'"], // 開發時允許
      },
    },
  }));
} else {
  app.use(helmet()); // 生產環境使用嚴格設定
}

2. 與其他中間件配合

在我們的專案中，Helmet 與 CORS 配合使用：

// 先設定安全標頭
app.use(helmet());

// 再設定 CORS
app.use(cors(corsOptions));

3. 測試安全標頭

可以使用以下工具測試你的安全標頭：

• Security Headers
• Mozilla Observatory