Ch.26 인증과 보안 기초 — 로그인 구현

웹 보안 기초 — 해킹 방어

XSS 공격의 원리와 React의 자동 방어 메커니즘을 이해한다CSRF와 SQL Injection 공격을 방어하는 방법을 안다웹 보안 체크리스트를 적용할 수 있다

내 사이트가 해킹당하면? OWASP Top 10 맛보기

잘 만든 앱인데, 어느 날 사용자 정보가 유출됩니다. 보안은 나중에 하면 된다고 생각했지만, 이미 늦었죠.

웹 앱에서 가장 흔한 보안 위협은 무엇이고 어떻게 막을까?

웹 보안 기초 — XSS, CSRF, SQL Injection 3대 공격과 방어법을 알면 대부분의 위협을 막을 수 있습니다.


article

핵심 내용

XSS는 사용자 입력에 악성 스크립트를 숨기는 공격입니다

바이브 코더 팁: React를 쓰고 있다면 XSS는 대부분 자동 방어됩니다. 단, dangerouslySetInnerHTML만 절대 사용자 입력에 쓰지 마세요.

CSRF는 남의 이름으로 요청 SQL Injection은 DB를 조작하는 공격

이 체크리스트만 지켜도 대부분의 공격을 막을 수 있습니다

# 의존성 보안 점검
npm audit                # 취약점 확인
npm audit fix            # 자동 수정
npm outdated             # 업데이트 필요한 패키지 확인

# .env 파일은 반드시 .gitignore에!
echo ".env" >> .gitignore
echo ".env.local" >> .gitignore
// zod로 서버 입력 검증
import { z } from "zod";

const signupSchema = z.object({
  email: z.string().email("유효한 이메일을 입력하세요"),
  password: z.string().min(8, "비밀번호는 8자 이상"),
  name: z.string().min(2).max(50),
});

// Server Action에서 사용
export async function signup(formData: FormData) {
  const result = signupSchema.safeParse({
    email: formData.get("email"),
    password: formData.get("password"),
    name: formData.get("name"),
  });

  if (!result.success) {
    return { error: result.error.flatten() };
  }
  // 안전하게 검증된 데이터 사용
}

바이브 코더의 보안 원칙 1. 사용자 입력을 절대 신뢰하지 말 것 2. 비밀은 환경변수에 넣을 것 3. Supabase/ORM을 쓰면 SQL Injection은 자동 방어 4. React를 쓰면 XSS는 대부분 자동 방어

React에서 XSS 방어가 무력화되는 경우는?

Supabase 같은 ORM을 사용하면 SQL Injection을 자동으로 방어할 수 있다.

API 키나 DB 비밀번호를 안전하게 관리하는 방법은?

key

핵심 용어

🛡️

React 사용

JSX의 {} 안에 넣으면 자동 이스케이프. 가장 기본적인 방어

🚫

dangerouslySetInnerHTML 금지

사용자 입력을 HTML로 렌더링하지 않기

📜

CSP 헤더

Content-Security-Policy로 외부 스크립트 실행 차단

🔒

HTTPS 필수

HTTP는 데이터가 평문으로 전송됨. Vercel은 자동 HTTPS 제공

🔑

환경변수 사용

API 키, DB 비밀번호는 .env 파일에. 절대 코드에 하드코딩 금지

입력 검증

서버에서 모든 사용자 입력을 검증. zod 같은 라이브러리 활용

📦

의존성 업데이트

npm audit로 취약점 확인. 정기적으로 패키지 업데이트

compare_arrows

비교 정리

항목CSRFSQL Injection
공격 방식로그인된 사용자의 브라우저를 이용해 위조 요청 전송입력값에 SQL 쿼리를 삽입해 DB 조작
예시악성 사이트에서 은행 송금 요청 자동 실행로그인 폼에 ' OR 1=1 -- 입력
방어CSRF 토큰, SameSite 쿠키파라미터화된 쿼리, ORM 사용
edit_note

정리 노트

웹 보안 핵심 정리

주요 공격 유형

XSS
악성 스크립트를 웹 페이지에 삽입해 사용자 정보를 탈취
CSRF
인증된 사용자의 의도하지 않은 요청을 위조하는 공격
SQL Injection
입력값에 SQL 코드를 삽입해 데이터베이스를 조작

방어 수칙

입력 검증
사용자 입력은 항상 검증하고 이스케이프 처리
HTTPS
모든 통신을 암호화하여 중간자 공격 방지
환경변수
API 키, 비밀키는 .env에 저장하고 .gitignore에 추가

보안의 기본은 '사용자 입력을 절대 신뢰하지 않는 것'입니다.

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 레슨 시작