Stored XSS: Malicious script stored in database
├── User posts comment: <script>stealCookies()</script>
├── Saved to database
└── Executed when others view the comment
 
Reflected XSS: Script in URL executed immediately
├── Attacker crafts URL: site.com/search?q=<script>evil()</script>
├── Victim clicks link
└── Script executes in victim's browser
 
DOM-based XSS: Client-side code processes unsafe data
├── page.html#<script>evil()</script>
├── JS reads location.hash and inserts into DOM
└── Script executes

// ❌ DANGEROUS: Direct HTML insertion
element.innerHTML = userInput;
document.write(userInput);
 
// ✅ SAFE: Text content (automatically escaped)
element.textContent = userInput;
 
// ✅ SAFE: Using DOM APIs
const div = document.createElement("div");
div.textContent = userInput;
parent.appendChild(div);
 
// Sanitizing HTML when you must render it
import DOMPurify from "dompurify";
 
function SafeHTML({ html }) {
  const sanitized = DOMPurify.sanitize(html, {
    ALLOWED_TAGS: ["b", "i", "em", "strong", "a", "p", "br"],
    ALLOWED_ATTR: ["href", "target"],
  });
 
  return <div dangerouslySetInnerHTML={{ __html: sanitized }} />;
}
 
// React automatically escapes by default
function SafeComponent({ userInput }) {
  return <div>{userInput}</div>; // Escaped automatically
}
 
// ❌ DANGEROUS: React escape hatch
function DangerousComponent({ userInput }) {
  return <div dangerouslySetInnerHTML={{ __html: userInput }} />;
}

// ❌ DANGEROUS: Unvalidated URLs
<a href={userProvidedUrl}>Link</a>;
 
// This allows: javascript:alert('XSS')
 
// ✅ SAFE: Validate URL protocol
function isSafeUrl(url) {
  try {
    const parsed = new URL(url);
    return ["http:", "https:", "mailto:"].includes(parsed.protocol);
  } catch {
    return false;
  }
}
 
function SafeLink({ url, children }) {
  const href = isSafeUrl(url) ? url : "#";
  return <a href={href}>{children}</a>;
}

<!-- HTTP header or meta tag -->
<meta
  http-equiv="Content-Security-Policy"
  content="
  default-src 'self';
  script-src 'self' 'nonce-abc123';
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https:;
  font-src 'self';
  connect-src 'self' https://api.example.com;
  frame-ancestors 'none';
"
/>
 
<!-- Inline scripts need nonce -->
<script nonce="abc123">
  // Allowed because nonce matches
</script>

// Next.js CSP configuration
// next.config.js
const cspHeader = `
  default-src 'self';
  script-src 'self' 'unsafe-eval' 'unsafe-inline';
  style-src 'self' 'unsafe-inline';
  img-src 'self' blob: data:;
  font-src 'self';
  object-src 'none';
  base-uri 'self';
  form-action 'self';
  frame-ancestors 'none';
  upgrade-insecure-requests;
`;
 
module.exports = {
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: [
          {
            key: "Content-Security-Policy",
            value: cspHeader.replace(/\n/g, ""),
          },
        ],
      },
    ];
  },
};

1. User logs into bank.com (session cookie set)
2. User visits evil.com
3. evil.com has: <img src="bank.com/transfer?to=attacker&amount=1000">
4. Browser sends request WITH user's session cookie
5. Transfer executes as authenticated user

// 1. CSRF Tokens
// Server generates unique token per session/request
 
// Server-side (example)
app.get("/form", (req, res) => {
  const csrfToken = generateToken();
  req.session.csrfToken = csrfToken;
  res.render("form", { csrfToken });
});
 
// Client-side
<form action="/transfer" method="POST">
  <input type="hidden" name="_csrf" value={csrfToken} />
  <input type="text" name="amount" />
  <button type="submit">Transfer</button>
</form>;
 
// Or with fetch
async function submitForm(data) {
  const response = await fetch("/api/transfer", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "X-CSRF-Token": getCsrfToken(),
    },
    body: JSON.stringify(data),
    credentials: "include",
  });
}
 
// 2. SameSite Cookies (modern approach)
// Set-Cookie: session=abc123; SameSite=Strict; Secure; HttpOnly
 
// 3. Check Origin/Referer headers (server-side)
app.use((req, res, next) => {
  const origin = req.headers.origin;
  const referer = req.headers.referer;
 
  if (origin && !allowedOrigins.includes(origin)) {
    return res.status(403).json({ error: "Invalid origin" });
  }
 
  next();
});

// ❌ NEVER: String concatenation
const query = `SELECT * FROM users WHERE email = '${email}'`;
// Attacker: email = "'; DROP TABLE users; --"
 
// ✅ ALWAYS: Parameterized queries (backend)
const query = "SELECT * FROM users WHERE email = $1";
db.query(query, [email]);
 
// Frontend: validate before sending
function isValidEmail(email) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

// Frontend validation
function sanitizeFilename(filename) {
  // Remove path traversal and special characters
  return filename
    .replace(/\.\./g, "")
    .replace(/[/\\]/g, "")
    .replace(/[^a-zA-Z0-9._-]/g, "");
}

// ❌ DANGEROUS: eval and Function constructor
eval(userInput);
new Function(userInput)();
 
// ❌ DANGEROUS: Template literal injection
const template = `<div>${userInput}</div>`;
 
// ✅ SAFE: Use safe templating
function renderTemplate(template, data) {
  return template.replace(/\{\{(\w+)\}\}/g, (match, key) => {
    return escapeHtml(data[key] || "");
  });
}
 
function escapeHtml(str) {
  const div = document.createElement("div");
  div.textContent = str;
  return div.innerHTML;
}

