JavaScript Community of Experts Web Security On the Frontend By Ifeora Okechukwu Izunna 

● Introduction ● Principles Of Security ● Current Situation ● Accessing Options ● Settling Into A Solution ● Gotchas (Caveats) ● Broader Considerations ● Addendum ● Closing Remarks ● Questions ? Agenda 

- Ifeora Okechukwu Izunna Frontend Engineer AARP Project (Modus Create) Nigerian Loves Games & Gadgets + Recovering Perfectionist Hey there! Introduction 

Principles Of Security ● Principle of Zero Trust ● Principle of Least Privilege ● Principle of layered security 

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) 

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 

● Reflected XSS vs. Stored XSS ● Content Exfiltration ● Cookies vs. LocalStorage Objectives Settling Into A Solution 

● 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. 

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. 

● 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 

● Using OSS libraries like DOMPurify & URISanity alongside TrustedTypes in ReactJS ● DOMPurify is an excellent javascript library for aiding with Trusted Type security option Addendum 

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) 

Questions ? 

Thank You! [email protected]