무료 HTML 엔티티 인코더 — HTML 이스케이프

HTML 엔티티 인코딩이란?

// Server-side templates auto-escape, but when you build HTML by hand you must escape yourself.
// The five reserved characters and their safe entities:
//   <  →  &lt;     >  →  &gt;     &  →  &amp;     "  →  &quot;     '  →  &#x27;

// Node.js — escape untrusted input before inserting it into HTML element content.
function escapeHtml(str) {
  return str
    .replace(/&/g, '&amp;')   // & first, so later entities are not double-escaped
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#x27;'); // numeric form — safe in HTML4, HTML5 and XML
}

const userInput = `<a href="x">Tom & Jerry's</a>`;
const safe = escapeHtml(userInput);
// → &lt;a href=&quot;x&quot;&gt;Tom &amp; Jerry&#x27;s&lt;/a&gt;
document.getElementById('out').innerHTML = `<p>${safe}</p>`; // renders as literal text

// ---------------------------------------------------------------
// In practice, prefer the platform's built-in escaping where it exists:
//   - React / Vue / Angular escape interpolated text by default
//   - Use textContent instead of innerHTML when you only need text:
//       el.textContent = userInput;  // the browser escapes for you
//   - Server frameworks (Jinja, ERB, Blade) auto-escape unless you opt out

주요 기능

실전 예제

<a href="x">Tom & Jerry's</a>

<a href="x">Tom & Jerry's</a>

Visit our café — it's 😀

Visit our café — it's 😀

<>&"'

<>&"'

<>&"'

<>&"'

café

café  (named)  ·  café  (decimal)  ·  café  (hex)

HTML 엔티티 인코더 사용법

1. 1

   HTML 또는 텍스트 붙여넣기

   이스케이프할 마크업이나 일반 텍스트를 입력 상자에 넣으세요. 인코딩된 출력은 입력하는 대로 실시간 갱신됩니다. 제출 버튼도 없고 어디로도 전송되지 않습니다.

2. 2

   엔티티 형식 선택

   이름이 읽기 쉬운 기본값입니다(<, &, ©). 사용하는 시스템이 숫자 참조를 선호하거나 이름 엔티티 지원을 보장할 수 없으면 10진수(<)나 16진수(<)로 전환하세요.

3. 3

   필요하면 모든 비ASCII 인코딩

   최신 UTF-8 페이지에서는 이 옵션을 꺼서 악센트와 이모지가 읽기 쉬운 원시 문자로 남게 하세요. 텍스트가 레거시 단일 바이트 문자셋을 거쳐야 할 때만 켜세요. 그러면 0x7F를 초과하는 모든 문자가 ASCII 안전 엔티티로 변환됩니다.

4. 4

   인코딩된 결과 복사

   복사를 클릭하면 이스케이프된 문자열이 클립보드에 담겨 템플릿, 문서 페이지, 데이터베이스 필드에 붙여넣을 준비가 됩니다. 지우기는 다음 조각을 위해 양쪽 창을 초기화합니다.

5. 5

   역방향이 필요하면 방향 전환

   엔티티를 다시 해당 문자로 바꾸고 싶을 때 방향 전환으로 HTML 엔티티 디코더로 이동하세요.

흔한 HTML 인코딩 실수

replace < and > first, then &  →  &lt;  becomes  &amp;lt;

escape & first, then the rest  →  <  stays  <

It's here  →  may render as  It's here

It's here  →  renders as  It's here

&  encoded again  →  &  shows as  &

&  left as-is  →  renders as  &

href="/search?q=a&b c"  →  the space still breaks the URL

href="/search?q=a%26b%20c"  →  URL-encoded, valid

café on a UTF-8 page  →  needless, harder to read

café on a UTF-8 page  →  valid and clean

title="He said "hi""  →  attribute breaks out

title="He said "hi""  →  contained

누가 이 도구를 사용하나

웹 페이지에 코드 샘플 표시

글자 그대로의 HTML을 보여줘야 하는 튜토리얼이나 문서를 작성하시나요? 조각을 이스케이프해 <strong>bold</strong>가 렌더링되지 않고 텍스트로 나타나게 하세요. 마크업을 붙여넣고 이스케이프된 출력을 복사해 <pre>나 <code> 블록에 넣으세요.

XSS에 대비해 사용자 입력 정화

사용자가 제공한 문자열을 HTML에 삽입하기 전에 예약된 다섯 문자를 이스케이프해, <script>…</script> 같은 페이로드가 무력한 텍스트가 되게 하세요. 이것이 마크업을 직접 만들 때 교차 사이트 스크립팅에 대한 기초 방어입니다.

데이터베이스 필드나 JSON에 마크업 저장

HTML 조각을 다운스트림에서 해석되지 않는 일반 문자열로 저장해야 하나요? 먼저 인코딩해 꺾쇠괄호와 앰퍼샌드가 저장과 재표시를 온전히 견디게 한 다음, 꺼낼 때 디코딩하세요.

이메일 템플릿과 CMS 콘텐츠 작성

이메일 클라이언트와 콘텐츠 관리 시스템은 원시 특수문자에 까다롭습니다. 예약 집합을(필요하면 모든 비ASCII까지) 이스케이프해, 문자셋이 다를 수 있는 클라이언트에서도 템플릿이 일관되게 렌더링되게 하세요.

레거시 문자셋을 위한 텍스트 변환

원시 UTF-8을 다루지 못하는 시스템을 대상으로 하나요? "모든 비ASCII 인코딩"을 켜서 모든 악센트 문자, 기호, 이모지를 ASCII 안전 엔티티로 다시 써, 7비트 클린 파이프라인을 통과해도 텍스트가 보존되게 하세요.

