zoom教室下載
文、Raymond老師
當我們在開發網站時，除了功能實現和使用者體驗，還有一個經常被新手工程師忽略的重點：資安防護。也許你會想「我只是個前端工程師，資安不是後端的事嗎？」但實際上，前端就是使用者接觸網頁的第一道防線，許多資安漏洞都是從前端開始被利用的，今天就讓我們來聊聊網站開發中最常見的五種資安風險，以及該如何防堵它們。
目錄
一、跨站腳本攻擊(Cross-Site Scripting / XSS)
XSS攻擊可以說是前端工程師最容易碰到的資安問題。它的運作原理其實很簡單：攻擊者想辦法將惡意JavaScript注入到你的網頁中，當其他使用者瀏覽這個頁面時，這段腳本就會被執行，進而去竊取使用者的Cookie、會話資訊，甚至直接在使用者的瀏覽器中進行各種惡意操作。
想像一個常見的情境：你做了一個留言板功能，使用者可以留言而其他人可以看到這些留言。如果你並沒有做額外的檢查或過濾，攻擊者就可能輸入這樣的內容：
正確的防禦方式是對所有使用者輸入進行轉義(escape)，確保它們被當作純文字而非可執行的程式碼。例如在React中，預設就有這層保護：
除非特定的去使用dangerouslySetInnerHTML標籤，否則常見的皆會被過濾掉，除了轉譯之外，設定Content Security Policy(CSP)也是重要的防護措施。
二、SQL 注入攻擊（SQL Injection）
SQL Injection主要發生在後端，會處理網頁的各種資料庫互動的人都應該了解它的運作原理，因為許多SQL注入都是透過前端的輸入欄位發起的。攻擊者會在輸入框中填入精心設計的SQL指令，如果後端沒有妥善處理，這些指令就可能被執行，導致資料庫被竊取或破壞。
最經典的例子就是登入功能，假設後端直接將使用者輸入拼接到SQL查詢中：
在這個案例中，攻擊者只需輸入：username = "admin' OR '1'='1"，查詢就會變成：SELECT * FROM users WHERE username = 'admin' OR '1'='1' AND password = '...'，而由於'1'='1'永遠為true，攻擊者就能繞過密碼驗證。
正確的做法是使用參數化查詢(Prepared Statements)或ORM工具，確保使用者輸入永遠被當作資料而非SQL指令的一部分：
三、跨站請求偽造（Cross-Site Request Forgery， CSRF）
CSRF攻擊的原理是利用使用者已經登入的身份，在使用者不知情的情況下執行操作。舉個例子，假設你登入了網路銀行，瀏覽器保存了你的session，這時如果點開了一封釣魚郵件中的連結，這個惡意網站可能會偷偷發送轉帳請求到你的銀行網站，由於你的瀏覽器會自動帶上銀行網站的Cookie，這個請求就可能被執行。
防禦CSRF的關鍵是確保每個重要操作都有一個無法被預測的token。這個token必須在後端產生，並且每次請求時都要驗證：
不過現今更常見的做法是透過SameSite的設定去限制網站的後端只能由特定的域名去發起，也就是白名單做法。
圖片來源：heroku
四、中間人攻擊（Man-in-the-Middle Attack）
中間人攻擊(MITM)就像是你在打電話時，有人偷偷接上了線路在竊聽。在網路傳輸的世界中，攻擊者可能在你和網站之間攔截通訊內容，竊取或甚至篡改資料。這種攻擊最常發生在使用公用網路或是公共WiFi的時候，因為這些網路通常沒有適當的加密保護。
防禦中間人攻擊的核心是使用HTTPS，也就是帶有加密的傳輸。HTTPS透過SSL/TLS協定加密所有傳輸的資料，即使攻擊者攔截到封包，也無法解讀其中的內容，現在有非常多的網域代管商都會提供SSL憑證服務確保server之間使用HTTPS溝通，例如Cloudflare甚至提供的是免費的。
圖片來源：cloudflare
延伸閱讀：
五、會話劫持（Session Hijacking）
會話劫持是指攻擊者透過各種手段取得使用者的session ID，然後用這個ID冒充使用者進行操作。這就像是有人偷了你的會員卡，然後冒充你去消費一樣。Session ID可能透過XSS攻擊、網路竊聽或其他方式被竊取。
防禦會話劫持需要多管齊下，首先是設定Cookie的安全屬性，其次是定期更新session ID，最後是偵測異常的session使用行為：
對於敏感操作，例如修改密碼或轉帳，建議額外要求使用者重新輸入密碼或使用雙因素驗證，增加一層保護。
看完這五種常見的資安風險，你可能會覺得網站開發怎麼這麼多眉角要注意。但相信我，等你真的碰過一次資安事件，就會明白這些防護措施有多重要。資安不是後端的專利，也不是資安團隊的責任，而是每個參與開發的人都應該具備的基本意識。現代的框架和工具已經幫我們處理了很多資安問題，像React預設就會轉義輸出內容，Next.js也內建了許多安全設定。但這不代表我們可以完全依賴它們，了解背後的原理，知道什麼是安全的做法，什麼是危險的操作，才能在需要的時候做出正確的判斷。想累積更多資安知識與技能嗎？填寫下方表單預約了解專業資安課程！
FB粉絲團：https://www.facebook.com/lccnetzone
YouTube頻道：https://www.youtube.com/@Lccnet-TW
痞客邦Blog：http://lccnetvip.pixnet.net/blog
