身為一個軟體工程師，對資訊安全一定不陌生。

例如說在工作上，可能有被要求做過靜態的程式碼掃描，一邊看著報告一邊想說：「原來這也算漏洞嗎⋯⋯」，或者是更進階一點的自動化弱點掃描，再不然就是實際由資安人員去打的滲透測試，抑或是更全面的紅隊演練，全方位地去找出具有風險的漏洞。

就算不是軟體工程師，也可能從新聞或社群媒體等等的管道，接收過關於資訊安全的消息，大概有聽過一些名詞，知道駭客會把資料庫偷走，或者是在電腦裡面安裝勒索軟體等等。

照理來講，除了資安業界的同行以外，軟體工程師應該是第二瞭解資安的群體了，畢竟平常工作上多少都會接觸到嘛！ SQL injection ？當然聽過！密碼要 hash ？當然⋯⋯當然聽過吧⋯⋯是吧？但是當我們把範圍縮小，來談「網頁前端的資訊安全」時，應該不少人都只知道 XSS，然後就沒了。

如果把網頁前端資安的領域比喻成一個宇宙的話，XSS 就是那顆最大最亮的星球，佔據了多數人的目光。但除了它以外，在宇宙中還有很多沒這麼耀眼的行星與恆星，它一直都在那，你只是沒有發現而已。

其實除了 XSS 以外，還有很多值得學習的資安議題，例如說利用 JavaScript特性的 prototype pollution、根本不需要 JavaScript 就能執行的 CSS injection 攻擊，或是網頁前端的旁路攻擊 XS-Leaks 等等，這些都是很有趣的議題。

但就如同底下的圖一樣，大部分的工程師所理解的前端資安，其實只是這個領域中的冰山一角，在水面下其實還有很多很多等著我們去探索以及學習的攻擊手法。

身為一個前端工程師，當我踏進資安的領域時，彷彿進入了另外一個世界。在那個世界中有著我熟悉的 HTML、CSS 與 JavaScript，但卻是從來沒見過的使用方式。做這行做了五六年，我以為大概八成的使用方法都看過了，但接觸資安之後才發現是顛倒過來，只看過兩成而已，有八成的東西都沒見過！

因此，這本書的目的是希望能介紹一些前端資安的議題，並且帶大家一起探索前端資安的宇宙！

本書會涵蓋的主題都列在下面了，可以看看有多少是你熟悉的，又有多少是完全沒聽過的：

1. XSS（Cross-Site Scripting）

2. CSP（Content Security Policy）

3. Sanitization

4. HTML injection

5. CSS injection

6. DOM clobbering

7. Prototype pollution

8. CSRF（Cross-site request forgery）

9. CORS（Cross-origin resource sharing）

10. Cookie tossing

11. Cookie bomb

12. Clickjacking

13. MIME sniffing

14. XS-Leaks（Cross-site leaks）

15. CSTI（Client side template injection）

16. Subdomain takeover

17. Dangling markup injection

18. Supply chain attack

而整本書籍會分成六個章節，循序漸進探索美妙的前端資安宇宙，一點一點慢慢認識不同的漏洞以及攻擊手法，這六個章節如下：

第一章：從 XSS 開始談前端資安

第二章：XSS 的防禦方式以及繞過手法

第三章：不直接執行 JavaScript 的攻擊手法

第四章：跨越限制攻擊其他網站

第五章：其他有趣的前端資安主題

第六章：Case study - 有趣的攻擊案例分享

在資安的世界裡，知識量是很重要的，有些東西你不知道就是不知道，在開發的時候有可能根本不知道這樣寫會有問題，就無意間寫出了一段有漏洞的程式碼。因此，希望大家能夠從這本書中學到一些新知識，如果能讓你對前端資安感到興趣，那就太好了，但若是沒有的話，我也希望至少能讓大家看到前端的另一個樣貌，體會到我當時接觸資安時的感覺，簡單來說就是：「靠，怎麼我以前完全不知道這些東西」。

本書的目標讀者是對資安有興趣的朋友們以及前端工程師，會預設大家至少知道一些基本的技術概念，例如說前後端的區別以及對於 HTML、CSS 與JavaScript 的基本理解等等，畢竟資安本來就是屬於較為進階的議題，一定要先理解基礎，才能知道攻擊以及防禦的方法。

就算你是對資安沒太大興趣的前端工程師，我也很推薦閱讀這本書，因為書中也會有許多關於前端的知識，能夠幫你補強基礎，讓你更理解網頁前端開發的核心技術。

最後，資訊安全的領域既廣又深，每個領域都可以不斷往下鑽，如果本書中裡面有任何技術上錯誤的地方，還請讀者們不吝指正，感謝。

身為一個軟體工程師，對資訊安全一定不陌生。

例如說在工作上，可能有被要求做過靜態的程式碼掃描，一邊看著報告一邊想說：「原來這也算漏洞嗎⋯⋯」，或者是更進階一點的自動化弱點掃描，再不然就是實際由資安人員去打的滲透測試，抑或是更全面的紅隊演練，全方位地去找出具有風險的漏洞。

