보안 기초 — XSS와 Injection, .env 관리

웹 보안의 3대 위협을 알아봅시다. 1. XSS(Cross-Site Scripting) — 악성 스크립트를 웹 페이지에 삽입하는 공격. 사용자가 입력한 내용을 그대로 화면에 표시하면 발생합니다. 예: 게시판 제목에 `<script>alert('해킹!')</script>`을 입력하면, 다른 사용자가 이 게시글을 열 때 스크립트가 실행됩니다. 쿠키 탈취, 피싱 등에 악용됩니다.

// ❌ 위험: 사용자 입력을 그대로 HTML에 삽입
element.innerHTML = userInput;
// 만약 userInput이 "<script>악성코드</script>"라면? 실행됨!

// ✅ 안전: React는 기본적으로 XSS를 방어함
// JSX에서 {}로 값을 넣으면 자동으로 이스케이프(무력화)
return <div>{userInput}</div>;
// "<script>" → "&lt;script&gt;"로 변환되어 실행 안 됨

// ⚠️ 주의: dangerouslySetInnerHTML은 이름 그대로 위험!
// 반드시 sanitize(소독) 후 사용
return <div dangerouslySetInnerHTML={{ __html: sanitize(userInput) }} />;

2. SQL Injection — 입력값에 SQL 명령어를 끼워 넣어 DB를 조작하는 공격. 로그인 폼에 아이디를 `admin' OR '1'='1`로 입력하면, SQL 쿼리가 `WHERE id='admin' OR '1'='1'`이 되어 모든 사용자로 로그인됩니다. 방어법: 사용자 입력을 SQL에 직접 넣지 말고, Prepared Statement(매개변수 바인딩)를 사용합니다. Supabase, Prisma 같은 ORM을 쓰면 자동으로 방어됩니다.

3. .env 파일과 API 키 관리 — 가장 흔하고 치명적인 실수. `.env` 파일에는 DB 비밀번호, API 키, 인증 시크릿 등 절대 공개하면 안 되는 정보가 들어있습니다. 실제 사고 사례: 개발자가 `.env` 파일을 깜빡하고 GitHub에 올림 → 봇이 30초 만에 감지 → AWS 키로 암호화폐 채굴 서버 수백 대 생성 → 하룻밤에 수백만 원 청구.

# .gitignore 파일에 반드시 포함해야 할 항목
.env
.env.local
.env.production
node_modules/

# .env 파일 예시 — 절대 GitHub에 올리지 말 것!
# SUPABASE_URL=https://xxx.supabase.co
# SUPABASE_KEY=eyJhbGci...
# OPENAI_API_KEY=sk-...

# 이미 올렸다면? 키를 즉시 재발급하고 커밋 히스토리에서 제거
# git filter-branch 또는 BFG Repo-Cleaner 사용

바이브코더를 위한 보안 체크리스트: 1. `.gitignore`에 `.env`가 포함되어 있는가? 2. API 키를 코드에 하드코딩하지 않았는가? 3. 사용자 입력을 DB 쿼리에 직접 넣지 않았는가? 4. `dangerouslySetInnerHTML`을 사용할 때 sanitize 했는가? 5. Claude Code에게 "이 코드에 보안 취약점 있어?"라고 물어봤는가? Claude Code는 보안 취약점을 잘 찾아냅니다. 코드 리뷰 시 습관적으로 보안 점검을 요청하세요.