HTMLENTITY

HTML 엔티티 변환

HTML 엔티티를 즉시 인코딩하거나 디코딩합니다.

INPUT (Plain Text)

0 chars

OUTPUT (Encoded Entities)

0 chars

도구 설명 및 사용 방법

웹 브라우저의 HTML 인터프리터 오작동을 방지하기 위해 특수 부호 문자들을 안전한 HTML 기호 명칭(Entity) 형태로 상호 치환 처리해 줍니다. XSS 방지 및 사용자 생성 콘텐츠 표시 시 필수입니다.

사용 단계

인코딩(특수문자 -> HTML 엔티티) 또는 디코딩(HTML 엔티티 -> 일반 텍스트) 중 수행 방향을 고릅니다.

가공할 원문 텍스트를 기입합니다.

실시간으로 특수문자(< -> < 등)가 안전하게 문자참조 포맷으로 치환되어 나옵니다.

복사 버튼을 눌러 HTML 마크업 코드 소스에 안전하게 적용합니다.

작동 원리 및 상세 설명

HTML Entity Converter는 HTML 5 명세와 WHATWG HTML Living Standard에 정의된 문자 참조(Character References)를 구현합니다. < > & " ' 등의 문자는 HTML 파서가 태그나 속성 구분자로 해석할 수 있으므로, 텍스트 노드나 속성 값으로 안전하게 출력하려면 < > & " ' 등으로 변환해야 합니다. 인코딩은 특수 문자를 미리 정의된 이름 엔티티 또는 숫자 엔티티(십진/16진)로 치환하고, 디코딩은 반대로 엔티티를 원래 문자로 복원합니다. 브라우저는 자동으로 많은 엔티티를 해석하지만, 소스 코드나 JSON 안에 raw HTML을 저장할 때는 명시적 변환이 필요합니다. 모든 변환이 브라우저 내에서 로컬로 수행되므로, 민감한 사용자 입력이나 로그 데이터를 안심하고 처리할 수 있습니다. 실제로는 DOMPurify 같은 라이브러리와 함께 사용하여 더 강력한 sanitization을 적용하는 것을 권장합니다.

자주 묻는 질문 (FAQ)

HTML 엔티티 인코딩이 XSS를 완전히 막아주나요?

사용자 입력을 HTML로 렌더링할 때 < > & " ' 등을 엔티티로 변환하면 태그 주입을 상당 부분 막을 수 있습니다. 그러나 완전한 방어를 위해서는 콘텐츠 보안 정책(CSP), 서버 측 이스케이프(예: OWASP Java Encoder, DOMPurify), 그리고 적절한 컨텍스트별 이스케이핑(HTML, JS, CSS, URL)을 함께 사용해야 합니다.

이름이 있는 엔티티(<)와 숫자 엔티티(<, <)의 차이는?

이름 엔티티(<, &)는 가독성이 좋고 널리 지원됩니다. 숫자 엔티티(십진수 < 또는 16진수 <)는 모든 유니코드 문자를 표현할 수 있어 더 유연합니다. 대부분의 경우 이름 엔티티를 우선 사용하고, 특수한 문자는 숫자 엔티티를 사용합니다.

코드 사용 예시

사용자 댓글 안전 렌더링 (React 예시)

javascript

// React에서 사용자 입력을 안전하게 표시
const userComment = '<script>alert(1)</script> & "quotes"';
const safeHtml = userComment
  .replace(/&/g, '&amp;')
  .replace(/</g, '&lt;')
  .replace(/>/g, '&gt;')
  .replace(/"/g, '&quot;')
  .replace(/'/g, '&#39;');

// 또는 DOMPurify + html-react-parser 조합 권장
// <div dangerouslySetInnerHTML={{ __html: sanitized }} />

클라이언트에서 받은 사용자 생성 콘텐츠를 HTML로 출력할 때 필수적인 이스케이프 패턴. 도구로 미리 확인 후 코드에 적용하세요.