# 🔐 Web 平台開發資安注意事項 (Vue 3 + .NET Core WebAPI + JWT)

使用 Vue 3（SFC 架構）作為前端，後端採用 .NET Core Web API 搭配 JWT 做為身份驗證機制，這是一個常見且合理的技術組合。但從資安角度來看，以下是應該特別留意的風險與建議：

***

## 一、JWT（JSON Web Token）安全注意事項

### 1\. Token 儲存位置

* ❌ 避免將 JWT 存在 `localStorage` 或 `sessionStorage`（容易受到 XSS 攻擊）。
* ✅ 建議使用 `HttpOnly` + `Secure` Cookie 儲存 JWT。
    * 前端無法透過 JS 存取，降低 XSS 風險。
    * `Secure`：只透過 HTTPS 傳送。
    * `SameSite=Strict` 或 `Lax` 可防止 CSRF。

### 2\. Token 過期與更新機制

* 設定合理的 JWT 有效期限（如 15–30 分鐘）。
* 實作 Refresh Token 機制延長登入狀態。
    * Refresh Token 同樣需使用 `HttpOnly Cookie` 儲存。

### 3\. 簽名與驗證

* 使用強加密演算法（如 HS256 或 RS256）。
* 密鑰不可寫死在前端或版本庫中。

***

## 二、前端 (Vue 3) 資安防護

### 1\. 防範 XSS（跨站腳本攻擊）

* 動態插入 DOM 的內容需過濾、清洗。
* Vue 的模板語法有自動 escaping，但使用 `v-html` 要特別注意。
* 建議使用 DOMPurify 這類工具清洗 HTML 字串。

### 2\. 防止 CSRF（跨站請求偽造）

* 使用 Cookie 儲存 JWT 時，務必加上 SameSite。
* API 端可檢查 `Referer` 或 `Origin` 標頭來源。

### 3\. API 錯誤處理與資訊揭露

* 錯誤訊息不應包含 stack trace 或 DB 訊息。
* 建議使用統一錯誤格式，如：

    ```json
    {
      ""code"": ""AUTH_INVALID"",
      ""message"": ""Invalid username or password.""
    }
    ```

## 三、後端 (.NET Core WebAPI) 資安建議

### 1\. API 授權控管

* 使用 `[Authorize]` 控管 API 權限。
* 建立不同角色權限控制策略（Policy-based Authorization）。

### 2\. 防止 SQL Injection

* 使用 Entity Framework、Dapper 等 ORM 工具。
* ❌ 切勿直接拼接 SQL 字串。

### 3\. CORS 設定

* 僅允許信任的前端來源呼叫 API。
* 範例 CORS 設定：

    ```csharp
    services.AddCors(options =>
    {
        options.AddPolicy("CorsPolicy", builder =>
        {
            builder.WithOrigins("https://yourfrontend.domain")
                   .AllowAnyHeader()
                   .AllowAnyMethod()
                   .AllowCredentials();
        });
    });
    ```

### 4\. 限制暴力破解（Login 嘗試限制）

* 實作登入次數限制，可搭配記憶體快取（如 MemoryCache）或 Redis。
* 記錄 IP 或帳號錯誤嘗試次數，達上限後暫時封鎖。
* 可加入 CAPTCHA 驗證以防自動化攻擊。

***

## 四、其他資安細節

### 1\. 強制使用 HTTPS

* 所有前後端流量均應使用 HTTPS。
* 建議加上 HSTS（HTTP Strict Transport Security）以防 downgrade 攻擊。

### 2\. 加入 HTTP 安全標頭（Security Headers）

以下是建議加入的 HTTP 安全標頭，可提升瀏覽器端的防護：

```http
Strict-Transport-Security: max-age=63072000; includeSubDomains; preload
X-Content-Type-Options: nosniff``
X-Frame-Options: DENY
Content-Security-Policy: default-src 'self'
Referrer-Policy: no-referrer
```

這些標頭建議由後端 Web Server（如 Kestrel、IIS、Nginx）或中介層（如反向代理、防火牆）設置。

***

### 3\. 前端打包安全

* 打包時不要遺留 `.env` 或其他敏感設定檔。
* 移除所有 `console.log`、`debugger` 等開發相關程式碼。
* 使用 Webpack、Terser 進行壓縮與混淆，以防止原始碼被輕易閱讀。

***

## ✅ 資安檢查清單（建議部署前確認）

| 項目 | 是否完成 | 備註 |
| --- | ---- | --- |
| JWT 安全儲存與過期控管 | ☐ | 使用 HttpOnly Cookie |
| XSS 防禦（前後端） | ☐ | 避免 `v-html`，清洗 HTML |
| CSRF 防禦 | ☐ | SameSite Cookie + 驗證 Referer |
| HTTPS 加密連線 | ☐ | 全站 HTTPS 強制啟用 |
| 加入 Security Headers | ☐ | 提高瀏覽器安全性 |
| API 權限控管 | ☐ | 使用 `[Authorize]` 並分層授權 |
| 設定 CORS 白名單 | ☐ | 僅允許可信來源 |
| 防止暴力破解 | ☐ | 加入 CAPTCHA / 嘗試次數限制 |
| 資料庫安全存取 | ☐ | 使用 ORM，避免 SQL Injection |
| 錯誤訊息不洩漏內部資訊 | ☐ | 統一錯誤格式，過濾敏感訊息 |
| 打包前端安全性檢查 | ☐ | 移除 dev 設定、混淆程式碼 |

***

> ✅ 小提醒：部署前可將此檢查表列印出來，作為安全審核依據，與團隊開發/運維做交接確認
> 
> ✅ 責任編輯：62485250873bbaa01327f2b62f94691bdbb6961a

<script defer data-domain="html.cafe" src="https://milkymouse.com/js/script.js"></script>