Web 安全實戰：
XSS、CSRF、CSP 防禦

# 攻擊步驟：
# 1. 用戶登入了 bank.com，瀏覽器儲存了 bank.com 的 Session Cookie
# 2. 用戶訪問了 evil.com（可能是誤點廣告、釣魚郵件中的連結）
# 3. evil.com 的頁面包含以下隱藏內容：

# 方式一：自動觸發的 GET 請求（圖片標籤）
# <img src="https://bank.com/transfer?to=hacker&amount=50000" width="0" height="0" />

# 方式二：自動提交的 POST 表單
# <form id="evil-form" action="https://bank.com/transfer" method="POST">
#   <input type="hidden" name="to" value="hacker_account" />
#   <input type="hidden" name="amount" value="50000" />
# </form>
# <script>document.getElementById('evil-form').submit();</script>

# 4. 瀏覽器自動帶上 bank.com 的 Cookie 發出請求
# 5. 伺服器看到有效的 Session，以為是用戶自己操作，執行轉帳！

// ─── 後端（Express）───
import crypto from 'crypto';

// 1. 每次生成表單時，產生唯一的 CSRF Token
app.get('/transfer', (req, res) => {
  const csrfToken = crypto.randomBytes(32).toString('hex');
  req.session.csrfToken = csrfToken;  // 存在 Session 中
  res.json({ csrfToken });            // 傳給前端
});

// 2. 處理表單時，驗證 Token 是否一致
app.post('/api/transfer', (req, res) => {
  const tokenFromRequest = req.headers['x-csrf-token'] || req.body.csrfToken;
  const tokenFromSession = req.session.csrfToken;

  // Token 不一致 → 拒絕請求
  if (!tokenFromRequest || tokenFromRequest !== tokenFromSession) {
    return res.status(403).json({ error: 'CSRF token 無效，請刷新頁面重試' });
  }

  // Token 驗證通過：繼續處理業務邏輯
  const { to, amount } = req.body;
  await bankTransfer({ from: req.session.userId, to, amount });
  res.json({ success: true });
});

// ─── 前端（React）───
function TransferForm() {
  const [csrfToken, setCsrfToken] = useState('');

  useEffect(() => {
    // 頁面載入時取得 CSRF Token
    fetch('/api/csrf-token', { credentials: 'include' })
      .then(r => r.json())
      .then(data => setCsrfToken(data.csrfToken));
  }, []);

  const handleTransfer = async (data) => {
    const response = await fetch('/api/transfer', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRF-Token': csrfToken,  // 每個 POST/PUT/DELETE 請求都帶上
      },
      credentials: 'include',       // 帶 Cookie
      body: JSON.stringify(data),
    });
    return response.json();
  };
}

// 設定 Cookie 的 SameSite 屬性
// 這是目前最簡單有效的 CSRF 防禦方式
res.cookie('sessionId', sessionToken, {
  httpOnly: true,       // JS 無法用 document.cookie 讀取
  secure: true,         // 只在 HTTPS 連線中傳輸（生產環境必須）
  sameSite: 'strict',   // 'strict'：完全阻止跨站請求帶 Cookie
                        // 'lax'   ：允許頂層導航（點連結），阻止其他跨站請求
                        // 'none'  ：允許跨站（需要 secure: true）
  maxAge: 60 * 60 * 24, // 1 天（秒）
  path: '/',
});

// SameSite 的三種模式比較：
// strict → 最安全，但用戶從外部連結進入時 Cookie 不帶（可能導致需要重新登入）
// lax    → 平衡安全與 UX，Google 的預設值，推薦大多數情況使用
// none   → 用於第三方嵌入（例如嵌入到其他網站的 iframe），必須配合 secure

// 注意：SameSite 在舊版瀏覽器（IE11、Chrome < 51）不支援
// 需要同時保留 CSRF Token 作為後備防禦

// Origin Header 檢查：驗證請求來源
app.use('/api', (req, res, next) => {
  // 只檢查會改變狀態的請求（POST、PUT、DELETE、PATCH）
  if (['GET', 'HEAD', 'OPTIONS'].includes(req.method)) {
    return next();
  }

  const origin = req.headers.origin;
  const referer = req.headers.referer;

  // 允許的來源白名單
  const allowedOrigins = [
    'https://myapp.com',
    'https://www.myapp.com',
    // 開發環境
    ...(process.env.NODE_ENV === 'development' ? ['http://localhost:3000'] : []),
  ];

  // 優先用 Origin，Origin 不存在時用 Referer
  const requestOrigin = origin ?? (referer ? new URL(referer).origin : null);

  if (!requestOrigin || !allowedOrigins.includes(requestOrigin)) {
    return res.status(403).json({
      error: '請求來源不合法',
      received: requestOrigin,
    });
  }

  next();
});

// 注意：Origin/Referer 可能被隱私設定或代理移除
// 不應單獨依賴，應與 SameSite Cookie 或 CSRF Token 配合使用

// ❌ 危險：直接拼接用戶輸入到 SQL 字串中
async function findUser(email: string) {
  const query = `SELECT * FROM users WHERE email = '${email}'`;
  return await db.execute(query);
}

// 攻擊者輸入：admin@example.com' OR '1'='1
// 生成的 SQL：SELECT * FROM users WHERE email = 'admin@example.com' OR '1'='1'
// 結果：回傳 users 表的所有行！