就算不是軟體工程師，也可能從新聞或社群媒體等等的管道，接收過關於資訊安全的消息，大概有聽過一些名詞，知道駭客會把資料庫偷走，或者是在電腦裡面安裝勒索軟體等等。

照理來講，除了資安業界的同行以外，軟體工程師應該是第二瞭解資安的群體了...

第1 章 從 XSS 開始談前端資安
1-1 瀏覽器的安全模型
▌禁止主動讀寫本機的檔案
▌禁止呼叫系統API
▌禁止存取其他網頁的內容
1-2 前端資安還是得從XSS 開始談起才對味
▌XSS是什麼？可以做到哪些事情？
▌XSS的來源
▌Self-XSS
▌Blind XSS
1-3 再多了解 XSS 一點點
▌能夠執行 JavaScript 的方式
▌不同情境的 XSS 以及防禦方式
▌注入HTML
▌注入屬性
▌注入 JavaScript
1-4 危險的 javascript: 偽協議
▌什麼是 javascript: 偽協議？
▌哪些地方可以使用 javascript: 偽協議？
▌為什麼它很危險？
▌頁面跳轉也有風險
▌防禦方式
▌實際案例
▌小結

第2 章 XSS 的防禦方式以及繞過手法
2-1 XSS 的第一道防線：Sanitization
▌最基本的手段：編碼
▌該如何處理HTML
▌使用 DOMPurify
▌正確的函式庫，錯誤的使用方式
▌小結
2-2 XSS 的第二道防線：CSP
▌自動防禦機制：Content Security Policy
▌CSP的規則
▌script-src 的規則
▌怎麼決定CSP 規則要有哪些？
▌別人的CSP 是怎麼設定的
▌小結
2-3 XSS 的第三道防線：降低影響範圍
▌第一招：最有效的解法 - 多重驗證
▌第二招：不讓 token 被偷走
▌第三招：限制 API 的呼叫
▌第四招：限制 token 的權限
▌小結
2-4 最新的XSS 防禦：Trusted Types 與內建的Sanitizer API
▌Sanitizer API
▌Trusted Types
▌小結
2-5 繞過你的防禦：常見的CSP bypass
▌經由不安全的 domain 的繞過
▌經由base 的繞過
▌經由JSONP 的繞過
▌JSONP繞過的限制
▌經由重新導向的繞過
▌經由RPO 的繞過
▌其他種類的繞過
▌小結
2-6 繞過你的防禦：Mutation XSS
▌Sanitizer 的基本運作方式
▌瀏覽器的貼心服務
▌神奇的 HTML
▌全部加在一起
▌問題的修復
▌小結
2-7 最強的 XSS：Universal XSS
▌2006年的Firefox 的Adobe Acrobat plugin
▌2012 年的 Android Chrome 的 UXSS
▌2019年Chromium 透過portal 的UXSS
▌2021年Chromium 透過下載圖片觸發的 UXSS
▌多個Brave 瀏覽器iOS app 的 UXSS
▌小結

第3 章 不直接執行 JavaScript 的攻擊手法
3-1 利用原型鏈的攻擊方式：Prototype Pollution
▌原型鏈簡介
▌改變預設prototype 上的屬性
▌污染了屬性以後可以幹嘛？
▌Prototype pollution 是怎麼發生的？
▌Prototype pollution script gadgets
▌該如何防禦
▌實際案例
▌看不見的前端gadget
▌小結
3-2 HTML 也可以影響JavaScript ？ DOM clobbering 介紹
▌DOM與window 的量子糾纏
▌DOM clobbering 入門
▌多層級的DOM Clobbering
▌再更多層級的DOM Clobbering
▌透過document 擴展攻擊面
▌實際案例研究：Gmail AMP4Email XSS
▌小結
3-3 前端的模板注入攻擊：CSTI
▌Server Side Template Injection
▌SSTI的實際案例
▌Client Side Template Injection
▌CSTI 的實際案例
▌AngularJS 與CSP bypass
▌小結
3-4 只用CSS 也能攻擊？ CSS injection 基礎篇
▌什麼是CSS injection？
▌利用CSS 偷資料
▌偷hidden input
▌偷meta
▌偷HackMD 的資料
▌CSS injection 與其他漏洞的組合技
▌小結
3-5 CSS injection 進階篇
▌偷到所有字元
▌一次偷一個字元，太慢了吧？
▌偷其他東西
▌字體高度差異+ first-line + scrollbar
▌大絕招：ligature + scrollbar
▌防禦方式
▌小結
3-6 就算只有HTML 也能攻擊？
▌Reverse tabnabbing
▌透過meta 標籤重新導向
▌透過 iframe 的攻擊
▌透過表單也能攻擊？
▌Dangling Markup injection
▌小結

