HTML Entity Converter

웹 브라우저는 서버로부터 전달받은 문서를 파싱(Parsing)할 때, 특정 기호들을 단순한 글자가 아닌 문서의 구조를 결정하는 '예약어(Reserved Characters)'로 인식합니다. 대표적으로 < 기호는 새로운 태그의 시작을 의미합니다.

만약 "5 < 10"이라는 텍스트를 본문에 그대로 작성하면, 브라우저는 < 10 부분을 알 수 없는 태그로 오해하여 화면 렌더링을 깨뜨립니다. 이러한 충돌을 방지하기 위해 <를 <라는 일종의 우회 코드로 치환하는 것이 웹 표준이며, 이를 'HTML 엔티티(Entities)'라고 부릅니다. 본 변환기는 자바스크립트 정규식을 통해 로컬 환경에서 이스케이프(Escape) 처리를 즉각 수행합니다.

HTML 엔티티 변환은 현대 웹 보안의 가장 치명적인 취약점인 XSS(Cross-Site Scripting) 공격을 방어하는 최전선입니다. 공격자가 <script> 태그를 주입하더라도, 이를 <script>로 무력화하면 브라우저는 이를 실행 가능한 코드가 아닌 '단순 문자열'로 렌더링합니다.

※ 5대 핵심 예약 문자 치환 알고리즘 및 DOMParser 파싱

// 1. 핵심 5대 예약문자 보안 치환 (XSS 방어)
const escapeHtml = (rawHtml) => {
  const entityMap = {
    '&': '&', '<': '<', '>': '>',
    '"': '"', "'": ''', '/': '/'
  };
  return rawHtml.replace(/[&<>"'/]/g, (s) => entityMap[s]);
};

// 2. 브라우저 파서 엔진(DOMParser)을 활용한 완벽한 역치환
const unescapeHtml = (escapedHtml) => {
  const doc = new DOMParser().parseFromString(escapedHtml, 'text/html');
  return doc.documentElement.textContent;
};