身為一個軟體工程師，對資訊安全一定不陌生。在工作上的專案可能有經過資安的審核，包括靜態程式碼掃描、弱點掃描或是滲透測試等等，再更進階一點可能做過更全面的紅隊演練。除此之外，也可能聽過什麼是 OWASP，大概知道 OWASP top 10 包含了哪些東西，知道常見的資安漏洞有哪些。
但是當我們把範圍限縮，來談「網頁前端的資訊安全」時，應該不少人都只知道 XSS，然後就沒了。
如果把網頁前端資安的領域比喻成一個宇宙的話，XSS 或許就是那顆最大最亮的星球，佔據了多數人的目光。但除了它以外，在宇宙中還有很多沒這麼大的行星與恆星，它一直都在那，你只是沒發現而已。
除了 XSS 以外，還有很多值得學習的資安議題，例如說利用 JavaScript 特性的 prototype pollution、根本不需要 JavaScript 就能執行的 CSS injection 攻擊，或是網頁前端的旁路攻擊 XSLeaks 等等。
身為一個前端工程師，當我踏進資安的領域時，彷彿進入了另外一個世界。在那個世界中有著我熟悉的 HTML、CSS 與 JavaScript，但卻是從來沒見過的使用方式。做這行做了五六年，我以為大概八成的使用方法都看過了，但接觸資安之後才發現是顛倒過來，大概有八成的東西都沒見過！
因此，這個系列文希望能介紹給大家一些前端資安的議題，帶大家一起探索前端資安的宇宙！
內容會涵蓋的主題包括：
而這個系列文大致上可以分成底下五個章節：
第一章：從 XSS 開始談前端資安
第二章：XSS 的防禦方式以及繞過手法
第三章：不直接執行 JavaScript 的攻擊手法
第四章：跨越限制攻擊其他網站
第五章：其他有趣的前端資安主題
目標讀者是對資安有興趣的朋友們以及前端工程師，會預設大家至少知道一些基本的技術概念，例如說前後端的區別以及對於 HTML、CSS 與 JavaScript 的基本理解。
在資安的世界裡，知識量是很重要的，有些東西你不知道就是不知道，在開發的時候有可能根本不知道這樣寫會有問題，就無意間產生了一個資安漏洞。希望大家能夠從這個系列文中學到一些新知識，如果能讓你對前端資安感到興趣，那就太好了，但若是沒有的話，我也希望至少能讓大家看到前端的另一個樣貌，體會到我當時接觸資安時的感覺，簡單來說就是：「靠，怎麼我以前完全不知道這些東西」。
另外要先說明一件事情，當初這個系列文是以「介紹各種前端資安議題」的出發點規劃的，規劃完以後我發現有些內容已經在自己的部落格寫過文章了。雖然說文章可以整個重寫，但有些以前的文章我覺得還是寫得滿不錯的，沒有把握重寫一次會更好。
因此，那些部落格文章會小幅修改以後拿來這邊用。在報名鐵人賽前我有寫信給主辦單位詢問這種做法是否允許，得到的答案是肯定的，他們說官方處理的是「對他人的」模仿與抄襲，拿自己寫過的舊文是沒問題的。
但我自己也會覺得如果直接拿舊文複製貼上，稍嫌誠意不足，因此雖然是舊文，但除了會重新檢查並修正，如果有能補充的新知識我也會一併補充上去。所以，如果你有看到部份文章內容似曾相識，有可能就是從舊文移植過來的。話雖如此，我能保證比例不會佔到太多，大多數文章都還是為了鐵人賽從零開始寫起的。
最後，資訊安全的領域既廣又深，如果我的文章裡面有任何技術上錯誤的地方，還請讀者們不吝指正，感謝。
iThome鐵人賽
看影片追技術