Web Security on the Frontend

All the security tools available to a web frontend engineer in 2021 when building web applications for the next billion users.

Transcript

1. JavaScript Community of Experts Web Security On the Frontend By Ifeora Okechukwu Izunna
2. • Introduction • Principles Of Security • Current Situation • Accessing Options • Settling Into A Solution • Gotchas (Caveats) • Broader Considerations • Addendum • Closing Remarks • Questions ? Agenda
3. - Ifeora Okechukwu Izunna Frontend Engineer AARP Project (Modus Create) Nigerian Loves Games & Gadgets + Recovering Perfectionist Hey there! Introduction
4. Principles Of Security • Principle of Zero Trust • Principle of Least Privilege • Principle of layered security
5. OWASP + W3C OWASP makes the data on high risk vulnerabilities on the web available and W3C acts on it together with browser vendors! • Cross-Site Scripting (increasing occurrence: +) • Dangling Markup (increasing occurrence: +) • Code Injection (increasing occurrence: +) • ClickJacking (decreasing occurrence: -) • Cross-Site Request Forgery (decreasing occurrence: -) Current Situation 2013 - 2021 (Retrospect)
6. 3 tools have been added to the toolbox since 2012 • Same-Site setting on cookies • Content Security Policy (CSP) • Trusted types (TT) Between 2012 and Now Accessing Options
7. • Reflected XSS vs. Stored XSS • Content Exfiltration • Cookies vs. LocalStorage Objectives Settling Into A Solution
8. • Side-Channel Vulnerabilities • Security Misconfigurations Ooops! I don’t gat it Gotchas As you implement CSP or TT, it’s important to take care that you configure it properly and correctly and not introduce side-channel vulnerabilities in the process.
9. 1. Reflected XSS, Dangling Markup & Code Injection (Example Malicious Code) 2. Bypassing CORS on a GraphQL server using a HTML Form (Example Malicious Code) Gotchas (In Code) Also, be sure to test your frontend using a Burp Collaborator Client with example malicious code during vulnerability tests/scans. This is important as you might find out some edge case defect in security as you test.
10. • Buy-in from the team members • Don’t have multiple people working to implement the same kind of security option • Do not implement by yourself if you aren’t very savvy. Broader Considerations
11. • Using OSS libraries like DOMPurify & URISanity alongside TrustedTypes in ReactJS • DOMPurify is an excellent javascript library for aiding with Trusted Type security option Addendum
12. Closing Remarks • Principle of Zero Trust (used in Same-site setting for Cookies) • Principle of Least Privilege (used in Content Security Policy) • Principle of layered security (used as a combination of Trusted types & Content Security Policy)
13. Questions ?
14. Thank You! trevor@moduscreate.com