前言
身為一個前端工程師，或是一個會寫 JavaScript 的人，你一定多少有聽過 prototype 這個名詞，甚至面試的時候也會考到相關的題目。
但你可能沒聽過的是，在 JavaScript 中有一種攻擊手法跟原型鏈息息相關，利用原型鏈這個功能的特性來進行攻擊——Prototype pollution，通常翻做原型鏈污染，就是這麼有趣而且破壞力十足的一個攻擊手法。
在許多網站中都有個很常見的功能，就是重新導向。
舉例來說，如果要觀看的頁面需要權限但是使用者還沒登入，就會先把使用者導去登入頁面，登入完之後再導回原本要去的頁面。
例如說今天有個社群網站，想要看個人檔案的話需要登入，而小明的個人檔案網址是：https://example.com/profile/ming，那我身為一個訪客，點進去之後就會跳轉到登入頁面，並且帶上我原本要去的網址當作參數：https://example.com/login?redirect=https://example.com/profile/ming
登入成功之後，網站就會根據 redirect 的值，把我導去原本要前往的頁面。
雖然看起來是個小功能，但其實背後有不少安全性的問題要考慮。
在針對前端的各種攻擊手法之中，我覺得 clickjacking 是相當有趣的一個。它的中文翻譯通常翻成「點擊劫持」，實際上的意思是你以為點了 A 網頁的東西，其實卻是點到了 B 網頁，惡意網頁劫持了使用者的點擊，讓使用者點到意料之外的地方。
只是一個點擊而已，這樣會有什麼危害嗎？
假設在背後的是一個銀行轉帳頁面，而且帳號跟金額都填好了，只要按一個按鈕就會轉錢出去，這樣的話危害就很大了（不過這通常不太可能啦，因為轉帳還需要輸入 OTP 之類的，這只是舉例）。
或是舉個更常見的例子，例如說有個乍看之下是取消訂閱電子報的頁面，於是你點了「確定取消」的按鈕，但其實底下藏著的是 Facebook 的按讚鈕，所以你不但沒有取消訂閱，還被騙了一個讚（因為劫持的目標是讚，所以又稱為 likejacking）。
這篇文章我會介紹 clickjacking 的攻擊原理、防禦方式以及實際案例，讓大家更了解這個攻擊手法。
Intigriti 這個網站每個月都會有 XSS 挑戰，給你一週的時間去解一道 XSS 的題目，目標是成功執行 alert(document.domain)。
身為一個前端資安混血工程師，我每個月都有參加（但不一定有解出來），底下是前幾個月的筆記：
每個月的挑戰都相當有趣，我覺得難易度也掌握得不錯，沒有到超級無敵難，但也不會輕易到一下就被解開。而這個月的挑戰我也覺得很好玩，因此在解開之後寫了這篇心得跟大家分享，期待有越來越多人可以一起參與。
在網站相關的攻擊手法上，大家比較常看見的應該是 XSS、SQL injection 或是 CSRF 這些方法，而今天要介紹的是另外一種大家可能聽過但沒有這麼熟悉的：DoS，Denial-of-Service 攻擊。
講到 DoS，多數人可能都會想到是不是要送很多封包給網站，然後讓網站伺服器來不及回應或是資源耗盡才能達成目標。或也可能想到的是 DDoS（Distributed Denial-of-Service），不是一台主機而是一堆主機同時送封包給某個伺服器，然後把它打掛。
DoS 與 DDoS 其實有分不同層的攻擊，這些層對應到大家以前可能學過的 OSI Model，例如說大家記憶中的攻擊比較像是 L3 網路層與 L4 傳輸層的攻擊，詳細的攻擊手法可以參考：什麼是 DDoS 攻擊？ 以及 How do layer 3 DDoS attacks work? | L3 DDoS。
但這篇想跟大家分享的攻擊手法，是存在於 L7 應用層的 DoS 攻擊。
例如說某個網站有個 API 可以查詢資料，然後有設一個預設的 limit 是 100，結果我把它改成 10000 之後發現 server 大概要一分多鐘才能給我 response，於是我就每兩秒送一個 request，送著送著就發現網站越變越慢，最後整個掛掉只能回 500 Internal Server Error，這就是應用層的 DoS 攻擊。
只要能找到一個方法讓使用者無法存取網站，就是一種 DoS 的攻擊。而我們找出的方法是建立於 L7 應用層，所以是 L7 的 DoS 攻擊。
在眾多 L7 DoS 攻擊手法中有一種我覺得特別有趣，那就是 Cookie Bomb，直翻就叫做 Cookie 炸彈。
談到 XSS（Cross-site scripting），許多人可能都只想到「就是網站上被攻擊者植入程式碼」，但若是仔細去想的話，會發現這之中其實還有很多環節都可以再深入探討。
而我所謂的這些「環節」，也可以理解成不同的「關卡」。
舉例來說，第一關當然就是盡可能防止自己的網站被 XSS 攻擊，不要讓攻擊者在網站中能夠植入程式碼。而「讓攻擊者在網站中植入程式碼」這件事，又可以往下再細分成不同地方的植入，例如說 HTML 的植入，或者是 HTML 元素屬性中的植入，又或是 JavaScript 程式碼中的植入，這些都有著不同的攻擊以及防禦方式。
而除了防止被植入程式碼以外，防守方應該還要進一步去想：「那如果真的不幸被植入程式碼了，可以怎麼辦？」
這就是第二個關卡。雖然說第一關我們已經盡可能做好準備了，但難保不會有漏洞產生，因此守好第一關是不夠的，也要對第二關進行防守。
假設今天攻擊者真的找到一個地方植入程式碼，那我們是不是可以想辦法阻止它執行？這就是 CSP（Content Security Policy）出場的時候了，藉由設定一些規則讓不合法的程式碼無法執行。例如說可以讓 inline 的 JavaScript 無法執行，那 <img src=x onerror=alert(1)> 就會變得無效。
若是攻擊者真的很厲害，連 CSP 的規則都繞過了呢？這時就進入到第三關了，第三關的假設是攻擊者已經能夠在網站上執行任意程式碼。
這時候還可以防守什麼呢？那就是試圖把損害控制到最低。
以 Medium 這種部落格的平台來說，若是可以利用 XSS 把別人的帳號奪走（account takevoer），就是個嚴重的漏洞；或是因為 Medium 有付費牆的功能，因此若是能透過 XSS 把錢轉到攻擊者的帳號，也會是一個很嚴重的問題。
而我們要在「網站已經被 XSS」的前提下，試圖去防禦這些攻擊。
接著，就讓我們來看看不同的關卡有哪些不同的防禦方法。
之前在公司內接到了一個需求，需要產生出一份 PDF 格式的報告。想要產一份 PDF 有很多種做法，例如說可以先用 Word 做，做完之後再轉成 PDF。但我聽到這需求時，最先出現的想法就是寫成網頁，然後再利用列印功能轉成 PDF。
我在前公司的時候看過一個用 JS 來產生 PDF 的專案，是用 PDFKit 來做，自由度極高，但我覺得滿難維護的。原因是用這一套的話，就有點像是把 PDF 畫出來，你要指定 (x,y) 座標去畫東西，可能改一個小地方，就要改很多行程式碼。
那時候我想說怎麼不直接用最簡單的 HTML + CSS 就好，切好版之後再轉成 PDF，如果不想手動轉，也可以透過 headless chrome 去轉，因為是網頁的關係所以應該滿好維護的。而且排版的話因為是用 HTML 跟 CSS，應該會比用畫的簡單許多才對。
直到我後來接觸到網頁轉 PDF，才發現事情不像我想的這麼簡單。