前端儲存資料與 XSS, CSRF 的攻擊介紹

1. 2020-04-07 郭晉名
淺談前端儲存與其攻擊

2. 1. 為何前端需要儲存資料
1-1: Session
2. 前端儲存資料的地⽅
2-1. Cookies
2-2. localStorage
2-3. sessionStorage
3. CSRF 攻擊
4. CSRF 防護
5. XSS 攻擊
6. XSS 防護
7.補充

3. 為何需要前端儲存?
因為 HTTP 請求是”無狀態”的，兩個 request 之間是沒有關聯的。
為了要讓前端有狀態，需要記憶先前的事情。

4. Session
廣義的來說: 讓 request 變得有狀態。
有很多種⽅式 Cookie, URL, localStorage…

5. Cookies
由 server (後端) 傳給 Client 端 (瀏覽器) 的少量資料，並能儲存在瀏覽器。
是瀏覽器提供的儲存的功能。
並且在下次 request 時會*⾃動*攜帶。
儲存⼤⼩約 4kb.
Cookies 曾經是前端唯⼀儲存資料的地⽅。
但現在推薦使⽤ storage APIs (localStorage, sessionStorage)

6. Session & Cookies
⽤ cookies 實作 session
1. Session data 存後端 (檔案 or DB), cookies 只存 sessionID
2. Session data 加密存 cookies (cookie-based session)

7. localStorage & sessionStorage
localStorage.setItem('local', 'local');
sessionStorage.setItem('session', ‘session');
localStorage.getItem('local');
sessionStorage.getItem('session');
前端使⽤ JavaScript 存取, ⼤⼩約為 5MB

8. CSRF 攻擊
Cross-Site request forgery
惡意網站仿造被攻擊的網站請求，使⽤者在*不知情*的情況下，對被攻擊
的網站進⾏操作。

9. CSRF 防禦
攻擊概念: 跨網域的偽造請求。
解法: 分辯是哪個 domain 來的請求。
1. Set http header - Referer Attribute
2. 加上驗證碼，簡訊碼等等
3. CSRFtoken
4. Double submit cookie
5. Set http header - SameSite attribute

10. - None: ⼀並帶上。
- Strict: 不是同網域，就完全不帶上 cookies (UX體驗比較差⼀點，解決⽅法
是設定兩個 cookie)
- Lax: 不同網域⽤ href 或 form get 會帶上。
Chrome 80
在2020年2⽉將陸續更新
沒有設定 samesite 的 cookie 預設為 lax
https://www.netsparker.com/blog/web-security/same-site-cookie-
attribute-prevent-cross-site-request-forgery/
HTTP SameSite Attribute

11. Cross Site Scripting
使⽤者在被攻擊的網站注入攻擊的 code, 並讓被攻擊的網站執⾏。
盜取使⽤者資料，或近⼀步代替使⽤者進⾏網⾴操作。
利⽤ Code injection 弱點, 類似的攻擊有 SQL injection.
XSS

12. XSS 防禦
攻擊理念: 執⾏使⽤者惡意的程式碼
解法: 不要相信使⽤者的輸入
1. sanitize: 消毒, 替換特殊符號, < 換成 &lt;, & 換成 &amp; …
2. escape: 避免處理, vue: {{data}}, react: <%-, <%=
3. set Http header - Content-security-policy: 限定資源載入, 禁⽌ inline script
Content-Security-Policy: script-src ‘self’;

13. cookie header attribute
http header - HttpOnly attribute (只能在 http 傳輸下存取 cookies,
ex: document.cookie)
http header - Secure attribute (RFC: cookies 要在安全情況下傳輸)

14. OWASP TOP 10
CSRF: 5 -> 8 -> x
XSS: 2 -> 3 -> 7

15. 合體技 CSRF + code injection
Request body