안녕하세요, 이웃님들! 😊
React로 프로젝트를 만들다 보면 퍼포먼스, UI, 상태 관리 이런 건 많이들 신경 쓰시잖아요?
그런데 생각보다 보안에 대한 부분은 뒤로 밀리는 경우가 꽤 많더라고요.
저도 초창기엔 React가 자동으로 XSS 방지해준다니까 괜찮겠지~ 싶었는데,
막상 실제 프로젝트에서는 그런 기본 보호만으로는 부족한 경우가 많았어요.
그래서 오늘은 React 애플리케이션을 조금 더 안전하게 만들기 위해 반드시 알아야 할 보안 팁들을
제가 겪은 실무 경험 중심으로 정리해봤어요.
✅ 1. XSS 공격? React에도 조심해야 합니다
React는 기본적으로 JSX 내 중괄호({}) 바인딩 시 자동 이스케이프를 해줘요.
그래서 아래처럼 쓰는 건 안전합니다:
<div>{userInput}</div>하지만! 아래 코드처럼 dangerouslySetInnerHTML을 쓰면 이야기가 달라져요:
// ❌ 매우 위험할 수 있음
<div dangerouslySetInnerHTML={{ __html: userInput }} />이건 정말 ‘위험하게 렌더링하겠다’는 이름답게,
스크립트가 삽입되는 XSS의 지름길이에요.
✅ 그래서 실무에서는 이렇게 썼어요:
import DOMPurify from 'dompurify';
const SafeHTML = ({ html }) => (
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(html) }} />
);DOMPurify는 거의 필수템입니다.
신뢰할 수 없는 데이터를 HTML로 출력해야 할 때는 꼭 써주세요.
✅ 2. URL 다룰 때도 신중하게
링크 하나 잘못 열리면 피싱 사이트로 연결되거나, 자바스크립트 프로토콜로 공격당할 수 있어요.
function validateURL(url) {
try {
const parsed = new URL(url);
return ['https:', 'http:'].includes(parsed.protocol);
} catch {
return false;
}
}그리고 링크는 이렇게 처리하면 조금 더 안전합니다:
<a href={validateURL(url) ? url : '#'}>Click here!</a>👉 특히 javascript:alert('XSS') 이런 식으로 링크 삽입하는 공격이 많습니다. 꼭 검증하세요!
✅ 3. 상태 관리에서 민감한 정보는 피하세요
로컬 상태나 Redux, Recoil 같은 상태관리 라이브러리에
로그인 정보, 카드번호, 비밀번호 같은 민감한 데이터는 절대 저장하지 마세요.
그리고 인증 관련해서는
- ✅ HTTP-Only 쿠키에 토큰 저장
- ✅ JWT/OAuth 연동 시 로컬스토리지 대신 쿠키 우선
이게 더 안전합니다.
로컬스토리지는 XSS에 뚫리면 그대로 노출되거든요 😨
✅ 4. 의존성도 보안의 일환입니다
의외로 많은 분들이 놓치는 부분인데,
npm 패키지도 보안 허점의 출발점이 될 수 있어요.
npm audit
npm audit fix정기적으로 꼭 돌려주세요.
그리고 모르는 패키지는 설치 전에 Snyk, Socket.dev 같은 도구로 취약점 확인하는 걸 습관화해보세요.
✅ 5. ESLint + CSP = 기본 보안 레벨업
✅ ESLint는 생각보다 강력합니다
보안 관련 설정도 린터 플러그인으로 많이 잡을 수 있어요.
npm install eslint-plugin-security --save-dev"plugins": ["security"]✅ CSP 설정으로 스크립트 주입 막기
HTML <head>에 아래처럼 CSP 메타 태그 추가해보세요:
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline';">이거 하나만 있어도 외부에서 악성 스크립트를 넣는 공격을 기본적으로 막아줍니다.
✅ 결론 – React는 보안이 ‘자동’으로 되는 게 아닙니다
React는 분명 보안적으로 기본기가 잘 되어 있지만,
개발자의 습관과 설계가 진짜 안전함을 결정짓습니다.
저도 예전에는 “React니까 안전하겠지”라는 안일한 생각으로 지나쳤던 부분이 많았는데,
한 번이라도 취약점 레포트를 받아본 이후론 이 모든 것들이 습관처럼 자리 잡았어요.
'개발' 카테고리의 다른 글
| TailwindCSS, 써보니 진짜 빠릅니다 – 실무 경험 기반 정리 (2) | 2025.01.27 |
|---|---|
| Next.js에 GA4 붙여봤습니다 – 페이지뷰 & 이벤트 트래킹까지 실전 적용 가이드 (1) | 2025.01.24 |
| React로 ChatGPT API 연결해보니… 생각보다 쉽게 채팅 기능 붙일 수 있더라 (0) | 2025.01.14 |
| TypeScript 써보니… 왜 다들 쓰는지 알겠더라고요 (0) | 2025.01.11 |
| pnpm link 써보니… 로컬 패키지 개발이 이렇게 편해질 줄 몰랐습니다 🚀 (0) | 2025.01.10 |