// 更嚴重的攻擊 — 刪除資料：
// 輸入：'; DROP TABLE users; --
// 生成：SELECT * FROM users WHERE email = ''; DROP TABLE users; --'
// 結果：用戶表被清空！

// 資料洩露攻擊（UNION-based）：
// 輸入：' UNION SELECT username, password, email, 4 FROM users --
// 生成：SELECT * FROM users WHERE id='' UNION SELECT username, password, email, 4 FROM users --
// 結果：所有用戶的密碼被讀出

// ✅ 方式 1：參數化查詢（Parameterized Query）— 永遠使用這個
// 參數用佔位符 $1、$2 表示，實際值獨立傳入，資料庫 driver 負責轉義
async function findUser(email: string) {
  const result = await db.query(
    'SELECT * FROM users WHERE email = $1',  // PostgreSQL 風格
    [email]  // 值作為獨立參數傳入，永遠安全
  );
  return result.rows[0];
}

// MySQL 風格（用 ? 作佔位符）：
async function findUserMySQL(email: string) {
  const [rows] = await pool.query(
    'SELECT * FROM users WHERE email = ?',
    [email]
  );
  return rows[0];
}

// ✅ 方式 2：使用 ORM（推薦，自動使用參數化查詢）
// Prisma
async function findUserPrisma(email: string) {
  return await prisma.user.findUnique({
    where: { email },  // Prisma 自動處理轉義，不可能 SQL Injection
    select: {
      id: true,
      name: true,
      email: true,
      // 不要 select password，只選需要的欄位
    },
  });
}

// TypeORM
const user = await userRepository.findOne({
  where: { email },  // 同樣安全
});

// ✅ 方式 3：如果必須用動態欄位名稱，用白名單驗證
const ALLOWED_SORT_COLUMNS = ['created_at', 'name', 'email', 'updated_at'];
const ALLOWED_SORT_ORDERS = ['ASC', 'DESC'];

async function getUsers(sortBy: string, sortOrder: string) {
  // 驗證排序欄位是否在白名單中（欄位名稱不能用參數化）
  if (!ALLOWED_SORT_COLUMNS.includes(sortBy)) {
    throw new Error('不合法的排序欄位');
  }
  if (!ALLOWED_SORT_ORDERS.includes(sortOrder.toUpperCase())) {
    throw new Error('不合法的排序方向');
  }

  // 排序欄位從白名單取得，值部分用參數化
  return await db.query(
    `SELECT * FROM users ORDER BY ${sortBy} ${sortOrder} LIMIT $1 OFFSET $2`,
    [limit, offset]
  );
}

// npm install helmet
import helmet from 'helmet';
import express from 'express';

const app = express();

// 一行加上所有常用安全 Headers！
app.use(helmet());

// 等同於以下完整配置（可以自訂）：
app.use(
  helmet({
    // Content-Security-Policy
    contentSecurityPolicy: {
      directives: {
        defaultSrc: ["'self'"],
        scriptSrc: ["'self'"],
        styleSrc: ["'self'", "'unsafe-inline'"],
        imgSrc: ["'self'", 'data:', 'https:'],
        connectSrc: ["'self'", 'https://api.example.com'],
        fontSrc: ["'self'", 'https://fonts.gstatic.com'],
        objectSrc: ["'none'"],
        frameAncestors: ["'none'"],
      },
    },

    // X-Content-Type-Options: nosniff
    // 防止瀏覽器猜測 MIME type（例如把 .jpg 當 .js 執行）
    noSniff: true,

    // X-Frame-Options: DENY
    // 防止在 iframe 中嵌入（Clickjacking 防禦）
    frameguard: { action: 'deny' },

    // Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
    // 強制 HTTPS 連線，一年內不接受 HTTP
    hsts: {
      maxAge: 31536000,         // 1 年（秒）
      includeSubDomains: true,  // 子網域也強制 HTTPS
      preload: true,            // 可提交到瀏覽器的 HSTS preload list
    },

    // X-XSS-Protection: 1; mode=block
    // 舊版瀏覽器（IE）的 XSS 過濾器
    xssFilter: true,

    // X-Powered-By 移除（預設 Express 會暴露後端技術）
    // 攻擊者用這個資訊找對應版本的漏洞
    hidePoweredBy: true,

    // Referrer-Policy: no-referrer
    // 控制請求中 Referer header 的內容
    referrerPolicy: { policy: 'strict-origin-when-cross-origin' },

    // Cross-Origin-Opener-Policy
    crossOriginOpenerPolicy: { policy: 'same-origin' },

    // Permissions-Policy（限制瀏覽器 API 的使用）
    // 例如禁止使用攝影機、麥克風、地理位置
    // 需要額外設定，helmet 暫不直接支援
  })
);

// 驗證你的網站安全標頭：
// 1. securityheaders.com — 輸入你的網址，直接評分
// 2. Mozilla Observatory — observatory.mozilla.org
// 3. curl 命令檢查：
//    curl -I https://yoursite.com | grep -i 'content-security|x-frame|strict-transport'

// 加上 helmet() 後，你的 Express 應用可以達到：
// securityheaders.com 評分：A 或 A+
// Mozilla Observatory 評分：A+
// 這已經超越大多數商業網站的安全配置