Cyber Security

Definition

Frontend = everything the user sees and uses, communicating with the backend (server & database) behind the scenes.

It may be:

1. Desktop frontend

2. Web frontend

3. Mobile Frontend

Potential Attacks

• Cross-Site Scripting (XSS)

  1. Escape user input; use Content Security Policy (CSP)

  2. element.textContent = userInput;

• Cross-Site Request Forgery (CSRF)

  1. Use SameSite cookies, CSRF tokens

  2. Set-Cookie: token=abc; SameSite=Strict

• Clickjacking

  1. Use X-Frame-Options or CSP frame-ancestors

  2. X-Frame-Options: DENY

  3. [ X-Frame-Options - X-Content-Type-Options - X-XSS-Protection - Content-Security-Policy ]

• Insecure Data Storage

  1. Avoid localStorage/sessionStorage for sensitive data

  2. Use HTTP-only cookies

  3. Sensitive Data Exposure

  4. Use HTTPS, encrypt data

• fetch('https://example.com')

• DOM-based XSS

  1. Sanitize dynamic DOM manipulation

  2. Use DOMPurify

• Insecure Redirects

  1. Validate redirect URLs

  2. Check with whitelist before redirecting

• Information Leakage via Comments

  1. Remove comments before production

  2. <!-- remove before release -->

• Source Code Exposure

  1. Use obfuscation and minification

  2. UglifyJS or Terser

• Hardcoded Secrets

  1. Store in secure backend, not frontend

  2. Use environment variables server-side

Security Approach

• Obfuscation

• CSP

• CORS

• HTTPOnly Cache

• Store secrets on BE not FE