Frontend
Security
Essentials

XSS · CSRF · token theft · CSP · HTTPS & CORS

Present16 slides · 30 min Presenter viewnotes · timer PDF

Slide overview

click any slide to start there

Frontend
Security
Essentials
XSS · CSRF · token theft · CSP · HTTPS & CORS
01Frontend Security Essentials
AGENDA
What we'll cover
01Why frontend security is critical
02Common threats: XSS, CSRF, token theft
03Securing inputs, tokens and cookies
04HTTPS, CORS and Content Security Policy
05Best practices and resources
02Agenda
A NOTE FIRST
Before we begin
01I'm not a security expert
02I'm here to share what I've learned
03Spot a mistake? Please correct me
04Your feedback makes this better
03Before we begin
WHY IT MATTERS
The browser is part of your attack surface
66%of breaches involve client-side vulnerabilities
>40%of reported web exploits are XSS
SPAs (React, Angular, Vue) push logic to the client.
Tokens and config often live in the browser.
04Why frontend security matters
THREAT 01
Cross-Site Scripting (XSS)
Injecting malicious scripts into pages other people open.
01ReflectedPayload rides in the request and is echoed back. Not stored.
02StoredPayload is saved on the server and served to every visitor.
03DOM-basedClient-side JS writes untrusted data into the page.
Impact: cookie theft and session hijacking
05Understanding XSS
LIVE DEMO
Try to inject
sandboxed: nothing executes here
comment from an untrusted user<img src=x onerror="alert(document.cookie)">
On a real page, this payload runs with the user's cookies.
SAFE<p>{comment}</p>
<img src=x onerror="alert(document.cookie)">
UNSAFEdangerouslySetInnerHTML={{ __html: comment }}
Parsed as HTML: the onerror handler fires.
06Live: try to inject

DEFENSE

Preventing XSS

01Sanitize user input before rendering

02Use frameworks with built-in escaping

03React escapes {data} by default

04CSP restricts where scripts load from

05Avoid dangerouslySetInnerHTML

safe-rendering.tsx

// Sanitize untrusted HTML firstimport DOMPurify from 'dompurify';const clean = DOMPurify.sanitize(userHtml);
// Let the framework escape by default<p>{comment}</p>  // text, never HTML
// Defense in depth: same-origin scripts only// Content-Security-Policy: script-src 'self'
// The escape hatch: sanitized input only<div dangerouslySetInnerHTML={{ __html: clean }} />

07Preventing XSS

THREAT 02
Cross-Site Request Forgery
A forged request that rides on the user's logged-in session.
1. 01Logs inUser signs in to bank.com and gets a session cookie.
2. 02Visits evil siteOpens a link to evil.example in another tab.
3. 03Hidden formThe page auto-submits a POST to bank.com/transfer.
4. 04Cookie attachedThe browser sends the session cookie automatically.
5. 05Money movedThe bank sees a valid request and performs it.
08What is CSRF?
DEFENSE
How to prevent CSRF
01SameSite cookiesLax or Strict stops cross-site cookie sending.
02CSRF tokensValidate one on every state-changing request.
03Strict CORSNever * on authenticated endpoints.
04Re-auth / 2FAFor transfers and account changes.
05Idle logoutEnd sessions after inactivity.
response header
Set-Cookie: session=7f3a9c; HttpOnly; Secure; SameSite=Lax; Path=/
09How to prevent CSRF
THREAT 03
Where should the token live?
Rotate tokens and keep lifetimes short, wherever they are.
storagereadable by JS (XSS)?sent automatically (CSRF)?lifetime
localStorageYes: any XSS can read itNoForever
sessionStorageYes: any XSS can read itNoUntil the tab closes
HttpOnly cookieNo: invisible to JSYes: add SameSite + CSRF tokenUntil it expires
10Prevent token theft

SUPPLY CHAIN

npm audit essentials

Scans every dependency for known vulnerabilities

Explains each issue and its severity

Suggests the fix version

Run it in CI on every pull request

A shield made of package logos being scanned

terminal

