跳到主要内容

Browser Security

XSS · CSRF · CORS · Same-Origin = browser security basics

XSS (Cross-Site Scripting)​

"Inject malicious scripts"

XSS allows attackers to inject malicious scripts into web pages viewed by users.

"XSS is a vulnerability where attackers inject malicious scripts into web pages, which execute in users' browsers."

XSS Types​

Stored · Reflected · DOM-based

TypeHowExample
StoredSaved in databaseUser comments
ReflectedReflected in responseURL parameters
DOM-basedClient-side onlyClient-side rendering

"XSS can be stored (persisted), reflected (in response), or DOM-based (client-side only)."

XSS Prevention​

Escape · Sanitize · CSP

  • Escape output: Encode HTML entities
  • Sanitize input: Remove/escape dangerous content
  • Content Security Policy (CSP): Restrict script sources
  • Use frameworks: React/Vue auto-escape

"Prevent XSS by escaping output, sanitizing input, using CSP headers, and leveraging framework auto-escaping."

CSRF (Cross-Site Request Forgery)​

"Forced actions on authenticated sites"

CSRF tricks users into performing actions on sites where they're authenticated.

"CSRF forces authenticated users to execute unwanted actions on web applications."

CSRF Prevention​

CSRF tokens · SameSite cookies

  • CSRF tokens: Unique tokens per request
  • SameSite cookies: Restrict cookie sending
  • Referer header: Check request origin
  • Double-submit cookies: Cookie + token

"Prevent CSRF with CSRF tokens, SameSite cookie attribute, referer checking, or double-submit cookie pattern."

CORS (Cross-Origin Resource Sharing)​

"Control cross-origin requests"

CORS is a security mechanism that controls which origins can access resources.

"CORS controls cross-origin HTTP requests, allowing servers to specify which origins can access resources."

Same-Origin Policy​

"Same protocol + domain + port"

Same-origin means:

  • Same protocol (http/https)
  • Same domain
  • Same port

"Same-origin policy restricts access to resources from different origins (protocol, domain, or port)."

Content Security Policy (CSP)​

"Restrict resource loading"

Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'
  • Prevents XSS
  • Restricts resource sources
  • Reports violations

"CSP headers restrict which resources can be loaded, helping prevent XSS attacks."

9️⃣ Secure Cookies​

HttpOnly · Secure · SameSite

Set-Cookie: session=abc123; HttpOnly; Secure; SameSite=Strict
  • HttpOnly: Not accessible via JavaScript
  • Secure: Only over HTTPS
  • SameSite: CSRF protection

"Secure cookies use HttpOnly (no JS access), Secure (HTTPS only), and SameSite (CSRF protection) attributes."

HTTPS​

"Encrypted communication"

  • Encrypts data in transit
  • Prevents man-in-the-middle attacks
  • Required for sensitive data
  • Uses TLS/SSL

"HTTPS encrypts communication between browser and server, preventing interception and tampering."

Best Practices​

✅ Use HTTPS everywhere ✅ Sanitize and escape user input ✅ Implement CSP ✅ Use secure cookie attributes ✅ Validate on server side ✅ Keep dependencies updated ❌ Never trust client-side validation alone

"Browser security involves preventing XSS through input sanitization and output escaping, preventing CSRF with tokens and SameSite cookies, managing CORS for cross-origin requests, enforcing same-origin policy, using CSP headers to restrict resources, and securing cookies with HttpOnly, Secure, and SameSite attributes. Always use HTTPS for encrypted communication."

🧠 Ultra-Short Cheat Sheet​

XSS (escape, sanitize, CSP)
CSRF (tokens, SameSite)
CORS (cross-origin)
Same-origin policy
CSP headers
Secure cookies (HttpOnly, Secure, SameSite)
HTTPS