DEV Community: ian chen

📌 final / readonly 觀念筆記

ian chen — Tue, 01 Jul 2025 15:40:40 +0000

📖 Java `final` 關鍵字

用法	說明
`final` 變數	賦值後不可再變更參考，但物件內部內容可改
`final` 方法	子類別不能 override 這個方法
`final` class	這個 class 不能被繼承

📌 範例：final 變數

final List<String> list = new ArrayList<>();
list.add("Hello");      // ✅ OK，改內容
list = new ArrayList<>(); // ❌ 不行，不能改變參考

📖 C# 對應概念

功能	Java	C#
變數賦值後不可改變參考	`final`	`readonly`
防止子類 override 方法	`final`	`sealed`
防止 class 被繼承	`final`	`sealed`

📌 C# readonly 範例

public class UserService
{
    private readonly UserRepository _userRepository;

    public UserService(UserRepository userRepository)
    {
        _userRepository = userRepository;
    }
}

📖 注意：

final / readonly 限制的是「參考（reference）不能改」，物件內部的狀態還是可以改變
如果要讓物件內部不可改，需搭配 immutable 類型或資料結構

📌 延伸觀念：建構子注入搭配 final / readonly

推薦將依賴透過建構子注入並宣告成 final (Java) / readonly (C#)，以保證依賴物件的參考安全、不被覆寫、且易於測試與維護。

✅ 小結

final / readonly 保護的是參考
sealed 保護的是 方法與 class 結構
操作物件內容不違反 final / readonly 規則，只是不能換參考。

Netlify 作為 Proxy 網頁代管平台介紹 + 解決 CORS 問題教學

ian chen — Wed, 25 Jun 2025 07:36:08 +0000

📌 什麼是 Netlify？

Netlify 是一個現代化的前端部署平台，支援 CI/CD、自動部署、靜態資源託管、Function 無伺服器後端、以及提供 HTTPS、網域綁定等功能，特別適合前端工程或靜態網頁代管。

🧩 為什麼用來代管 Proxy 頁面？

許多開發者使用 Netlify 來架設簡易 Proxy 或中繼頁面，主要優點如下：

✅ 免費方案就能支援自定網域與 HTTPS
🚀 架設簡單，直接將 HTML 上傳即可
🔧 支援 netlify.toml 設定 Rewrite/Redirect 規則
🌍 全球 CDN 分發，速度快且穩定
🔒 自動產生 Let's Encrypt SSL 憑證

🛠 如何建立簡易 Proxy 中繼頁

準備 HTML/JS 頁面（或用 Function）
建立 GitHub Repo 或本地專案
登入 app.netlify.com → Add new site
設定 netlify.toml：

   [[redirects]]
     from = "/proxy/*"
     to = "/.netlify/functions/proxy/:splat"
     status = 200
     force = true

🌐 解決 CORS 問題（使用 Netlify Functions）

若你要從前端 Fetch 其他網域的資料，會遇到 CORS 限制。
這時你可以透過 Netlify 的 Serverless Function 作為後端代理，來避免 CORS 問題。

➕ 步驟一：建立 `netlify/functions/proxy.js`

// netlify/functions/proxy.js
const fetch = require("node-fetch");

exports.handler = async function (event) {
  const url = event.path.replace("/.netlify/functions/proxy/", "");
  const targetUrl = decodeURIComponent(url);

  try {
    const response = await fetch(targetUrl);
    const data = await response.text();

    return {
      statusCode: 200,
      headers: {
        "Access-Control-Allow-Origin": "*", // 解決 CORS
        "Content-Type": response.headers.get("content-type") || "text/plain",
      },
      body: data,
    };
  } catch (err) {
    return {
      statusCode: 500,
      body: `Proxy Error: ${err.message}`,
    };
  }
};

➕ 步驟二：設定 `netlify.toml`

[build]
  functions = "netlify/functions"

[[redirects]]
  from = "/proxy/*"
  to = "/.netlify/functions/proxy/:splat"
  status = 200

🧪 測試方式（JavaScript）

fetch("https://你的 netlify 網址/proxy/https%3A%2F%2Fexample.com%2Fapi")
  .then(res => res.json())
  .then(data => console.log(data));

🔐 安全注意事項

僅允許特定網域：你可以在 Function 中加白名單或驗證 Referer
加上金鑰驗證或 API 防刷機制（避免被濫用）

📝 結語

Netlify 結合 Functions 可輕鬆打造具有 Proxy 功能的頁面，並解決常見的 CORS 問題，非常適合部署前端測試用的中繼 API 或跨域資料轉發。

💡 建議使用自己的 domain 加上防濫用機制，避免 proxy 被公用。

.NET Core 中的 `IOptions` 介紹

ian chen — Thu, 19 Jun 2025 16:13:29 +0000

在 .NET Core（現在統一稱為 .NET）中，IOptions 是一種用來讀取設定檔的設計模式。它提供強型別的方式，讓你能從 appsettings.json 或其他來源讀取資料，並注入到你的服務中。

✅ 為什麼要用 `IOptions`？

✅ 強型別支援：比 Configuration["Key"] 更安全、更容易維護
✅ 支援依賴注入（DI）：讓設定更容易測試與使用
✅ 支援監控與更新（使用 IOptionsSnapshot 和 IOptionsMonitor）

🛠 基本用法

1. `appsettings.json`

{
  "MySettings": {
    "SiteName": "My Cool Site",
    "EnableFeatureX": true
  }
}

2. 建立設定類別

public class MySettings
{
    public string SiteName { get; set; }
    public bool EnableFeatureX { get; set; }
}

3. 在 Program.cs 或 Startup.cs 中綁定設定

builder.Services.Configure<MySettings>(
    builder.Configuration.GetSection("MySettings"));

4. 在服務中使用設定

public class MyService
{
    private readonly MySettings _settings;

    public MyService(IOptions<MySettings> options)
    {
        _settings = options.Value;
    }

    public void Show()
    {
        Console.WriteLine(_settings.SiteName);
    }
}

🔄 `IOptions` 相關介面比較

介面類型	功能說明
`IOptions<T>`	一般用途，讀取設定值，啟動後不會變動
`IOptionsSnapshot<T>`	每次 DI 解析時會重新載入（適合 Scope 生命周期）
`IOptionsMonitor<T>`	支援即時監聽設定變更（適合 Singleton）

❓ 綁定失敗會怎樣？

若 JSON 少了某個欄位，該屬性會使用預設值（如 string 為 null、bool 為 false）
不會拋例外
若 JSON 值型別錯誤（如把布林值寫成字串），則會拋例外

🛡️ 加入設定驗證（推薦）

1. 使用資料註解（Data Annotations）

using System.ComponentModel.DataAnnotations;

public class MySettings
{
    [Required]
    public string SiteName { get; set; }

    public bool EnableFeatureX { get; set; }
}

2. 註冊時啟用驗證

builder.Services
    .AddOptions<MySettings>()
    .Bind(builder.Configuration.GetSection("MySettings"))
    .ValidateDataAnnotations()
    .ValidateOnStart(); // 啟動時驗證，錯誤會拋例外

這樣可以防止設定漏填，讓錯誤在啟動階段就被發現，而不是等到執行時才出問題。

📌 小結

IOptions<T> 是強型別、安全、支援 DI 的設定綁定方式
預設為寬鬆綁定，欄位缺漏不會報錯
若需強制驗證設定完整性，建議搭配 ValidateDataAnnotations() 和 ValidateOnStart()

📘 WAF（Web Application Firewall）介紹與應用說明

ian chen — Wed, 11 Jun 2025 02:13:07 +0000

🔰 什麼是 WAF？

WAF 全名為 Web Application Firewall（網站應用程式防火牆），是一種專門針對 Web 應用程式層級（第七層）的資安防護機制。

它不像傳統防火牆只檢查 IP、Port、協定，而是能深入檢查 HTTP/HTTPS 請求的內容，防範駭客常用的攻擊手法。

🎯 WAF 能防範哪些攻擊？

攻擊類型	說明
SQL Injection	透過注入惡意 SQL 查詢操控資料庫，例如 `1' OR 1=1--`
Cross-Site Scripting（XSS）	嵌入惡意 JavaScript，例如 `<script>alert(123)</script>`
Cross-Site Request Forgery（CSRF）	偽造使用者請求執行操作，例如偷偷發送刪除帳號請求
Command Injection	注入 OS 指令，例如 `; rm -rf /`
File Inclusion（LFI/RFI）	引入惡意程式碼檔案執行
HTTP Flood、DoS 攻擊	短時間大量請求癱瘓網站服務

🛠️ WAF 的部署方式

🔁 反向代理（Reverse Proxy）

WAF 通常會部署在 Web Server 之前，扮演流量的代理者，外部訪客的流量會先進到 WAF，再由 WAF 轉發至內部伺服器。

[Client]
   ↓
[WAF ← 對外開放 IP/Port]
   ↓
[Web Server（VM）]

📦 WAF 功能總覽

功能	說明
請求內容過濾	攔截包含惡意 Payload 的參數、Header、Body
IP 控制	封鎖特定來源 IP 或設白名單
負載平衡	部分 WAF 可做多台主機流量分配
日誌與警報	記錄可疑請求與阻擋記錄，供後續分析
SSL 終止	可在 WAF 處理 SSL 解密，減少後端負擔
行為學習	進階 WAF 有 AI 模型可自動學習並預測異常行為（如 Cloudflare Bot 管理）

🌐 常見的 WAF 方案

類型	代表產品
雲端型	Cloudflare WAF、AWS WAF、Azure WAF、Imperva
軟體型	ModSecurity（支援 Apache/Nginx）、NAXSI
硬體型	F5 BIG-IP ASM、Fortinet FortiWeb、Palo Alto WAF

👨‍💻 WAF 的實際應用場景

✅ 電商平台

保護購物網站避免被植入惡意腳本、SQL 注入造成資料外洩。

✅ 政府單位

強制部署資安設備防止駭客攻擊網站介面。

✅ API Gateway

攔截非法 API 存取請求，避免敏感資料被未授權使用。

✅ SaaS 平台

保護多租戶環境中的各個客戶資料，避免跨站操作。

🧠 自製簡易 WAF 的方式（學習用途）

你可以用以下技術製作一套基本的 WAF：

使用 Nginx + Lua（OpenResty）做請求過濾
在 ASP.NET Core / Django / Node.js 寫 Middleware 分析請求內容
使用 Regex 或字串比對過濾常見攻擊字樣
加入封鎖機制與黑名單功能

📌 建議參考 OWASP CRS（Core Rule Set）當作 WAF 規則庫基礎

🔚 結語

WAF 是現代網站不可或缺的資安防線。隨著 Web 應用日益複雜，攻擊手法層出不窮，WAF 能有效減少漏洞被濫用的機率。

不論是商業網站、API 系統、或是內部平台，只要有對外服務，都建議部署 WAF 來保障系統與資料安全。

OOA、OOD、OOP 的區別與關係說明

ian chen — Sat, 07 Jun 2025 16:20:06 +0000

1. OOA（物件導向分析）

聚焦「分析」階段，了解系統需求與問題域。
找出系統中的物件（實體）、它們的屬性與行為，及物件間的關係。
目標是建立一個符合需求的物件模型。

2. OOD（物件導向設計）

聚焦「設計」階段，基於分析結果，定義系統架構。
設計類別的結構（類別圖）、方法、繼承關係、介面、物件間的互動。
確保系統設計能夠良好實作、擴充與維護。

3. OOP（物件導向程式設計）

聚焦「實作」階段，用程式語言撰寫類別和物件。
將設計階段的藍圖落實成可執行的程式碼。
運用封裝、繼承、多型、抽象等物件導向特性。

OOD 與 OOP 的區別

OOD 是設計，屬於規劃層面：思考怎麼用物件去解決問題，定義類別和物件間的結構與行為。
OOP 是實作，屬於程式碼層面：把設計轉成程式碼，實現物件的屬性和方法。

常見狀況

在實務上，很多人會混用 OOD 與 OOP 這兩個詞，因為設計與實作往往緊密結合，界線不一定非常明確。
特別是小型專案或快速開發時，設計與實作常常同步進行。
嚴格說來，兩者是不同階段，但都屬於物件導向軟體開發過程的一部分。

總結

階段	內容	目的
OOA	分析需求，找出物件與關係	理解系統需求與實體
OOD	設計系統架構與物件結構	規劃如何組織與互動
OOP	用程式語言撰寫物件與類別	實作設計、完成功能

因此，OOD 與 OOP 在本質與角色上有明確差異，但在實務中常常交織使用，不會造成衝突。

處理後端 BigInt 傳到前端時精度丟失的問題

ian chen — Mon, 02 Jun 2025 09:07:28 +0000

在開發過程中，我經常會遇到後端資料庫的 bigint 欄位資料，尤其是像 ID 或金額這類數字很大的欄位。這些 bigint 資料在後端處理沒問題，但當我把它們包成 JSON 丟到前端時，就常常遇到精度丟失的狀況。

為什麼會發生 bigint 精度丟失？

這問題的根源主要是在 JavaScript 本身的數字型別限制。JavaScript 的 Number 是以 IEEE 754 雙精度浮點數格式儲存的，最大安全整數範圍是：

-(2^53 - 1) 到 2^53 - 1
也就是大約 ±9007199254740991

當 bigint 的數值超出這個範圍，JavaScript 就無法精準表示，數字會自動被四捨五入或變形，造成精度丟失。

這種狀況在 JSON 傳輸過程中也無法避免，因為：

JSON 標準本身不支援 BigInt 類型
JSON 僅支援 number 或 string
當 JSON 解析器看到一個超大的數字，就會轉成 JavaScript 的 Number，此時就會失去精度

解決方式：丟給前端前先轉成字串

為了解決這個問題，我通常會選擇在後端把 bigint 先轉成字串（string），再包進 JSON 傳給前端。

這樣前端收到的就是字串，不會被 JavaScript 的數字型別誤判成不準確的數字。前端如果需要進一步處理這些數字，也可以使用像 BigInt 或 big.js、decimal.js 等第三方工具來處理精準的數字運算。

總結

這個問題其實不是 JSON 本身的問題，而是 JavaScript 數字型別的限制。

只要我把 bigint 用 字串方式傳遞，再用相對應的大數字工具處理，就能輕鬆避免精度丟失，讓前後端資料保持一致，避免後續因數字不準確而產生的錯誤。

日誌札記

ian chen — Sat, 31 May 2025 16:18:24 +0000

這幾天心情有點起伏，公司的老同伴又離開了一位，放假前一天外公走了，真的有點崩潰，希望接下來一切順遂，peace

紀念我的外公外婆，想念在天上的你們，我愛你們