本文同步發布於個人部落格

應該都有看過那種電影，身為超級駭客的主角在鍵盤上批哩啪啦一陣輸出，然後螢幕上就出現入侵的進度條。
是不是覺得很帥？
那身為前端工程師，好歹也算是 CS 的一員了，是不是也能這麼帥啊？
當然可以啊！
把下面這段 code 拿去跑：

console.log('Start Attack')

for (let i = 0; i < 100; i++) {
  console.log(`Hacking... ${i}%`)
}

console.log('Attack Complete')

這當然是個玩笑話，前端實際上距離駭客行為還是有一段距離的。
電影上那種入侵手段也看看就好，真實的駭客誰跟你在那邊 1%、2% 地入侵啊。
都是悄悄地入侵，主打一個不讓你發現。

但前端的確還是有一些安全議題是需要注意的，這也是面試挺喜歡考的，也就是 XSS 跟 CSRF。
尤其是 XSS，這幾乎完全就是前端該負責的範疇，而 CSRF 則偏向使用者的行為。
但為何實務開發現在甚少把 XSS 當作一個嚴重的問題來對待呢？
老話一句，因為框架。
我們偉大的 React 跟 Vue 都內建了一些防範 XSS 的機制，所以我們通常不用分心去處理這類問題。
框架的偉大，無需多言。

XSS

XSS 是跨站腳本攻擊 (Cross-Site Scripting) 的意思。
這個跨站的意義很有意思，我們先來稍微簡單了解一下 XSS 的攻擊方式：

1. 攻擊者把惡意的 JavaScript 程式碼注入到網站中
2. 當使用者瀏覽該網站時，這段惡意程式碼就會在使用者的瀏覽器中執行
3. 攻擊者可以藉此竊取使用者的 Cookie、Session 等敏感資訊

所以是攻擊者「注入」惡意程式碼在受害網站，使用者瀏覽該網站時就會執行這段程式碼。
跨站指的就是這樣一個間接的攻擊行為。

XSS 有三種類型：

1. stored XSS
2. reflected XSS
3. DOM-based XSS

stored XSS 是比如透過部落格留言板去把腳本存到受攻擊方的後端資料庫中，當下一個使用者使用此受攻擊網站時便會因為網頁載入了這段腳本而遭受攻擊。
所以他的 prefix stored 就說明他有一個儲存的動作。

reflected XSS 是指比如有個網站網址 (http://example.com) 被惡意嵌入一段腳本 (<script>alert('xss attack')</script>) 變成類似這樣 http://example.com?search=<script>alert('xss attack')</script>，這個網址再被傳播出去，當其他使用者點擊時就會觸發這個腳本，以這個例子來說會彈出一個警告視窗。
reflected 一詞是指 server 的反映，如果前端沒攔住、後端也沒攔住，這個 search 跟它後面帶的惡意腳本就會被 server 拿去組 HTML 然後再丟回 browser。
所以可以想像成惡意攻擊被鏡子 (server) 反射回 browser，這樣記 reflected 比較好記。

最後一種是 DOM-based XSS，這種攻擊是利用網頁的 DOM 結構來進行攻擊。
這個攻擊比較容易發生在攻擊者解析了前端的 code 後從中找到了一個漏洞。
舉例來說，前端如果不小心寫死一段 code：

// HTML
<h1 id="msg"></h1>
<script src="app.js"></script>

// JS
const params = new URLSearchParams(location.search)
document.getElementById('msg').innerHTML = params.get('search')

攻擊者建立了跟前面 reflected XSS 一樣的 URL http://example.com?search=<script>alert('xss attack')</script>，但這次這個腳本不用等真的送去後端 server，前端這段不小心寫死的 code 就會直接把這段 script 放到 DOM 裡面，然後執行。
這就是 DOM-based XSS。
所以 DOM-based XSS 是基本只能靠前端自己去防範的，它不像 stored XSS 跟 reflected XSS 還有後端可以幫忙攔截。

XSS 的防範上主要體現在前後端是否對用戶輸入資料進行驗證管理，將不符合規範的資料剃除。
以前端來講可以做 HTML escaping 或是透過正規表達式來檢驗使用者輸入的資料或將輸入的資料統一轉成字串。
總而言之，就是你沒用框架開發時，就得好好地對使用者輸入的資料做驗證與轉換。
然後無論使用框架與否，都要好好注意前端 code 的漏洞，所以適當 code review 是必要的。

CSRF

CSRF 是跨站請求偽造 (Cross-Site Request Forgery) 的意思。
它的基本概念是「假裝為受害者的身份」進行網路請求。

既然要先假裝成受害者的身份，那就得先取得受害者的身份資訊。
所以通常攻擊者會在受害者「已登入」的情況下，誘導受害者點擊一個惡意連結或載入一個惡意網頁。
這類惡意連結可能藏在一張平平無奇的圖片中，或是藏在一個看似無害的按鈕中。
一旦受害者點了惡意連結，這個連結會偷偷對你登入的網站發送請求。
而因為瀏覽器會自動帶上 你的 Cookie/Session，所以後端以為這是你本人操作。
所以才說網路很危險，網頁不要亂點。

DDoS

同場加映一個大家常聽到的 DDoS (Distributed Denial of Service) 分散式阻斷服務攻擊。
這其實不關前端的事，但因為太常出現了，現今也都持續有新聞說某某知名網站被 DDoS 攻擊而癱瘓，所以也順便提一下。

DDoS 其實是透過大量無意義的請求來癱瘓一個網站。
簡單來說就是把網站背後的 server 給塞爆，導致正常使用者無法使用服務。
攻擊者會利用這種混亂，趁機尋找網站其他漏洞，進而入侵。

murmur 一下

其實前端能碰到的資安內容真的不多，XSS 跟 CSRF，尤其是 XSS 已經是前端能接觸最近的資安議題了，但這塊也被偉大的框架們給解決了。
一般來說，常見的入侵要嘛是發生在網路通訊階段 (例如攔截封包、攻擊伺服器)，不然就是誘騙使用者下載惡意軟體，直接進行本地入侵。
以上兩種入侵方式其實都不是前端能處理的範疇。
所以本質上，前端其實離當駭客還有一大段距離的 www

但即使如此，我還是很推薦可以看一下資安相關的書或文章，即使可能對於前端開發沒太多實質幫助，但對於個人平日的網路使用安全還是有些助益的。