🔒 HTML Encoder/Decoder

🔤 HTML 엔티티 (HTML Entities)

HTML 인코딩은 HTML에서 특별한 의미를 가진 문자나 표시할 수 없는 문자를 HTML 엔티티(Entity)로 변환하는 과정입니다. <, >, & 같은 문자는 HTML 태그로 해석될 수 있으므로, 일반 텍스트로 표시하려면 &lt;, &gt;, &amp; 같은 엔티티로 변환해야 합니다. 이는 XSS 공격 방지와 올바른 HTML 렌더링에 필수적입니다.

원본: <div>Hello & "World"</div>
HTML: &lt;div&gt;Hello &amp; &quot;World&quot;&lt;/div&gt;

💡 HTML 인코딩 사용 사례

• XSS 방지: 사용자 입력을 안전하게 표시하여 크로스 사이트 스크립팅 공격 차단
• 코드 예제 표시: 블로그나 문서에서 HTML/XML 코드를 그대로 보여주기
• 특수문자 처리: <, >, &, 따옴표 등을 텍스트로 표시
• 데이터 저장: 데이터베이스에 HTML이 포함된 텍스트 안전하게 저장
• 이메일 본문: HTML 이메일에서 특수문자 올바르게 표시
• JSON 응답: API 응답에서 HTML 태그를 문자열로 전송

🔧 사용 방법

1. 인코딩 (Encode): HTML 태그나 특수문자를 엔티티로 자동 변환
2. 디코딩 (Decode): &lt; 같은 엔티티를 원본 문자로 복원
3. 양방향 변환: 실시간으로 입력 즉시 변환 결과 표시
4. 복사: 변환된 결과를 클릭하여 클립보드에 복사
5. 대량 변환: 여러 줄의 HTML 코드도 한 번에 변환

🔡 주요 HTML 엔티티

🛡️ XSS 공격과 HTML 인코딩

// 사용자 입력: <script>alert('XSS')</script>
document.getElementById('output').innerHTML = userInput;
// 결과: 스크립트가 실행됨! 😱

// 사용자 입력을 HTML 인코딩
const encoded = escapeHtml(userInput);
document.getElementById('output').innerHTML = encoded;
// 결과: <script>alert('XSS')</script>
// 스크립트가 텍스트로 표시됨! ✅

💻 프로그래밍 언어별 사용 예시

// HTML 인코딩 함수
function escapeHtml(text) {
  const map = {
    '&': '&',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#39;'
  };
  return text.replace(/[&<>"']/g, m => map[m]);
}

// HTML 디코딩 함수
function unescapeHtml(text) {
  const textarea = document.createElement('textarea');
  textarea.innerHTML = text;
  return textarea.value;
}

// 사용 예시
const encoded = escapeHtml("<div>Hello</div>");
// "&lt;div&gt;Hello&lt;/div&gt;"

import html

# HTML 인코딩
encoded = html.escape("<div>Hello & 'World'</div>")
# "&lt;div&gt;Hello &amp; &#x27;World&#x27;&lt;/div&gt;"

# HTML 디코딩
decoded = html.unescape(encoded)
# "<div>Hello & 'World'</div>"

# 따옴표 포함 인코딩
encoded_quote = html.escape("Text with 'quotes'", quote=True)
# "Text with &#x27;quotes&#x27;"

<?php
// HTML 인코딩
$encoded = htmlspecialchars("<div>Hello & 'World'</div>", ENT_QUOTES, 'UTF-8');
// "&lt;div&gt;Hello &amp; &#039;World&#039;&lt;/div&gt;"

// HTML 디코딩
$decoded = htmlspecialchars_decode($encoded);
// "<div>Hello & 'World'</div>"

// 전체 엔티티 인코딩
$full = htmlentities("<div>€100</div>", ENT_QUOTES, 'UTF-8');
// "&lt;div&gt;&euro;100&lt;/div&gt;"
?>

❓ 자주 묻는 질문 (FAQ)