Security Hardening

When to Use This Skill

Use when:

• Handling user-generated content
• Storing sensitive data client-side
• Embedding external content
• Implementing authentication flows

XSS Prevention

Never Use dangerouslySetInnerHTML Unsafely

// ❌ Dangerous
<div dangerouslySetInnerHTML={{ __html: userContent }} />

// ✅ Safe - use a sanitizer
import DOMPurify from 'dompurify';

<div
  dangerouslySetInnerHTML={{
    __html: DOMPurify.sanitize(userContent)
  }}
/>

Sanitize with DOMPurify

import DOMPurify from 'dompurify';

// Basic sanitization
const clean = DOMPurify.sanitize(dirty);

// Allow specific tags only
const cleanStrict = DOMPurify.sanitize(dirty, {
  ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a'],
  ALLOWED_ATTR: ['href']
});

// Remove all HTML
const textOnly = DOMPurify.sanitize(dirty, { ALLOWED_TAGS: [] });

Content Security Policy (CSP)

Meta Tag CSP

<meta
  http-equiv="Content-Security-Policy"
  content="
    default-src 'self';
    script-src 'self' 'unsafe-inline';
    style-src 'self' 'unsafe-inline';
    img-src 'self' data: https:;
    font-src 'self';
    connect-src 'self' https://api.example.com;
  "
>

Common CSP Directives

Secure Data Storage

Sensitive Data Handling

// ❌ Don't store sensitive data in localStorage
localStorage.setItem('token', secretToken);

// ✅ Use sessionStorage for session-bound data
sessionStorage.setItem('token', secretToken);

// ✅ Better: Use httpOnly cookies (server-set)
// ✅ Best: Don't store on client if possible

Encrypt Before Storing (if necessary)

// Using SubtleCrypto API
async function encrypt(data: string, key: CryptoKey): Promise<string> {
  const iv = crypto.getRandomValues(new Uint8Array(12));
  const encoded = new TextEncoder().encode(data);

  const encrypted = await crypto.subtle.encrypt(
    { name: 'AES-GCM', iv },
    key,
    encoded
  );

  return btoa(
    String.fromCharCode(...iv) +
    String.fromCharCode(...new Uint8Array(encrypted))
  );
}

URL Handling

Validate URLs

function isValidUrl(url: string): boolean {
  try {
    const parsed = new URL(url);
    return ['http:', 'https:'].includes(parsed.protocol);
  } catch {
    return false;
  }
}

// ❌ Don't allow javascript: URLs
function sanitizeHref(href: string): string {
  if (href.toLowerCase().startsWith('javascript:')) {
    return '#';
  }
  return href;
}

Open External Links Safely

<a
  href={externalUrl}
  target="_blank"
  rel="noopener noreferrer"  // Prevents window.opener attacks
>
  External Link
</a>

Input Validation

// Validate on both client AND server
function validateEmail(email: string): boolean {
  const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return pattern.test(email);
}

// Limit input length
<input
  type="text"
  maxLength={100}
  value={value}
  onChange={(e) => setValue(e.target.value.slice(0, 100))}
/>

Iframe Security

// Sandbox iframes
<iframe
  src={externalContent}
  sandbox="allow-scripts allow-same-origin"
  referrerPolicy="no-referrer"
/>

Subresource Integrity

<script
  src="https://cdn.example.com/library.js"
  integrity="sha384-abc123..."
  crossorigin="anonymous"
></script>

Security Checklist

• Sanitize all user-generated HTML content
• Validate URLs before using
• Use rel="noopener noreferrer" on external links
• Implement CSP headers/meta tags
• Never store secrets in client code
• Use HTTPS only
• Validate all inputs client-side AND server-side
• Sandbox iframes from untrusted sources