Security

import {useForm} from 'react-hook-form';
import {zodResolver} from '@hookform/resolvers/zod';
import {createLoginSchema} from '@/lib/validation';
import {useI18n} from '@/hooks/use-i18n';

const {t} = useI18n();
const loginSchema = createLoginSchema(t);

const form = useForm({
  resolver: zodResolver(loginSchema),
  defaultValues: {
    username: '',
    password: '',
  },
});

import {z} from 'zod';

const portSchema = z.number().int().min(1).max(65535);

const validatePort = (value: number): boolean => {
  try {
    portSchema.parse(value);
    return true;
  } catch {
    return false;
  }
};

// Safe: React escapes userName
<div>{userName}</div>

// Safe: React escapes attributes
<input value={userInput} />

// ⚠️ UNSAFE: Never use with user input
<div dangerouslySetInnerHTML={{__html: userInput}} />

// ✅ SAFE: Only for sanitized or trusted content
import DOMPurify from 'isomorphic-dompurify';

const sanitized = DOMPurify.sanitize(trustedHtml);
<div dangerouslySetInnerHTML={{__html: sanitized}} />

// ❌ UNSAFE
element.innerHTML = userInput;

// ✅ SAFE
element.textContent = userInput;

// ❌ UNSAFE: javascript: URLs can execute code
<a href={userProvidedUrl}>Link</a>

// ✅ SAFE: Validate protocol
const isSafeUrl = (url: string): boolean => {
  try {
    const parsed = new URL(url, window.location.origin);
    return ['http:', 'https:', 'mailto:'].includes(parsed.protocol);
  } catch {
    return false;
  }
};

const safeUrl = isSafeUrl(userProvidedUrl) ? userProvidedUrl : '#';
<a href={safeUrl}>Link</a>

// ✅ SAFE: Validate response structure with Zod
import {z} from 'zod';

const userSchema = z.object({
  id: z.number(),
  username: z.string().max(50),
  email: z.string().email(),
});

const response = await apiService.get('/users/123');
const user = userSchema.parse(response.data); // Throws if invalid

// ❌ UNSAFE: Logs password
console.log('User login:', {username, password});

// ✅ SAFE: Omit sensitive fields
console.log('User login:', {username});

// ❌ UNSAFE: Sends password in URL
await apiService.get(`/auth/check?password=${password}`);

// ✅ SAFE: Sends password in request body
await apiService.post('/auth/login', {username, password});

// Password fields
<Input type="password" value={password} onChange={...} />

// Secret reveal pattern
const [revealed, setRevealed] = useState(false);
<Input
  type={revealed ? 'text' : 'password'}
  value={secret}
  onChange={...}
/>
<Button onClick={() => setRevealed(!revealed)}>
  {revealed ? 'Hide' : 'Reveal'}
</Button>

const handleExport = () => {
  showConfirmDialog({
    title: 'Export contains sensitive data',
    description: 'The exported file contains passwords and secrets in plain text. Store it securely.',
    confirmText: 'Export anyway',
    onConfirm: async () => {
      const blob = await api.export();
      downloadFile(blob, 'config.xml');
    },
  });
};

# Check for vulnerabilities
npm audit

# View details
npm audit --json

# Fix automatically (minor/patch updates)
npm audit fix

# Fix with breaking changes (use with caution)
npm audit fix --force

# .github/dependabot.yml
version: 2
updates:
  - package-ecosystem: "npm"
    directory: "/"
    schedule:
      interval: "weekly"
    open-pull-requests-limit: 10
    reviewers:
      - "security-team"
    labels:
      - "dependencies"
      - "security"

import {useAuth} from '@/hooks/use-auth';

const {isReadOnly, user} = useAuth();

// Disable write actions
<Button disabled={isReadOnly} onClick={handleSave}>
  Save
</Button>

// Hide admin-only features
{user?.role === 'ADMIN' && (
  <Link href="/settings/users">Manage Users</Link>
)}