XML 및 SVG 속성 값 이스케이프

XML과 인라인 SVG는 HTML의 예약 문자를 공유합니다. 따옴표와 꺾쇠괄호를 인코딩해, 마크업이 박힌 문자열이 문서 구조를 깨뜨리지 않고 속성 값에 안전하게 들어가게 하세요.

엔티티 빠르게 찾아보기

상표 기호가 ™인지 ™인지 잊으셨나요? 문자를 입력하고 출력에서 이름·10진수·16진수 엔티티를 읽거나, 페이지를 벗어나지 않고 내장 빠른 참조 표를 보세요.

인코더 작동 원리

특수문자 모드(기본)

기본적으로 HTML 예약 문자 다섯 개(& < > " ')만 안전한 출력을 위한 WHATWG HTML 직렬화 규칙에 따라 이스케이프됩니다. 다른 문자에 생성된 엔티티가 이중 이스케이프되지 않도록 &가 먼저 치환됩니다. 비ASCII를 포함한 나머지 모든 문자는 그대로 통과합니다.

아포스트로피는 ' 사용

HTML4에 정의되어 있지 않고 일부 레거시 파서에서 안전하지 않은 이름 엔티티 ' 대신, 작은따옴표는 U+0027을 가리키는 숫자 '(10진수 ')로 출력됩니다. 이는 he 같은 잘 검증된 라이브러리의 관례와 일치하며 HTML4, HTML5, XML 모두에서 출력이 안전하도록 보장합니다.

이름·10진수·16진수 인코딩

형식 선택기가 각 이스케이프된 문자의 작성 방식을 제어합니다. 이름은 정의된 라벨이 있는 곳에 사용하고(<, ©), 10진수는 유니코드 코드 포인트를 10진법으로(<), 16진수는 16진법으로(<) 씁니다. 숫자 형태는 이름 형태와 같은 코드 포인트를 가리키며 파싱되면 서로 바꿔 쓸 수 있습니다.

모든 비ASCII 인코딩 옵션

켜면 코드 포인트가 0x7F를 초과하는 모든 문자가 선택한 형식의 엔티티로 변환됩니다. café는 café(이름), café(10진수), café(16진수)가 됩니다. 이모지 같은 아스트랄 문자는 전체 코드 포인트로 인코딩됩니다(😀 → 😀). 이렇게 레거시 전송을 위한 7비트 클린 ASCII 출력이 생성됩니다.

문자셋과 엔티티의 차이

문자셋은 텍스트가 바이트로 저장되는 방식을 정의하고, 엔티티는 ASCII만으로 문자를 쓰는 방법입니다. UTF-8 페이지에서는 비ASCII 문자에 엔티티가 필요 없으므로 기본값이 이들을 원시 상태로 둡니다. 모든 것을 인코딩하는 것은 출력이 비유니코드 문자셋이나 UTF-8에 적대적인 시스템을 거쳐야 할 때만 필요합니다.

브라우저 로컬, 네트워크 제로

인코딩은 메인 스레드에서 자바스크립트로 동기 실행됩니다. API 호출도, 서버로의 워커 왕복도, 영속 저장도 없습니다. 입력은 페이지를 벗어나지 않으며, 입력하는 동안 비어 있는 네트워크 패널을 지켜보면 확인할 수 있습니다.

HTML 이스케이프 모범 사례

올바른 문맥에서, 출력 시점에 이스케이프

데이터를 받을 때가 아니라 HTML에 삽입하는 순간 인코딩하고, 인코딩을 문맥에 맞추세요. HTML 엔티티 인코딩은 HTML 요소·속성 콘텐츠용입니다. URL 안에서는 URL 인코딩을, 스크립트 블록 안에서는 자바스크립트/JSON 이스케이프를 쓰세요. 잘못된 문맥에서 이스케이프하면 구멍이 남습니다.

신뢰할 수 없는 입력은 항상 이스케이프

사용자, 업로드, 외부 API에서 비롯된 모든 문자열은 마크업에 들어가기 전에 이스케이프해야 합니다. 이것이 핵심 XSS 방어입니다. 꺾쇠괄호가 엔티티가 되면 <script>alert(1)</script> 같은 페이로드가 무력한 텍스트가 됩니다.

내장 이스케이프가 있으면 우선 사용

React, Vue, 대부분의 서버 템플릿 엔진은 보간된 텍스트를 자동으로 이스케이프하며, element.textContent를 설정하는 것도 이스케이프해 줍니다. 이 도구는 일회성 변환과 출력 이해에 쓰고, 애플리케이션 코드에서는 직접 만들기보다 프레임워크의 자동 이스케이프에 의존하세요.

UTF-8 페이지에서는 비ASCII를 원시 상태로

페이지가 <meta charset="utf-8">를 선언했다면 악센트와 이모지를 엔티티로 인코딩하지 마세요. 원시 UTF-8이 더 짧고 읽기 쉬우며 똑같이 올바릅니다. "모든 비ASCII 인코딩"은 실제로 필요한 진짜 레거시 문자셋 경우에만 남겨 두세요.

혼합 문맥에서는 숫자 아포스트로피 사용

출력이 오래된 파서, XML 프로세서, 이메일 클라이언트에 소비될 수 있다면 작은따옴표에 이름 '보다 숫자 '를 선호하세요. 숫자 형태는 어디서나 이해되지만 이름 형태는 그렇지 않으며, 렌더링된 텍스트에 글자 그대로 "'"가 남는 것은 흔하면서도 피할 수 있는 버그입니다.

자주 묻는 질문