HTML 이스케이프/언이스케이프
&, <, >, ", ' 등의 특수 문자를 HTML 엔티티로 변환(이스케이프)하거나, 엔티티를 원래 문자로 되돌립니다(언이스케이프). XSS 방지 및 HTML에 텍스트를 삽입할 때 유용합니다.
주요 명명된 HTML 엔티티 목록
| 문자 | 명명된 엔티티 | 숫자 문자 참조 | 설명 |
|---|---|---|---|
| & | & | & | 앰퍼샌드("and"를 뜻하는 기호) |
| < | < | < | 보다 작다 기호(HTML 태그의 시작 문자와 동일) |
| > | > | > | 보다 크다 기호(HTML 태그의 종료 문자와 동일) |
| " | " | " | 큰따옴표(속성 값 구분 기호) |
| ' | ' | ' | 작은따옴표(속성 값 구분 기호) |
| |   | 줄바꿈 없는 공백(줄바꿈을 막는 공백 문자) | |
| © | © | © | 저작권 기호 |
| ® | ® | ® | 등록 상표 기호 |
| ™ | ™ | ™ | 상표 기호 |
| € | € | € | 유로 기호 |
| ¥ | ¥ | ¥ | 엔 기호 |
| ¢ | ¢ | ¢ | 센트 기호 |
HTML 이스케이프란
HTML 이스케이프란 &·<·>·"·'라는 다섯 개의 특수 문자를, 브라우저가 구문으로 해석하지 않는 다른 표기(HTML 엔티티)로 변환하는 처리입니다. 사용자가 입력한 문자열을 그대로 HTML에 삽입하면 <나 >가 태그의 시작·끝으로 잘못 인식되어 레이아웃이 무너지거나, <script> 같은 악의적인 코드가 실행되는 XSS(크로스 사이트 스크립팅)를 일으킬 수 있습니다. HTML 이스케이프는 이 위험을 막기 위한 기본적인 대책입니다.
언이스케이프는 그 반대로, & 같은 이름 있는 엔티티나 & 같은 숫자 문자 참조를 원래의 문자로 되돌리는 처리입니다. 다른 사이트에서 HTML 소스를 복사했을 때나, CMS·게시판의 게시 데이터를 확인할 때, 엔티티 표기 그대로는 읽기 어려운 본래의 문자열을 복원하고 싶을 때 사용합니다. 변환은 브라우저 안의 자바스크립트만으로 끝나며, 입력 내용이 외부로 전송되는 일은 없습니다.
HTML 이스케이프 사용 방법
- 모드를 고릅니다 문자를 엔티티로 변환하고 싶으시면 ‘이스케이프’, 엔티티를 원래 문자로 되돌리고 싶으시면 ‘언이스케이프’를 선택합니다.
- 텍스트를 입력란에 붙여 넣습니다 HTML에 삽입하고 싶은 문자열, 또는 엔티티 표기를 포함한 문자열을 입력란에 붙여 넣습니다.
- 변환 결과를 확인합니다 입력과 동시에 아래의 변환 결과란에 실시간으로 반영됩니다. 입력을 다시 고치면 그때마다 재계산됩니다.
- 결과를 복사합니다 ‘복사’ 버튼으로 변환 결과를 클립보드에 보낼 수 있습니다. CMS의 본문이나 소스 코드에 그대로 붙여 넣으실 수 있습니다.
더 잘 활용하기 위한 팁
- HTML 이스케이프는 XSS(크로스 사이트 스크립팅) 방지의 기본입니다. 사용자 입력을 HTML에 삽입하기 전에 반드시 이스케이프하세요.
&는 반드시 가장 먼저 이스케이프해야 합니다. 다른 문자를 먼저 변환하면 새로 생성된&안의&까지 이중으로 이스케이프됩니다.- 속성 값에 문자열을 삽입할 때는
"(큰따옴표)뿐 아니라'(작은따옴표)도 함께 이스케이프해 두면 더 안전합니다. - 이 도구는 10진수 문자 참조(
&), 16진수 문자 참조(&), 그리고 주요 명명된 엔티티(&등)의 언이스케이프를 지원합니다. - 많은 템플릿 엔진(Blade, JSX, Vue 등)은 변수를 삽입할 때 자동으로 HTML을 이스케이프하지만,
{!! !!}나 v-html 같은 "원본 HTML 출력" 구문을 사용할 때는 직접 이스케이프해야 합니다.
HTML 이스케이프의 활용 사례
CMS·블로그 글에 인용 삽입
글 본문에 프로그램 코드나 다른 사이트의 인용문을 실을 때, <나 >를 포함한 문자열을 그대로 붙이면 태그로 잘못 인식되어 표시가 무너집니다. 미리 이스케이프한 뒤 붙여 넣으면 안전하게 표시할 수 있습니다.
게시판·댓글란의 게시 내용 확인
게시판이나 댓글란의 데이터베이스에 엔티티 표기 그대로 저장된 게시물을 확인하고 싶을 때, 언이스케이프로 원래 텍스트로 되돌려 읽기 쉽게 만들 수 있습니다.
Markdown 안에 HTML 조각 삽입
Markdown 문서 안에서 HTML 태그의 견본이나 샘플 코드를 그대로 표시하고 싶은 경우, 이스케이프해 두면 Markdown 파서나 브라우저가 태그로 해석하지 않고 문자열로 표시합니다.
HTML 템플릿의 디버그
템플릿 엔진이 출력한 HTML 소스 안에서, 의도치 않게 이스케이프된(또는 누락된) 부분을 조사할 때 변환 전후의 문자열을 맞춰 보는 용도로도 쓰실 수 있습니다.
용어집
- HTML 엔티티(문자 실체 참조)
- HTML 문서 안에서 특수한 의미를 갖는 문자를 안전하게 표시하기 위한 표기법입니다.
&처럼 「&」로 시작해 「;」로 끝나는 이름 있는 형식이 있습니다. - 숫자 문자 참조
- 문자를 유니코드의 코드 포인트 번호로 지정하는 표기법입니다. 10진수는
&, 16진수는&처럼 쓰며, 모두 같은 문자를 나타냅니다. - XSS(크로스 사이트 스크립팅)
- 사용자 입력에 포함된 스크립트가 이스케이프되지 않은 채 페이지에 삽입되어, 다른 이용자의 브라우저에서 의도치 않은 코드가 실행되어 버리는 취약점입니다. HTML 이스케이프는 대표적인 대책 중 하나입니다.
- 새니타이즈
- 외부로부터 받은 데이터에서 위험한 요소를 제거하거나 무해한 형식으로 변환하는 처리 전반을 가리킵니다. 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 취약점으로 직결될 수 있습니다.