Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Security on the Frontend

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.


Ifeora Okechukwu

July 29, 2021


  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