// ❌ DANGEROUS: localStorage for auth tokens
localStorage.setItem("authToken", token);
// Vulnerable to XSS - any script can read it
 
// ✅ BETTER: HttpOnly cookies (set by server)
// Set-Cookie: authToken=xxx; HttpOnly; Secure; SameSite=Strict
 
// ✅ ACCEPTABLE: Memory storage (for SPAs)
let authToken = null;
 
function setToken(token) {
  authToken = token;
  // Token cleared on page refresh
}
 
// ✅ For refresh tokens
// Store refresh token in HttpOnly cookie
// Store short-lived access token in memory
class TokenManager {
  constructor() {
    this.accessToken = null;
    this.refreshPromise = null;
  }
 
  async getToken() {
    if (this.accessToken && !this.isExpired(this.accessToken)) {
      return this.accessToken;
    }
 
    // Refresh token stored in HttpOnly cookie
    // Server validates cookie and returns new access token
    return this.refresh();
  }
 
  async refresh() {
    if (this.refreshPromise) return this.refreshPromise;
 
    this.refreshPromise = fetch("/api/refresh", {
      method: "POST",
      credentials: "include", // Send HttpOnly cookie
    })
      .then((res) => res.json())
      .then((data) => {
        this.accessToken = data.accessToken;
        return this.accessToken;
      })
      .finally(() => {
        this.refreshPromise = null;
      });
 
    return this.refreshPromise;
  }
}

// NEVER store passwords client-side
// NEVER log passwords
// NEVER send passwords in URLs
 
// Secure password form
function LoginForm() {
  const [password, setPassword] = useState("");
 
  const handleSubmit = async (e) => {
    e.preventDefault();
 
    // Send over HTTPS only
    await fetch("/api/login", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ password }),
      credentials: "include",
    });
 
    // Clear password from memory
    setPassword("");
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        autoComplete="current-password"
      />
      <button type="submit">Login</button>
    </form>
  );
}

# Check for known vulnerabilities
npm audit
yarn audit
pnpm audit
 
# Fix automatically if possible
npm audit fix
 
# Check specific package
npx snyk test

<!-- Verify CDN resources haven't been tampered with -->
<script
  src="https://cdn.example.com/library.js"
  integrity="sha384-abc123..."
  crossorigin="anonymous"
></script>
 
<link
  rel="stylesheet"
  href="https://cdn.example.com/styles.css"
  integrity="sha384-xyz789..."
  crossorigin="anonymous"
/>

<!-- Restrict iframe capabilities -->
<iframe
  src="https://third-party.com/widget"
  sandbox="allow-scripts allow-same-origin"
  allow="camera 'none'; microphone 'none'"
></iframe>
 
<!-- Sandbox options:
  allow-scripts: Allow JavaScript
  allow-same-origin: Allow same-origin access
  allow-forms: Allow form submission
  allow-popups: Allow window.open
  allow-modals: Allow alerts/confirms
-->

// Redirect HTTP to HTTPS (server-side)
app.use((req, res, next) => {
  if (!req.secure && process.env.NODE_ENV === "production") {
    return res.redirect(301, `https://${req.headers.host}${req.url}`);
  }
  next();
});
 
// HTTP Strict Transport Security (HSTS)
// Strict-Transport-Security: max-age=31536000; includeSubDomains; preload

// Essential security headers (Next.js example)
module.exports = {
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: [
          {
            key: "X-Content-Type-Options",
            value: "nosniff",
          },
          {
            key: "X-Frame-Options",
            value: "DENY",
          },
          {
            key: "X-XSS-Protection",
            value: "1; mode=block",
          },
          {
            key: "Referrer-Policy",
            value: "strict-origin-when-cross-origin",
          },
          {
            key: "Permissions-Policy",
            value: "camera=(), microphone=(), geolocation=()",
          },
        ],
      },
    ];
  },
};

// Comprehensive input validation
const validators = {
  email: (value) => {
    const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return pattern.test(value);
  },
 
  username: (value) => {
    // Alphanumeric, 3-20 chars
    const pattern = /^[a-zA-Z0-9_]{3,20}$/;
    return pattern.test(value);
  },
 
  url: (value) => {
    try {
      const url = new URL(value);
      return ["http:", "https:"].includes(url.protocol);
    } catch {
      return false;
    }
  },
 
  phone: (value) => {
    // Basic phone validation
    const pattern = /^\+?[\d\s-]{10,}$/;
    return pattern.test(value);
  },
 
  safeString: (value, maxLength = 1000) => {
    if (typeof value !== "string") return false;
    if (value.length > maxLength) return false;
    // No control characters except newlines
    const pattern = /^[\x20-\x7E\n\r\t]*$/;
    return pattern.test(value);
  },
};
 
function validateInput(value, type) {
  const validator = validators[type];
  if (!validator) throw new Error(`Unknown validator: ${type}`);
  return validator(value);
}

Authentication & Authorization:
□ Use HttpOnly cookies for session tokens
□ Implement proper logout (invalidate server-side)
□ Use CSRF protection for state-changing requests
□ Validate authorization on every protected request
 
Data Handling:
□ Never trust client-side data
□ Validate and sanitize all inputs
□ Encode output appropriately (HTML, URL, JS)
□ Use parameterized queries
 
Transport:
□ Use HTTPS everywhere
□ Set secure cookie flags
□ Implement HSTS
□ Use SRI for third-party resources
 
Headers:
□ Set Content-Security-Policy
□ Set X-Content-Type-Options
□ Set X-Frame-Options
□ Set Referrer-Policy
 
Dependencies:
□ Audit regularly (npm audit)
□ Keep dependencies updated
□ Use lockfiles
□ Review new dependencies before adding