React 보안 & 모범 사례
XSS 방지, CSRF 보호, dangerouslySetInnerHTML, Content Security Policy, HTTPS, 새니타이제이션
1XSS(Cross-Site Scripting) 공격이란 무엇인가요?
XSS(Cross-Site Scripting) 공격이란 무엇인가요?
답변
XSS 공격은 악성 JavaScript 코드를 웹 애플리케이션에 삽입하여 다른 사용자의 브라우저에서 실행하는 공격입니다. 공격자는 유효성 검사나 이스케이핑 취약점을 악용해 쿠키, 세션 토큰을 훔치거나 무단 작업을 수행합니다. React는 JSX 값을 자동으로 이스케이핑하여 기본 보호를 제공하지만, dangerouslySetInnerHTML이나 직접 DOM 조작 시에는 취약점이 남아 있습니다.
2React는 기본적으로 XSS 공격을 어떻게 방어하나요?
React는 기본적으로 XSS 공격을 어떻게 방어하나요?
답변
React는 JSX를 통해 삽입된 모든 값을 렌더링 전에 일반 텍스트로 변환하여 자동으로 이스케이핑합니다. 이 보호 덕분에 HTML 코드가 데이터에 주입되더라도 악성 스크립트 실행이 방지됩니다. HTML을 해석하고 실행하는 innerHTML과 달리, React는 태그를 일반 텍스트로 처리하므로 표준 props나 state를 통한 악성 JavaScript 주입이 불가능합니다.
3React에서 dangerouslySetInnerHTML이 위험하다고 여겨지는 이유는 무엇인가요?
React에서 dangerouslySetInnerHTML이 위험하다고 여겨지는 이유는 무엇인가요?
답변
이 속성은 이스케이핑 없이 원시 HTML을 DOM에 직접 삽입하여 React의 기본 XSS 보호를 우회합니다. 콘텐츠가 신뢰할 수 없는 소스나 외부 API에서 오는 경우 실행될 악성 JavaScript가 포함될 수 있습니다. 명시적인 이름 dangerouslySetInnerHTML은 개발자가 보안 위험을 의식적으로 인식하고 DOMPurify 같은 라이브러리로 적절한 sanitization을 구현하도록 강제합니다.
Stored XSS와 Reflected XSS 공격의 주요 차이점은 무엇인가요?
React에서 외부 API의 HTML을 표시할 때 선호해야 할 접근 방식은 무엇인가요?
+19 면접 질문