HTML 엔티티 디코딩·인코딩 완전 가이드
HTML 엔티티의 동작 원리와 필수 5개 문자, W3C HTML5 명세의 Named Character Reference, XSS 방지를 위한 인코딩 실무를 설명합니다.
Q.HTML에서 & < > 같은 특수 기호는 왜 변환해야 하나요?
HTML 파서는 <, >, & 문자를 태그와 엔티티의 시작으로 해석합니다. 이 문자를 텍스트로 표시하려면 각각 <, >, &로 변환해야 합니다. 변환하지 않으면 HTML 구조가 깨지거나 XSS 공격에 취약해집니다.
웹 게시판에서 코드를 붙여넣었을 때 꺾쇠 괄호가 사라지거나 HTML 태그로 실행되는 현상을 본 적이 있을 것이다. 이는 HTML 엔티티 인코딩 없이 사용자 입력을 그대로 렌더링했기 때문이다. OWASP의 분석에 따르면 XSS(Cross-Site Scripting) 공격의 80% 이상이 이런 인코딩 실패에서 비롯된다.
HTML 엔티티란?
HTML 엔티티(Entity)는 HTML 파서가 특수 문자를 올바르게 표시하도록 변환한 표현이다. & 로 시작해 ; 로 끝나는 형식이다.
필수 5개 HTML 엔티티
| 원문자 | 엔티티 | 용도 |
|---|---|---|
| & | & | 앰퍼샌드 |
| < | < | 여는 꺾쇠 |
| > | > | 닫는 꺾쇠 |
| " | " | 큰따옴표 |
| ' | ' | 작은따옴표 |
이 5개는 HTML5 명세에서 필수로 정의된 엔티티다. 특히 <와 >는 HTML 태그 시작과 끝으로 파싱되므로, 텍스트에 포함될 때 반드시 변환해야 한다.
W3C HTML5 Named Character Reference
W3C HTML5 명세는 2,231개의 Named Character Reference를 정의한다. 자주 사용하는 것들:
| 기호 | 엔티티 | 사용 예 |
|---|---|---|
| © | © | 저작권 표시 |
| ® | ® | 등록 상표 |
| ™ | ™ | 상표 |
| · | · | 중간점 |
| — | — | 대시 |
| → | → | 오른쪽 화살표 |
| ≥ | ≥ | 크거나 같음 |
엔티티 vs 숫자 참조
HTML 엔티티는 Named(이름)와 Numeric(숫자) 두 가지 형식이 있다.
- Named:
©→ © - Decimal:
©→ © - Hex:
©→ ©
모두 동일한 문자를 표시하지만, 명세에 이름이 정의된 엔티티는 Named 형식이 가독성 면에서 권장된다.
XSS 방지를 위한 인코딩 실무
사용자 입력을 HTML에 출력할 때는 반드시 엔티티 인코딩을 적용해야 한다.
php
// PHP
echo htmlspecialchars($user_input, ENT_QUOTES, 'UTF-8');
python
# Python
import html
safe_output = html.escape(user_input, quote=True)
javascript
// JavaScript (DOM 기반)
element.textContent = user_input; // 자동 이스케이프
// innerHTML 사용 시 DOMPurify 등 라이브러리 필요
URL 인코딩과의 차이
HTML 엔티티와 URL 퍼센트 인코딩은 완전히 다르다.
&의 HTML 엔티티:&&의 URL 인코딩:%26
URL 파라미터에 HTML을 포함할 때 두 인코딩이 중첩될 수 있으므로 계층을 명확히 구분해야 한다.
---
이 글은 AI가 공개 자료를 기반으로 작성했습니다. 보안 관련 인코딩 구현은 OWASP 가이드라인을 함께 참조하세요.