XSS를 방지하기 위해 프론트엔드에서 어떤 원칙을 지켜야 하나요?

XSS는 공격자가 주입한 스크립트가 다른 사용자 브라우저에서 실행되는 취약점입니다. 사용자 입력을 HTML로 직접 삽입하지 않고, 컨텍스트에 맞게 이스케이프하며, 필요한 경우 검증된 sanitizer를 사용해야 합니다. CSP와 HttpOnly 쿠키도 피해를 줄이는 데 도움이 됩니다.

핵심 개념

핵심 기준은 신뢰할 수 없는 문자열을 실행 가능한 코드로 만들지 않기입니다. 이 개념은 단순히 용어를 외우는 것보다, 어떤 문제를 줄이기 위해 등장했는지와 실제 코드나 운영 환경에서 어떤 trade-off를 만드는지 함께 이해하는 것이 중요합니다.

사용자 입력이 HTML이나 스크립트로 해석되는 경로를 줄이는 것이 핵심입니다.

동작 흐름

1. 먼저 문제가 발생하는 조건과 입력을 확인합니다.
2. 관련된 런타임, 브라우저, 서버, 데이터 저장소의 책임을 나눠 봅니다.
3. 가장 작은 범위에서 안전한 해결책을 적용합니다.
4. 로그, 테스트, 모니터링으로 실제로 문제가 줄었는지 확인합니다.

실제 예시

React는 기본 텍스트 렌더링에서 이스케이프를 해주지만 dangerouslySetInnerHTML을 쓰면 별도 sanitizing이 필요합니다.

실무에서 적용하는 방법

HTML 삽입 지점을 코드 리뷰 체크리스트에 넣고, DOMPurify 같은 검증된 도구를 정책에 맞게 설정합니다.

실무에서 주의할 점

• 클라이언트 검증만으로는 충분하지 않으며 서버 저장 전후 검증도 필요합니다.
• URL, CSS, HTML, JavaScript 문자열은 각각 필요한 이스케이프 방식이 다릅니다.
• 개념을 적용하기 전에 현재 시스템의 규모, 병목, 장애 영향도를 함께 확인해야 합니다.
• 팀 규칙이나 프레임워크 기본 동작과 충돌하지 않는지도 점검하는 것이 좋습니다.

함께 연결해서 보면 좋은 키워드

보안, XSS, 입력검증, CSP

면접에서 짚으면 좋은 포인트

• 정의만 말하기보다 어떤 문제를 줄이기 위한 개념인지 먼저 설명하면 좋습니다.
• 장점과 함께 비용, 한계, 적용하지 않아도 되는 상황을 같이 말하면 실무 이해도가 드러납니다.

정리

한 줄로 정리하면, XSS는 공격자가 주입한 스크립트가 다른 사용자 브라우저에서 실행되는 취약점입니다. 사용자 입력을 HTML로 직접 삽입하지 않고, 컨텍스트에 맞게 이스케이프하며, 필요한 경우 검증된 sanitizer를 사용해야 합니다. CSP와 HttpOnly 쿠키도 피해를 줄이는 데 도움이 됩니다. 실무에서는 개념을 적용하는 조건과 적용하지 않았을 때 생기는 문제까지 함께 이해하는 것이 중요합니다.