$ npm audit# npm audit report nth-check  <2.0.1Severity: highInefficient regular expression complexityfix available via `npm audit fix` 3 vulnerabilities (1 moderate, 2 high)$ npm audit fixfixed 3 of 3 vulnerabilities

11npm audit essentials

CHECKLIST
Secure data handling
Validate on both the client and the server
Sanitize to strip malicious content
HttpOnly + Secure flags on every auth cookie
SameSite so cookies stay on your site
No secrets in localStorage, ever
12Secure data handling

DEFENSE IN DEPTH

Content Security Policy

An allow-list of what your page may load and run, enforced by the browser.

Blocks inline scripts

HTTP header or <meta>

Stops injected third-party code

A shield labeled Content Security Policy

response header

Content-Security-Policy:  default-src 'self';  script-src 'self' https://cdn.example.com;  style-src 'self' 'unsafe-inline';  img-src 'self' data: https:;  connect-src 'self' https://api.example.com;  object-src 'none';  base-uri 'self';

13Content Security Policy

TRANSPORT
HTTPS and CORS
HTTPSEncrypt every requestProtects integrity and confidentiality, so nobody on the network can read or rewrite your code.
CORSAllow origins on purposeBlocks unauthorized cross-origin requests, as long as the headers are configured carefully.
response headers
Access-Control-Allow-Origin: https://app.example.comAccess-Control-Allow-Credentials: true# Never "Access-Control-Allow-Origin: *" on authenticated endpoints
14HTTPS and CORS
KEEP LEARNING
Resources
ScanUse security scanning toolsnpm audit · Dependabot · Snyk
Stay currentFollow security advisories and trendsGitHub Security Advisories
Code safelyFollow secure coding guidelinesOWASP Cheat Sheet Series · MDN Web Security
Know the risksLearn the OWASP Top 10owasp.org/Top10
15Frontend security resources
Ezzdin's Shelf · slides.ezzdinatef.com
Thank you.
Questions?
Escape · SameSite · CSP · npm audit
16Thank you and questions

Embed these slides

<iframe src="https://slides.ezzdinatef.com/embed/frontend-security-essentials" width="960" height="600" style="border:0;border-radius:12px" allow="fullscreen" title="Frontend Security Essentials"></iframe>

Frontend
Security
Essentials

Slide overview

Frontend
Security
Essentials

What we'll cover

Before we begin

The browser is part of your attack surface

Cross-Site Scripting (XSS)

Try to inject

Preventing XSS

Cross-Site Request Forgery

How to prevent CSRF

Where should the token live?

npm audit essentials

Secure data handling

Content Security Policy

HTTPS and CORS

Resources

Thank you.
Questions?

Embed these slides

More slides

Frontend
Security
Essentials

Slide overview

Frontend
Security
Essentials

What we'll cover

Before we begin

The browser is part of your attack surface

Cross-Site Scripting (XSS)

Try to inject

Preventing XSS

Cross-Site Request Forgery

How to prevent CSRF

Where should the token live?

npm audit essentials

Secure data handling

Content Security Policy

HTTPS and CORS

Resources

Thank you.
Questions?

Embed these slides

More slides

FrontendSecurityEssentials

Slide overview

FrontendSecurityEssentials

What we'll cover

Before we begin

The browser is part of your attack surface

Cross-Site Scripting (XSS)

Try to inject

Preventing XSS

Cross-Site Request Forgery

How to prevent CSRF

Where should the token live?

npm audit essentials

Secure data handling

Content Security Policy

HTTPS and CORS

Resources

Thank you.Questions?

Embed these slides

More slides

FrontendSecurityEssentials

Slide overview

FrontendSecurityEssentials

What we'll cover

Before we begin

The browser is part of your attack surface

Cross-Site Scripting (XSS)

Try to inject

Preventing XSS

Cross-Site Request Forgery

How to prevent CSRF

Where should the token live?

npm audit essentials

Secure data handling

Content Security Policy

HTTPS and CORS

Resources

Thank you.Questions?

Embed these slides

More slides

Frontend
Security
Essentials

Frontend
Security
Essentials

Thank you.
Questions?

Frontend
Security
Essentials

Frontend
Security
Essentials

Thank you.
Questions?