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.

C66dbce1b5c38aabd56bd6d3ef3d29fb?s=128

Ifeora Okechukwu

July 29, 2021
Tweet

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