HTML 엔티티 이스케이프

HTML 엔티티를 이스케이프하거나 원래 문자로 되돌립니다. (<, >, &, 따옴표 등)

문자열의 HTML 특수문자(&, <, >, 큰따옴표, 작은따옴표)를 엔티티로 바꾸거나, 엔티티를 원래 문자로 되돌립니다. lodash의 escape와 unescape를 사용합니다.

사용 순서

Escape 카드의 입력란에 HTML 조각을 넣습니다. 아래 칸에 이스케이프된 문자열이 나옵니다.
Copy 버튼으로 결과를 복사합니다.
Unescape 카드에 < 같은 엔티티가 들어 있는 문자열을 넣습니다.
아래 칸에서 원래 문자열을 확인합니다.

예시

<title>IT Tool</title> 을 이스케이프하면 <title>IT Tool</title> 가 나오고, 그 결과를 Unescape에 넣으면 원래 문자열로 돌아옵니다.

한계

escape는 & < > " ' 다섯 문자만 바꾸고 슬래시(/)는 그대로 둡니다. unescape는 & < > " ' 다섯 가지만 복원하므로  나 A 같은 엔티티는 그대로 남습니다. 임의의 이름 있는 엔티티나 숫자 참조를 처리해야 한다면 다른 도구가 필요합니다.

보안 주의

unescape 결과는 살아 있는 HTML 마크업이 됩니다. 예를 들어 <img src=x onerror=...> 같은 입력을 풀어서 innerHTML에 넣으면 스크립트가 실행될 수 있습니다. 결과는 텍스트로만 쓰고 HTML로 삽입하지 마세요.

배경 지식

HTML에서 <와 &는 태그와 엔티티의 시작 기호이므로, 화면에 글자로 보이게 하려면 엔티티 형태로 바꿔야 합니다. <는 <, &는 &, "는 큰따옴표를 뜻합니다. 템플릿에 사용자 입력을 넣을 때 이 이스케이프가 빠지면 입력이 태그로 해석되어 XSS 취약점이 생깁니다. 반대로 이미 이스케이프된 값을 또 이스케이프하면 &lt;처럼 엔티티 문자열이 화면에 그대로 보입니다.

HTML에는 이름 있는 엔티티가 2000개가 넘게 정의되어 있지만, 이 도구는 기본 다섯 가지만 다룹니다. 그래서 escape와 unescape는 대칭이 아닙니다. 예를 들어  는 unescape 후에도 남습니다. 텍스트 편집기나 API 응답을 다룰 때는 실제로 어떤 엔티티가 들어오는지 먼저 확인하고, 그 범위에 맞는 도구를 고르는 것이 좋습니다.

자주 묻는 질문

작은따옴표는 '로 바꾸나요, '로 바꾸나요?

이 도구는 '을 씁니다. '는 HTML5에서 정의된 이름 있는 엔티티이지만 HTML 4에는 없어서 오래된 환경에서 해석되지 않을 수 있습니다. '는 어디서나 해석되므로 호환성 측면에서 안전합니다.

이스케이프한 문자열을 JSON에 넣어도 되나요?

JSON 문자열 안에서는 &, <, > 가 특별한 의미를 갖지 않으므로 이스케이프할 필요가 없습니다. JSON을 HTML 속성이나 script 블록 안에 넣을 때만 이 도구의 결과가 필요합니다.

입력에 이미 엔티티가 있으면 escape 결과는 어떻게 되나요?

& 기호가 &로 바뀌므로 <는 &lt;가 됩니다. 이미 인코딩된 입력을 두 번 처리하면 화면에 엔티티 문자열이 그대로 보이므로, 입력이 원문인지 먼저 확인하세요.