HTML 이스케이프·언이스케이프 방법
- 특수 문자를 엔티티로 바꾸려면 인코딩 (이스케이프)을, 엔티티를 보통 글자로 되돌리려면 디코딩 (언이스케이프)을 고릅니다.
- 텍스트나 마크업을 위쪽 칸에 붙여 넣습니다. 입력하는 대로 아래 결과가 바뀝니다.
- 인코딩할 때 결과가 순수 ASCII만 다루는 시스템을 거쳐야 한다면 ASCII가 아닌 문자도 인코딩을 켭니다.
- 복사를 누르거나, ⇅ 서로 바꾸기로 결과를 반대 모드에 다시 넣어 원래 텍스트가 나오는지 확인합니다.
인코딩하면 바뀌는 문자
인코딩은 브라우저가 페이지를 읽는 방식을 바꿀 수 있는 다섯 글자만 정확히 바꿉니다.
| 문자 | 바뀐 모양 | 바꾸는 이유 |
|---|---|---|
& | & | 엔티티의 시작이라 그냥 두면 잘못 읽힐 수 있음 |
< | < | 태그를 엶 |
> | > | 태그를 닫음 |
" | " | 큰따옴표로 감싼 속성 값을 끝냄 |
' | ' | 작은따옴표로 감싼 속성 값을 끝냄 |
다섯 글자는 한 번에 바뀌므로, 이스케이프 과정에서 새로 생긴 &가 다시 이스케이프되는 일은 없습니다. 둥근 따옴표, 악센트 글자, 한글, 이모지 같은 나머지 문자는 ASCII 옵션을 켜지 않는 한 그대로 둡니다. 옵션을 켜면 ASCII 밖의 모든 문자가 유니코드 코드 포인트를 바탕으로 한 10진수 숫자 참조로 바뀝니다. é는 é, €는 €, 한은 한, 😀는 😀가 됩니다.
디코딩은 HTML이 정의한 이름 있는 엔티티 전체(é, , ♥ 등)와 10진수(é), 16진수(é) 참조를 모두 이해합니다. 입력 속 태그는 글자로만 남고, 화면에 그려지거나 실행되지 않습니다.
예시
블로그 글에 코드 보여 주기
if (a < b && b > c)를 붙여 넣으면 if (a < b && b > c)가 나옵니다. 이것을 <pre><code> 안에 넣으면 페이지가 깨지지 않고 원래 코드가 그대로 보입니다.
따옴표와 타이포그래피가 섞인 마크업
입력 칸의 예시 문장 <p class="note">Tom & Jerry’s “best” café</p>는 <p class="note">Tom & Jerry’s “best” café</p>가 됩니다. ASCII가 아닌 문자 인코딩을 켜면 둥근 아포스트로피와 따옴표, é까지 바뀝니다: Jerry’s “best” café.
두 번 이스케이프된 텍스트 바로잡기
페이지에 &가 있어야 할 자리에 &가 보인다면(Tom & Jerry), 저장할 때 한 번, 화면에 낼 때 또 한 번 이스케이프된 것입니다. 한 번 디코딩한 뒤 결과를 보고, 엔티티가 남아 있을 때만 다시 디코딩하세요. 근본적인 해결책은 출력하는 시점 한 곳에서만 이스케이프하는 것입니다.
이스케이프와 크로스 사이트 스크립팅(XSS)
사이트가 사용자 입력을 이스케이프하지 않고 페이지에 넣으면, 방문자가 <img src=x onerror="alert(1)"> 같은 내용을 올려 그 페이지를 보는 모든 사람의 브라우저에서 실행되게 할 수 있습니다. 이스케이프하면 같은 입력이 <img src=x onerror="alert(1)">로 바뀌어 해가 없는 글자로 표시됩니다.
이런 이스케이프가 지켜 주는 곳은 두 군데, 태그 사이의 텍스트와 따옴표로 감싼 속성 값입니다. <script> 블록, 인라인 이벤트 핸들러, CSS, 따옴표 없는 속성, href 같은 URL 안에서는 충분하지 않습니다. 예를 들어 javascript: 링크에는 특수 문자가 하나도 필요 없습니다. 실제 애플리케이션에서는 템플릿 엔진의 자동 이스케이프에 맡기고, 이 도구는 개별 문자열을 살펴보거나 준비하는 데 쓰세요.
팁
- UTF-8로 저장한 페이지에는 é, ü, 한글, 中文을 그대로 쓸 수 있습니다. 굳이 인코딩하면 소스만 읽기 어려워집니다. ASCII 옵션은 오래된 이메일 템플릿, 구형 CMS 입력란, 인코딩을 통제할 수 없는 파일에 쓰세요.
는 줄 바꿈 없는 공백(U+00A0)으로 디코딩됩니다. 공백처럼 보이지만 공백이 아니어서 코드의 검색이나 비교를 망칠 수 있으니, 정확한 일치가 중요하다면 바꿔 두세요.- 엔티티는 HTML과 XML에서만 쓰입니다. 링크에는 URL 인코딩을, JSON 문자열 안에서는 JSON 자체의 이스케이프를 쓰세요(문자열이 올바른지는 JSON 포매터로 확인할 수 있습니다).
자주 묻는 질문
'와 '는 무엇이 다른가요?
둘 다 아포스트로피를 뜻합니다. '는 XML과 HTML5에는 정의되어 있지만 HTML 4에는 없었습니다. 숫자 형식인 '는 모든 브라우저와 이메일 프로그램에서 통하므로 이 도구는 이쪽을 씁니다.
이름 있는 엔티티와 숫자 엔티티 중 무엇을 써야 하나요?
어느 쪽이든 같은 글자로 디코딩됩니다. © 같은 이름 있는 엔티티는 읽기 쉽고, 숫자 엔티티는 모든 유니코드 문자에 존재하는 반면 이름은 일부 문자에만 있습니다.
일반 텍스트에서는 왜 >를 이스케이프하지 않아도 되나요?
엄밀히 말해 텍스트 속 > 하나는 해가 없고, 반드시 이스케이프해야 하는 것은 <와 &뿐입니다. 다섯 글자를 모두 일관되게 이스케이프하면 같은 결과를 따옴표로 감싼 속성 안에도 안전하게 쓸 수 있습니다.
디코딩할 때 붙여 넣은 코드가 실행되나요?
아니요. 디코딩은 엔티티를 글자로 바꿀 뿐이며, 결과는 읽기 전용 칸에 일반 텍스트로 표시됩니다.