HTML 엔티티(Entity)의 기술적 원리와 XSS 보안 방어 분석
HTML(HyperText Markup Language)은 웹페이지의 구조를 정의하는 마크업 언어로, 꺾쇠괄호(< >), 앰퍼샌드(&), 따옴표(" ')와 같은 특수문자를 태그 구문(Tag Syntax)과 속성(Attribute)을 해석하기 위한 예약어(Reserved Characters)로 사용합니다.
만약 웹페이지의 본문이나 사용자 입력값에 <script>나 & 같은 문자가 원본 그대로 포함되면, 브라우저 HTML 파서는 이를 텍스트 데이터가 아닌 마크업 태그나 엔티티 시작 신호로 오인하여 웹페이지 레이아웃이 깨지거나 악성 스크립트가 실행되는 치명적인 크로스 사이트 스크립팅(XSS, Cross-Site Scripting) 보안 취약점이 발생합니다.
HTML 엔티티(Character Entity References)는 이러한 문법 충돌과 보안 위협을 방지하기 위해 예약어와 특수 유니코드 기호를 안전한 문자열 형태(&이름; 또는 &#코드;)로 표현하는 W3C 웹 표준 메커니즘입니다.
Named, Decimal, Hex 3대 포맷 완벽 지원
가독성이 높은 Named 엔티티(&)부터 W3C 표준 10진수(&) 및 16진수(&) 포맷을 원클릭으로 선택 변환합니다.
5대 특수문자 vs Non-ASCII 맞춤형 스코프
XSS 방어용 5대 예약어 전용 변환 모드와 다국어/유니코드 기호 전체 변환 모드를 유연하게 제공합니다.
자주 쓰이는 엔티티 인터랙티브 테이블
통화 기호, 수학 연산자, 저작권 기호 표를 제공하며 행 클릭 시 커서 위치에 즉시 삽입할 수 있습니다.
안전한 DOM 기반 디코딩 엔진
브라우저 네이티브 DOMParser 파싱 알고리즘을 활용하여 모든 복잡한 HTML 엔티티를 원본 텍스트로 정확하게 복원합니다.
1. 반드시 이스케이프해야 하는 HTML 5대 핵심 예약 문자
& & / &):&는 엔티티의 시작을 알리는 특수 문자입니다. 본문에 Tom & Jerry를 그대로 쓰면 브라우저가 &Jerry라는 엔티티를 찾으려 시도하다 문법 오류를 일으킬 수 있으므로 반드시 &로 치환해야 합니다.< < / <):<div, <script>)의 시작을 알리는 문자입니다. <를 이스케이프하지 않으면 브라우저가 이를 태그로 해석하여 스크립트 실행 공격(XSS)으로 이어집니다.> > / >):>로 변환합니다." " / "):<input value="입력값">)입니다. 속성값 내에 큰따옴표가 포함되면 속성이 의도치 않게 조기 종료되어 이벤트 핸들러(onload=, onerror=) 주입 공격이 발생할 수 있습니다.' ' 또는 '):'를 사용하는 것이 안전합니다.2. HTML 엔티티 3대 표기 방식 비교 명세표
동일한 특수문자라도 사용하는 표기법(Named, Decimal, Hex)에 따라 표현 코드가 달라집니다.
| 문자 (Character) | 설명 및 용도 | Named Entity | Decimal (10진수) | Hexadecimal (16진수) |
|---|---|---|---|---|
| & | 앰퍼샌드 (Ampersand) | & | & | & |
| < | 여는 꺾쇠 (Less Than) | < | < | < |
| > | 닫는 꺾쇠 (Greater Than) | > | > | > |
| " | 큰따옴표 (Double Quote) | " | " | " |
| ' | 작은따옴표 (Single Quote) | ' (또는 ') | ' | ' |
| © | 저작권 기호 (Copyright) | © | © | © |
| ® | 등록상표 기호 (Registered) | ® | ® | ® |
| ™ | 상표 기호 (Trademark) | ™ | ™ | ™ |
| € | 유로 통화 기호 (Euro) | € | € | € |
| 줄바꿈 없는 공백 (Non-breaking space) | |   |   |
3. 웹 보안: XSS(Cross-Site Scripting) 방어 원리와 브라우저 렌더링
element.textContent = str을 처리할 때는 문자열을 순수 텍스트 노드로 생성하므로 스크립트가 실행되지 않습니다.element.innerHTML = str을 사용할 때는 브라우저 HTML 파서가 동작하므로, 사용자가 입력한 문자열에 <img src=x onerror=alert(1)>가 포함되어 있다면 즉시 스크립트가 실행되어 세션 쿠키 탈취 등의 해킹이 발생합니다.<input value="${userInput}"> 컨텍스트에서는 사용자가 "를 입력하여 속성을 탈출하고 onfocus=alert(1)을 추가할 수 있으므로, 반드시 큰따옴표(")를 "로 이스케이프해야 합니다.4. 주요 프로그래밍 언어별 HTML 이스케이프 구현 코드
html.escape() 및 html.unescape() 활용.StringEscapeUtils.escapeHtml4() 또는 커스텀 인코더.htmlspecialchars($str, ENT_QUOTES | ENT_HTML5, "UTF-8") 활용.System.Net.WebUtility.HtmlEncode() 및 HtmlDecode() 활용.주요 프로그래밍 언어별 HTML 엔티티 인코딩 & 디코딩 구현 코드
웹 프론트엔드 및 백엔드 실무에서 즉시 활용할 수 있는 언어별 표준 HTML 엔티티 처리 스니펫입니다.
| 1 | // 1. 5대 핵심 특수문자 HTML 이스케이프 (XSS 방어) |
| 2 | function escapeHTML(str: string): string { |
| 3 | const entityMap: Record<string, string> = { |
| 4 | '&': '&', |
| 5 | '<': '<', |
| 6 | '>': '>', |
| 7 | '"': '"', |
| 8 | "'": ''', |
| 9 | }; |
| 10 | return str.replace(/[&<>"']/g, (s) => entityMap[s]); |
| 11 | } |
| 12 | |
| 13 | // 2. HTML 엔티티 디코딩 (DOMParser API 활용) |
| 14 | function unescapeHTML(html: string): string { |
| 15 | const doc = new DOMParser().parseFromString(html, 'text/html'); |
| 16 | return doc.documentElement.textContent || ''; |
| 17 | } |
| 18 | |
| 19 | const raw = '<script>alert("XSS & Hello!");</script>'; |
| 20 | const encoded = escapeHTML(raw); |
| 21 | console.log("Encoded:", encoded); |
| 22 | // 출력: <script>alert("XSS & Hello!");</script> |
| 23 | |
| 24 | const decoded = unescapeHTML(encoded); |
| 25 | console.log("Decoded:", decoded); |
| 1 | import html |
| 2 | |
| 3 | # 1. HTML 엔티티 인코딩 (기본적으로 <, >, &, ", ' 이스케이프) |
| 4 | raw_text = '<div class="banner">Hello & Welcome!</div>' |
| 5 | encoded = html.escape(raw_text, quote=True) |
| 6 | print("Encoded:", encoded) |
| 7 | # 출력: <div class="banner">Hello & Welcome!</div> |
| 8 | |
| 9 | # 2. HTML 엔티티 디코딩 |
| 10 | decoded = html.unescape(encoded) |
| 11 | print("Decoded:", decoded) |
| 1 | <?php |
| 2 | $raw = '<a href="test.php?id=1&name=Tom">Click & "Go"</a>'; |
| 3 | |
| 4 | // 1. htmlspecialchars (ENT_QUOTES 옵션으로 큰따옴표, 작은따옴표 모두 변환) |
| 5 | $encoded = htmlspecialchars($raw, ENT_QUOTES | ENT_HTML5, 'UTF-8'); |
| 6 | echo "Encoded: " . $encoded . "\n"; |
| 7 | |
| 8 | // 2. htmlspecialchars_decode (디코딩) |
| 9 | $decoded = htmlspecialchars_decode($encoded, ENT_QUOTES | ENT_HTML5); |
| 10 | echo "Decoded: " . $decoded . "\n"; |
| 11 | ?> |
| 1 | import java.net.URLEncoder; |
| 2 | |
| 3 | public class HtmlEscapeUtil { |
| 4 | // 5대 핵심 특수문자 이스케이프 |
| 5 | public static String escapeHtml(String input) { |
| 6 | if (input == null) return ""; |
| 7 | return input.replace("&", "&") |
| 8 | .replace("<", "<") |
| 9 | .replace(">", ">") |
| 10 | .replace(""", """) |
| 11 | .replace("'", "'"); |
| 12 | } |
| 13 | |
| 14 | public static void main(String[] args) { |
| 15 | String text = "<script>alert('Hello & "World"');</script>"; |
| 16 | String escaped = escapeHtml(text); |
| 17 | System.out.println("Escaped: " + escaped); |
| 18 | } |
| 19 | } |
| 1 | using System; |
| 2 | using System.Net; |
| 3 | |
| 4 | class Program { |
| 5 | static void Main() { |
| 6 | string raw = "<div class="user">Admin & User 'A'</div>"; |
| 7 | |
| 8 | // 1. WebUtility.HtmlEncode |
| 9 | string encoded = WebUtility.HtmlEncode(raw); |
| 10 | Console.WriteLine($"Encoded: {encoded}"); |
| 11 | |
| 12 | // 2. WebUtility.HtmlDecode |
| 13 | string decoded = WebUtility.HtmlDecode(encoded); |
| 14 | Console.WriteLine($"Decoded: {decoded}"); |
| 15 | } |
| 16 | } |
| 1 | package main |
| 2 | |
| 3 | import ( |
| 4 | "fmt" |
| 5 | "html" |
| 6 | ) |
| 7 | |
| 8 | func main() { |
| 9 | raw := "<script>alert('Hello & "World"');</script>" |
| 10 | |
| 11 | // 1. EscapeString |
| 12 | encoded := html.EscapeString(raw) |
| 13 | fmt.Println("Encoded:", encoded) |
| 14 | |
| 15 | // 2. UnescapeString |
| 16 | decoded := html.UnescapeString(encoded) |
| 17 | fmt.Println("Decoded:", decoded) |
| 18 | } |
클라이언트 로컬 연산 FAQ
Q.HTML 엔티티 변환과 URL 인코딩(Percent-Encoding)은 어떻게 다른가요?
HTML 엔티티 변환은 HTML 문서 파싱 시 태그 충돌을 방지하고 XSS 공격을 차단하기 위해 특수문자를 &, <, > 형태로 치환하는 웹 문서 렌더링 표준입니다. 반면 URL 인코딩은 웹 주소(URL) 및 HTTP 쿼리스트링 전송 시 안전한 ASCII 바이트로 전달하기 위해 %20, %26, %3F 형태로 변환하는 네트워크 프로토콜 표준입니다.
Q.왜 작은따옴표(')에 ' 대신 ' 또는 '을 사용하는 경우가 많나요?
'는 XML 표준 및 HTML5 표준에는 정의되어 있으나, 구형 Internet Explorer 브라우저(IE8 이하) 및 일부 레거시 HTML4 파서에서 인식하지 못하는 호환성 문제가 있었습니다. 따라서 가장 안전하고 널리 쓰이는 표준 방식은 10진수 ' 또는 16진수 '를 사용하는 것입니다.
Q.모든 한글과 유니코드 문자를 엔티티로 변환해야 하나요?
아닙니다. 현대의 모든 웹페이지는 <meta charset="UTF-8"> 선언을 통해 UTF-8 인코딩을 기본으로 사용하므로 한글이나 다국어는 원본 그대로 출력해도 전혀 깨지지 않습니다. 다만 이메일 HTML 템플릿(구형 이메일 클라이언트 호환)이나 특수한 임베디드 ASCII 환경에서는 한글을 가와 같은 수치 엔티티로 변환하여 전송하기도 합니다.
Q.React나 Vue.js 같은 모던 프레임워크에서도 수동으로 엔티티 변환을 해야 하나요?
일반적인 JSX 바인딩(<div>{userInput}</div>)이나 Vue 템플릿(<div>{{ userInput }}</div>)에서는 프레임워크가 자동으로 안전한 텍스트 노드로 렌더링하므로 별도의 수동 엔티티 변환이 필요하지 않습니다. 단, dangerouslySetInnerHTML이나 v-html을 사용하여 HTML을 직접 삽입할 때는 반드시 사전 엔티티 이스케이프 처리가 필수적입니다.
Q.이중 이스케이프(Double Escaping)란 무엇이고 어떻게 방지하나요?
이미 이스케이프된 문자열(<div>)을 실수로 한 번 더 이스케이프하면 & 문자가 다시 변환되어 &lt;div&gt;가 되는 현상입니다. 이 경우 브라우저 화면에 태그가 아니라 <div> 텍스트 자체가 그대로 노출됩니다. 이를 방지하려면 인코딩을 수행하기 전 데이터가 이미 이스케이프된 상태인지 확인하거나, 렌더링 직전 계층에서만 1회 이스케이프를 수행해야 합니다.
Q.엔티티 디코딩 시 악성 스크립트가 실행될 위험은 없나요?
본 도구의 디코딩 엔진은 가상 텍스트 노드 추출(DOM Text Content) 방식을 사용하므로 브라우저 내에서 자바스크립트 코드가 실행되지 않고 순수 텍스트로만 안전하게 복원됩니다.
Q.입력한 HTML 데이터가 외부 서버로 전송되거나 저장되나요?
전송되지 않습니다. Toolbase의 모든 도구는 사용자의 웹 브라우저 로컬 자바스크립트 메모리 내에서만 처리되므로 민감한 비즈니스 로직 HTML이나 토큰이 포함된 데이터도 안심하고 변환하실 수 있습니다.
Q.10진수(Decimal)와 16진수(Hexadecimal) 엔티티의 차이점은 무엇인가요?
두 방식 모두 유니코드 코드포인트 번호를 기반으로 문자를 표현합니다. 10진수는 &# 뒤에 10진수 숫자(<)를 쓰고, 16진수는 &#x 뒤에 16진수 코드(<)를 씁니다. 브라우저 렌더링 결과는 완전히 동일하지만, CSS의 content: "\3C" 속성이나 유니코드 표기법(U+003C)과 연계할 때는 16진수 형식이 더 직관적입니다.