HTML 이스케이프/언이스케이프
&, <, >, ", ' 등의 특수 문자를 HTML 엔티티로 변환(이스케이프)하거나, 엔티티를 원래 문자로 되돌립니다(언이스케이프). XSS 방지 및 HTML에 텍스트를 삽입할 때 유용합니다.
주요 명명된 HTML 엔티티 목록
| 문자 | 명명된 엔티티 | 숫자 문자 참조 | 설명 |
|---|---|---|---|
| & | & | & | 앰퍼샌드("and"를 뜻하는 기호) |
| < | < | < | 보다 작다 기호(HTML 태그의 시작 문자와 동일) |
| > | > | > | 보다 크다 기호(HTML 태그의 종료 문자와 동일) |
| " | " | " | 큰따옴표(속성 값 구분 기호) |
| ' | ' | ' | 작은따옴표(속성 값 구분 기호) |
| |   | 줄바꿈 없는 공백(줄바꿈을 막는 공백 문자) | |
| © | © | © | 저작권 기호 |
| ® | ® | ® | 등록 상표 기호 |
| ™ | ™ | ™ | 상표 기호 |
| € | € | € | 유로 기호 |
| ¥ | ¥ | ¥ | 엔 기호 |
| ¢ | ¢ | ¢ | 센트 기호 |
팁
- HTML 이스케이프는 XSS(크로스 사이트 스크립팅) 방지의 기본입니다. 사용자 입력을 HTML에 삽입하기 전에 반드시 이스케이프하세요.
&는 반드시 가장 먼저 이스케이프해야 합니다. 다른 문자를 먼저 변환하면 새로 생성된&안의&까지 이중으로 이스케이프됩니다.- 속성 값에 문자열을 삽입할 때는
"(큰따옴표)뿐 아니라'(작은따옴표)도 함께 이스케이프해 두면 더 안전합니다. - 이 도구는 10진수 문자 참조(
&), 16진수 문자 참조(&), 그리고 주요 명명된 엔티티(&등)의 언이스케이프를 지원합니다. - 많은 템플릿 엔진(Blade, JSX, Vue 등)은 변수를 삽입할 때 자동으로 HTML을 이스케이프하지만,
{!! !!}나 v-html 같은 "원본 HTML 출력" 구문을 사용할 때는 직접 이스케이프해야 합니다.
자주 묻는 질문
<, >, & 이 세 문자는 HTML 파서가 구문의 일부로 해석하는 특별한 문자이기 때문입니다. 이스케이프를 소홀히 하면 브라우저가 태그의 시작이나 종료로 잘못 인식하여 레이아웃이 깨지거나 XSS(악성 스크립트 삽입)로 이어질 수 있습니다.&, <, >, ", ' 이 다섯 문자만 이스케이프합니다. 이모지나 한글 같은 비ASCII 문자는 현대의 UTF-8 환경에서 그대로 안전하게 표시되므로 변환할 필요가 없습니다.
여담 ― SGML로부터 물려받은 "문자 참조"라는 구조
HTML 엔티티(문자 참조)의 기원은 HTML의 모태가 된 SGML(Standard Generalized Markup Language)까지 거슬러 올라갑니다. 1986년에 표준화된 SGML은 이미 태그 구분 문자인 <를 본문 안에서 사용하기 위한 "문자 참조"라는 구조를 갖추고 있었습니다. HTML은 이 구조를 거의 그대로 계승했으며, 1990년대 HTML 초기 사양 시점에 이미 <, >, & 같은 기본적인 명명된 엔티티가 정의되어 있었습니다.
명명된 엔티티는 처음에는 유니코드가 아직 보급되지 않았던 시절, 인쇄용 특수 기호(저작권 기호 ©, 등록 상표 ®, 여러 그리스 문자 등)를 ASCII 환경에서도 표시하기 위한 수단으로 중요하게 쓰였습니다. HTML5 사양에서는 최종적으로 2,000종 이상의 명명된 엔티티가 정의되어, 체크 표시나 음표 기호 같은 사소한 기호까지 망라하고 있습니다.
오늘날에는 UTF-8 인코딩이 널리 보급되면서 글자 깨짐을 피하기 위한 문자 참조의 필요성이 크게 줄었습니다. 하지만 <, >, & 이 세 문자만큼은 지금도 전혀 다른 이유로 이스케이프가 필수입니다. 이들은 HTML 파서에게 구문상 특별한 의미(태그의 시작·종료, 엔티티의 시작)를 가지므로, 이스케이프를 소홀히 하면 레이아웃 붕괴나 XSS 취약점으로 직결될 수 있습니다.