HTML 엔티티 변환
🔐 인코딩HTML에서 특별한 의미를 갖는 문자(&, <, > 등)를 엔티티 코드로 치환하거나 복원합니다.
주요 HTML 엔티티
🏷️ HTML 엔티티 변환이란?
HTML 엔티티는 특수문자를 안전한 문자 참조로 바꾸는 표준 표기법입니다. 브라우저의 파서가 "태그 시작"이나 "속성 경계"로 해석하는 문자를 보호합니다. 예를 들어 사용자가 댓글에 <script>alert(1)</script>를 적었을 때 그대로 페이지에 출력하면 그 코드가 실행됩니다. 이 도구는 &, <, >, ", ', /, ` 8개를 한 번에 처리하므로 가장 흔한 XSS 벡터를 차단합니다.
📌 주요 HTML 엔티티 목록
| 문자 | 이름 엔티티 | 숫자 엔티티 | 설명 |
|---|---|---|---|
| < | < | < | 태그 시작 |
| > | > | > | 태그 끝 |
| & | & | & | 앰퍼샌드 |
| " | " | " | 큰따옴표 |
| ' | ' | ' | 작은따옴표 |
| |   | 공백(줄바꿈 방지) |
🚨 XSS 방어, 위치별로 다르다
OWASP Cheat Sheet에 따르면 같은 문자열이라도 출력 위치에 따라 필요한 인코딩이 다릅니다.
- 본문 텍스트 — 본 도구의 6~8자 엔티티 변환이면 충분합니다.
- 속성 값 — 작은따옴표/큰따옴표까지 모두 변환해야 합니다.
- <script> 블록 내부 / 스타일 속성 — HTML 엔티티만으로 막을 수 없고 JavaScript/CSS 이스케이프가 별도로 필요합니다.
- href, src 같은 URL 속성 —
javascript:스킴 차단이 추가로 들어가야 합니다.
🔒 보안 주의
React의 dangerouslySetInnerHTML, Vue의 v-html은 자동 이스케이프를 우회합니다. 사용 시 반드시 직접 변환하거나 DOMPurify로 sanitize하세요.
자주 묻는 질문
HTML 엔티티를 사용하지 않으면 어떻게 되나요?▼
사용자 입력에 <script>나 <img onerror> 같은 코드가 들어가면 그대로 실행되어 세션 쿠키 탈취, 화면 변조, CSRF 우회 같은 공격이 가능합니다. 매년 OWASP Top 10 상위에 XSS가 꾸준히 들어가는 이유이기도 합니다.
이름 엔티티와 숫자 엔티티의 차이는?▼
결과는 같지만 명명 엔티티(&lt;)는 사람이 읽기 좋고, 숫자 엔티티(&#60;)는 매우 오래된 브라우저나 일부 XML 파서에서 더 안정적입니다. 호환성 위주라면 숫자 엔티티가 무난합니다.
React, Vue에서도 변환이 필요한가요?▼
React의 JSX, Vue의 mustache 보간은 기본적으로 자동 이스케이프되어 안전합니다. 다만 React의 dangerouslySetInnerHTML, Vue의 v-html을 쓸 때는 반드시 직접 변환해야 하며, 마크다운 라이브러리가 만든 HTML도 sanitize 단계를 거쳐야 합니다.