React vs. XSS: 보호 장치가 끝나는 지점
React는 기본적으로 안전합니다. 대부분의 스크립트 인젝션을 방지하기 위해 JSX 내의 값을 이스케이프(escape) 처리합니다. 하지만 이는 잘못된 보안 의식을 심어줄 수 있습니다. React는 XSS 위험을 줄여줄 뿐, 완전히 없애주지는 않습니다.
XSS 공격에는 세 가지 주요 유형이 있습니다:
- Reflected XSS: 공격자가 악성 링크를 보냅니다. 서버는 해당 스크립트를 사용자에게 즉시 다시 보냅니다. 브라우저는 이 스크립트가 신뢰할 수 있는 사이트에서 온 것으로 판단하여 실행합니다.
- Stored XSS: 공격자가 서버에 스크립트를 저장합니다. 이 스크립트는 데이터베이스, 댓글 또는 로그에 남게 됩니다. 해당 콘텐츠를 보는 모든 사용자는 스크립트를 실행하게 됩니다.
- DOM Based XSS: 공격이 전적으로 브라우저 내에서 발생합니다. 공격자는 URL 파라미터나 클라이언트 측 입력을 변경하여 JavaScript가 비정상적으로 동작하도록 만듭니다.
React는 실제로 무엇으로부터 보호해 주나요?
- 자동 이스케이프(Automatic Escaping): React는 문자열을 일반 텍스트로 취급합니다. JSX에 스크립트 태그를 주입하려고 하면, React는 코드를 실행하는 대신 텍스트를 그대로 보여줍니다.
- 안전한 렌더링(Safe Rendering): React는 콘텐츠가 표시되는 방식을 관리합니다. 이를 통해 위험한 브라우저 API를 사용할 필요성을 줄여줍니다.
- 적은 DOM 조작: React가 업데이트를 처리합니다. 따라서
document.write()나innerHTML을 자주 사용할 필요가 없습니다.
React는 탈출구(escape hatches)를 제공합니다. 이를 잘못 사용하면 취약점이 발생할 수 있습니다.
다음과 같은 실수에 주의하세요:
dangerouslySetInnerHTML: 이 속성은 React에 이스케이프 처리를 건너뛰도록 지시합니다. HTML을 있는 그대로 삽입합니다. 콘텐츠가 깨끗하지 않다면 공격자에게 허점을 내주게 됩니다. 먼저 DOMPurify를 사용하여 콘텐츠를 정화(sanitize)하세요.- 직접적인 DOM 조작: 사용자 입력값과 함께
element.innerHTML을 사용하면 모든 React 보안을 우회하게 됩니다. - 서드파티 라이브러리: 일부 외부 도구는 동일한 안전 규칙을 따르지 않을 수 있습니다.
React는 보안을 위한 도구를 제공합니다. 이를 올바르게 사용하는 것은 여러분의 몫입니다. 보안은 여러분의 책임입니다.
출처: https://dev.to/ayomidejhay/react-vs-xss-where-the-guardrails-end-6p2