HTML 이스케이프 — HTML 특수문자 및 엔티티 변환 도구
HTML에서 특별한 의미를 갖는 <, >, &, ", ' 같은 특수문자를 브라우저가 코드로 해석하지 않도록 <, >, &, ", ' 형태의 HTML 엔티티로 변환합니다.
반대로 엔티티 코드를 원래 문자로 되돌리는 언이스케이프도 지원합니다.
모든 처리는 브라우저 안에서만 이루어지며, 입력한 내용은 서버로 전송되지 않습니다.
URL 파라미터에 포함된 특수문자를 처리할 때는 URL 인코딩/디코딩 도구를,
데이터를 텍스트 형태로 안전하게 전송할 때는 Base64 인코딩/디코딩 도구를 함께 활용하세요.
HTML 이스케이프가 필요한 이유 — XSS 공격 방지와 안전한 출력
HTML 특수문자를 이스케이프하지 않으면 브라우저가 사용자 입력값을 코드로 실행할 수 있습니다.
예를 들어 <script>alert('XSS')</script>를 그대로 출력하면 스크립트가 실행되지만, 이스케이프 처리하면 화면에 문자 그대로 표시됩니다.
게시판, 댓글, 검색 결과 등 사용자 입력을 화면에 표시하는 모든 곳에서 이스케이프는 필수입니다.
백엔드에서 처리하더라도 결과를 직접 눈으로 확인하거나 테스트할 때 이 도구를 활용하면 빠릅니다.
HTML 주요 특수문자 엔티티 코드 — 이스케이프 대상 문자 목록
HTML에서 반드시 이스케이프해야 하는 문자와 그에 대응하는 엔티티 코드입니다.
| 문자 | 엔티티 코드 | 설명 |
|---|---|---|
| < | < | 태그 시작, 부등호 |
| > | > | 태그 끝, 부등호 |
| & | & | 엔티티 시작 기호 |
| " | " | 속성값 큰따옴표 |
| ' | ' | 속성값 작은따옴표 |
<와 >는 태그로 해석되고, &는 엔티티의 시작으로 인식되기 때문에 가장 우선적으로 처리해야 합니다.
큰따옴표와 작은따옴표는 HTML 속성값 내부에 직접 사용할 경우 속성 구문이 깨질 수 있어 이스케이프가 필요합니다.
는 여러 개의 공백을 HTML에서 표현하거나 줄바꿈 없는 공백이 필요할 때 사용합니다.
언이스케이프(Unescape)란 — 엔티티 코드를 원래 문자로 복원하는 방법
이스케이프의 반대 작업이 언이스케이프입니다. <, >, &같은 HTML 엔티티 코드를 다시 <, >, & 원래 문자로 되돌립니다.
언이스케이프가 자주 필요한 상황은 다음과 같습니다.
API 응답이나 데이터베이스에 저장된 HTML 엔티티 문자열을 실제 HTML 소스로 복원할 때,
이메일 템플릿이나 외부 시스템에서 가져온 이스케이프된 콘텐츠를 편집하기 전에 원래 형태로 되돌릴 때,
그리고 서버에서 이중 인코딩된 문자열을 디버깅할 때 유용합니다.
도구 상단의 ESCAPE / UNESCAPE 버튼으로 두 방향 모두 처리할 수 있습니다.
HTML 이스케이프 출력 형식 비교 — HTML, JS, JSON 방식의 차이
같은 특수문자라도 어디서 쓰이느냐에 따라 이스케이프 방식이 다릅니다.
HTML 출력은 <, >, &, " 같은 HTML 엔티티를 사용합니다. HTML 소스코드에 직접 삽입되는 텍스트에 적합합니다.
JavaScript 문자열 출력은 \", \', \\ 같은 백슬래시 이스케이프를 사용합니다. JS 코드 안에 삽입되는 문자열에 필요합니다.
JSON 출력은 JSON 표준에 따라 큰따옴표와 제어 문자를 이스케이프합니다. API 응답이나 JSON 파일에 텍스트를 안전하게 포함시킬 때 사용합니다.
이 도구는 HTML, JS, JSON 세 가지 출력 방식을 모두 지원하므로 사용 목적에 맞는 형식을 선택해 복사할 수 있습니다.
언어별 HTML 이스케이프 코드 레퍼런스 — 서버사이드 처리 방법
프론트엔드 도구로 결과를 확인한 후 실제 서비스에서는 서버사이드에서 자동으로 이스케이프 처리해야 합니다.
| Language | 이스케이프 방법 |
|---|---|
| Java (Spring) | HtmlUtils.htmlEscape(str) |
| Java (Commons Text) | StringEscapeUtils.escapeHtml4(str) |
| JavaScript | textContent / createTextNode() |
| Python | html.escape(str) |
| PHP | htmlspecialchars($str, ENT_QUOTES) |
| Go | html.EscapeString(str) |
| Ruby | CGI.escapeHTML(str) |
템플릿 엔진(Thymeleaf, Jinja2, Blade 등)은 대부분 th:text, {{ }} 구문에서 자동으로 이스케이프를 처리합니다.
단, th:utext나 |raw| 필터처럼 원본 HTML을 그대로 출력하는 구문 사용 시에는 직접 검증이 필요합니다.
자주 사용하는 HTML 엔티티 — 빠른 복사 레퍼런스
실무에서 자주 쓰이는 HTML 엔티티를 정리했습니다. 클릭 한 번으로 복사해 사용하세요.
| 문자 | 엔티티 이름 | 엔티티 번호 | 설명 |
|---|---|---|---|
| < | < | < | 보다 작음, 태그 시작 |
| > | > | > | 보다 큼, 태그 끝 |
| & | & | & | 앰퍼샌드 |
| " | " | " | 큰따옴표 |
| ' | ' | ' | 작은따옴표 |
| 공백 | |   | 줄바꿈 없는 공백 |
| © | © | © | 저작권 기호 |
| ® | ® | ® | 등록 상표 |
| ™ | ™ | ™ | 상표 기호 |
| — | — | — | 긴 대시 |
이름 엔티티(< 형태)와 번호 엔티티(< 형태)는 동일한 결과를 출력합니다.
숫자 엔티티는 이름이 없는 문자까지 표현할 수 있어 범용성이 높습니다.
자주 묻는 질문
네, 전혀 다른 처리입니다.
HTML 이스케이프는 HTML 문서 안에서 특수문자가 태그나 엔티티로 해석되지 않도록 <, & 같은 형태로 변환합니다.
URL 인코딩은 URL에서 사용할 수 없는 문자를 %2F, %20 같은 퍼센트 인코딩 형태로 변환합니다.
용도가 다르기 때문에 혼용하면 의도하지 않은 결과가 생깁니다.
URL 파라미터에 HTML 포함 여부가 있다면 URL 인코딩을 먼저 적용한 후 HTML 이스케이프를 별도로 처리해야 합니다.
네. 있습니다.
HTML 속성값 안에 사용자 입력을 그대로 넣을 때 속성 구문이 깨지는 Attribute Injection이 대표적입니다.
예를 들어 href나 value 속성에 큰따옴표가 포함된 문자열을 이스케이프 없이 삽입하면 속성이 중간에 끊겨 의도하지 않은 동작이 발생합니다.
또한 이메일 템플릿, PDF 생성, CSV 내보내기처럼 HTML이 아닌 출력 대상에도 맥락에 맞는 이스케이프가 각각 필요합니다.
th:text 속성을 사용하면 Thymeleaf가 자동으로 HTML 이스케이프를 처리합니다.
예를 들어 model에 test가 있을 때 th:text로 출력하면 화면에 태그 문자 그대로 표시됩니다.
반면 th:utext는 이스케이프 없이 원본 HTML을 그대로 렌더링하기 때문에 신뢰할 수 없는 데이터에 사용하면 XSS 위험이 있습니다.
th:utext는 관리자가 직접 작성한 HTML 콘텐츠처럼 출처가 명확한 경우에만 사용하세요.
전송되지 않습니다. 이스케이프·언이스케이프 처리는 모두 사용자의 브라우저 안에서만 실행됩니다.
HTML 코드, 개인정보가 포함된 스크립트, API 키 등 어떤 입력 데이터도 외부 서버로 전송되지 않습니다.
이 도구는 HTML 표준에서 이스케이프가 필요한 특수문자(<, >, &, ", ')만 변환합니다. 한글, 일본어, 이모지 같은 멀티바이트 문자는 HTML5에서 UTF-8 인코딩을 사용하면 별도 이스케이프 없이 안전하게 출력됩니다.
다만 ASCII만 허용하는 레거시 시스템에서는 Unicode 코드 포인트 기반의 엔티티 변환이 필요할 수 있으며, 이 경우 별도의 문자 인코딩 처리를 적용해야 합니다.
엄밀히는 다르지만 혼용되는 경우가 많습니다.
HTML 엔티티(HTML Entity)는 <, &, ©처럼 특정 문자를 표현하기 위해 HTML에서 정의한 표기법입니다.
HTML 이스케이프(HTML Escape)는 특수문자가 브라우저에서 코드로 해석되지 않도록 HTML 엔티티 형태로 변환하는 행위를 말합니다.
즉, 이스케이프를 수행한 결과물이 HTML 엔티티입니다. 검색이나 개발 문서에서는 두 용어가 같은 개념으로 쓰이는 경우가 많습니다.