Ch.26 인증과 보안 기초 — 로그인 구현
웹 보안 기초 — 해킹 방어
내 사이트가 해킹당하면? OWASP Top 10 맛보기
잘 만든 앱인데, 어느 날 사용자 정보가 유출됩니다. 보안은 나중에 하면 된다고 생각했지만, 이미 늦었죠.
웹 앱에서 가장 흔한 보안 위협은 무엇이고 어떻게 막을까?
웹 보안 기초 — XSS, CSRF, SQL Injection 3대 공격과 방어법을 알면 대부분의 위협을 막을 수 있습니다.
핵심 내용
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 비밀번호를 안전하게 관리하는 방법은?
핵심 용어
React 사용
JSX의 {} 안에 넣으면 자동 이스케이프. 가장 기본적인 방어
dangerouslySetInnerHTML 금지
사용자 입력을 HTML로 렌더링하지 않기
CSP 헤더
Content-Security-Policy로 외부 스크립트 실행 차단
HTTPS 필수
HTTP는 데이터가 평문으로 전송됨. Vercel은 자동 HTTPS 제공
환경변수 사용
API 키, DB 비밀번호는 .env 파일에. 절대 코드에 하드코딩 금지
입력 검증
서버에서 모든 사용자 입력을 검증. zod 같은 라이브러리 활용
의존성 업데이트
npm audit로 취약점 확인. 정기적으로 패키지 업데이트
비교 정리
| 항목 | CSRF | SQL Injection |
|---|---|---|
| 공격 방식 | 로그인된 사용자의 브라우저를 이용해 위조 요청 전송 | 입력값에 SQL 쿼리를 삽입해 DB 조작 |
| 예시 | 악성 사이트에서 은행 송금 요청 자동 실행 | 로그인 폼에 ' OR 1=1 -- 입력 |
| 방어 | CSRF 토큰, SameSite 쿠키 | 파라미터화된 쿼리, ORM 사용 |
정리 노트
웹 보안 핵심 정리
주요 공격 유형
- XSS
- 악성 스크립트를 웹 페이지에 삽입해 사용자 정보를 탈취
- CSRF
- 인증된 사용자의 의도하지 않은 요청을 위조하는 공격
- SQL Injection
- 입력값에 SQL 코드를 삽입해 데이터베이스를 조작
방어 수칙
- 입력 검증
- 사용자 입력은 항상 검증하고 이스케이프 처리
- HTTPS
- 모든 통신을 암호화하여 중간자 공격 방지
- 환경변수
- API 키, 비밀키는 .env에 저장하고 .gitignore에 추가
보안의 기본은 '사용자 입력을 절대 신뢰하지 않는 것'입니다.
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 레슨 시작