第4 章 跨越限制攻擊其他網站
4-1 重中之重：Same-origin policy 與site
▌Origin 跟 site 到底是什麼？該怎麼區分？
▌細究same origin
▌細究same site
▌Same origin 與same site
▌神奇的document.domain
▌案例一：單方面改變
▌案例二：消失的 port
▌案例三：我不是原來的我
▌document.domain 的淡出及退場
▌小結
4-2 跨來源資源共用CORS 基本介紹
▌為什麼不能跨來源呼叫API？
▌隨堂小測驗
▌跨來源AJAX 是怎麼被擋掉的？
▌該如何設置CORS？
▌小結
4-3 跨來源的安全性問題
▌CORS misconfiguration
▌實際案例
▌其他各種COXX 系列header
▌嚴重的安全漏洞：Meltdown 與Spectre
▌超級簡化版的Spectre 攻擊解釋
▌CORB（Cross-Origin Read Blocking）
▌CORP（Cross-Origin Resource Policy）
▌Site Isolation
▌COEP（Cross-Origin-Embedder-Policy）
▌COOP（Cross-Origin-Opener-Policy）
▌再回到cross-origin isolated state
▌小結
4-4 跨站請求偽造 CSRF 一點就通
▌從偷懶的刪除功能開始介紹CSRF
▌使用者的防禦
▌伺服器的防禦
▌檢查Referer 或是Origin header
▌加上圖形驗證碼或是簡訊驗證碼等等
▌常見的防禦方式
▌純前端的Double Submit Cookie
▌其他解法
▌加上 custom header
▌實際案例
▌漏洞連連看：CSRF 與 self-XSS
▌小結
4-5 Same-site cookie，CSRF 的救星？
▌初探 same-site cookie
▌Same-site cookie 的歷史
▌中場休息加思考時間
▌GET型態的CSRF
▌Same-site cookie 的隱藏規則
▌防止CSRF，真的只要same-site cookie 就夠了嗎？
▌實際案例
▌小結
4-6 從same-site 網站打進你家
▌Subdomain takeover
▌獲取子網域控制權以後可以做的事
▌運用錯誤的安全假設
▌Cookie tossing
▌小結
4-7 有趣又實用的Cookie bomb
▌Cookie bomb 介紹
▌攻擊流程
▌防禦方式
▌攻擊面擴展
▌找到輕易設置cookie 的地方
▌實際測試
▌防禦方式
▌再看一個實際的案例
▌Cookie bomb 的漏洞連連看
▌小結

第5 章 其他有趣的前端資安主題
5-1 你的畫面不是你的畫面：Clickjacking 點擊劫持
▌Clickjacking 攻擊原理
▌Clickjacking 的防禦方式
▌防禦總結
▌實際案例
▌無法防禦的clickjacking？
▌小結
5-2 結合MIME sniffing 發起攻擊
▌MIME sniffing 初體驗
▌利用MIME sniffing 進行攻擊
▌可以執行JavaScript 的content type
▌可以當成script 載入的content type
▌Content type 檢查的繞過
▌小結
5-3 前端供應鏈攻擊：從上游攻擊下游
▌cdnjs
▌解析cdnjs 的RCE 漏洞
▌身為前端工程師，該如何防禦？
▌小結
5-4 網頁前端攻擊在Web3 上的應用
▌影響力更大的XSS
▌Cookie bomb 的實際應用
▌小結
5-5 最有趣的前端旁路攻擊：XS-Leaks
▌旁路攻擊，就是一種旁敲側擊
▌XS-Leaks 實際體驗
▌利用狀態碼的XS-Leaks
▌XS-Leaks 的防禦方式
▌其他可以 leak 的東西
▌小結
5-6 XS-Leaks 的進階應用XS-Search 與Cache probing
▌Cache probing
▌Cache probing 加error event，蹦出新滋味
▌實際的Google XS-Search 案例
▌Cache partitioning
▌更多XS-Leaks
▌小結

第6 章 Case study - 有趣的攻擊案例分享
6-1 差一點的Figma XSS
6-2 繞過層層防禦：Proton Mail XSS
6-3 隱藏在Payment 功能中的Chrome 漏洞
6-4 從Prototype Pollution 到Bitrix24 XSS
6-5 PHP 底層bug 引發的Joomla! XSS

結語

第1 章 從 XSS 開始談前端資安
1-1 瀏覽器的安全模型
▌禁止主動讀寫本機的檔案
▌禁止呼叫系統API
▌禁止存取其他網頁的內容
1-2 前端資安還是得從XSS 開始談起才對味
▌XSS是什麼？可以做到哪些事情？
▌XSS的來源
▌Self-XSS
▌Blind XSS
1-3 再多了解 XSS 一點點
▌能夠執行 JavaScript 的方式
▌不同情境的 XSS 以及防禦方式
▌注入HTML
▌注入屬性
▌注入 JavaScript
1-4 危險的 javascript: 偽協議
▌什麼是 javascript: 偽協議？
▌哪些地方可以使用 javascript: 偽協議？
▌為什麼它很危險？
▌頁面跳轉也有...