HTML 엔티티 인코더
HTML 엔티티를 인코딩하거나 디코딩합니다
HTML 엔티티 인코더는 HTML 문서에서 특수한 의미를 가진 문자(<, >, &, " 등)를 엔티티 코드(<, >, & 등)로 변환하거나 복원하는 도구입니다. 웹 페이지에 코드 조각을 표시하거나, 사용자 입력을 안전하게 출력하여 XSS(크로스 사이트 스크립팅) 공격을 방지하는 데 필수적입니다. 모든 HTML 엔티티(이름 엔티티, 숫자 엔티티)를 지원합니다.
📖 사용법
- 인코딩할 HTML 또는 텍스트를 입력하세요
- 인코딩 버튼으로 특수문자를 엔티티로 변환하세요
- 디코딩 버튼으로 엔티티를 원래 문자로 복원하세요
✨ 주요 기능
- ✓HTML 특수문자 인코딩
- ✓&, <, >, " 등 변환
- ✓XSS 방지용 이스케이프
- ✓엔티티 디코딩
- ✓실시간 변환
💡 활용 사례
- •웹 개발자: 블로그나 문서 사이트에 HTML/JavaScript 코드 예제를 표시할 때 태그가 실행되지 않도록 인코딩합니다.
- •보안 엔지니어: 사용자 입력값을 출력할 때 XSS 공격을 방지하기 위해 HTML 엔티티로 이스케이프합니다.
- •콘텐츠 편집자: CMS에서 특수문자(©, ™, ® 등)를 HTML 엔티티로 변환하여 모든 브라우저에서 정상 표시되게 합니다.
- •이메일 마케터: HTML 이메일 템플릿에서 특수문자가 깨지지 않도록 엔티티로 변환합니다.
- •기술 문서 작성자: API 문서에 XML/HTML 코드를 안전하게 삽입하기 위해 꺾쇠 괄호를 인코딩합니다.
🎯 활용 팁
- ▸코드 블록을 웹에 표시할 때는 반드시 <와 >를 인코딩하세요. 인코딩하지 않으면 브라우저가 태그로 해석합니다.
- ▸&를 먼저 인코딩해야 합니다. <를 인코딩하면 &lt;가 되어 이중 인코딩이 발생할 수 있습니다.
- ▸디코딩 시 &가 &로 바뀌는지 확인하세요. 이중 인코딩 여부를 판별하는 기준이 됩니다.
- ▸프레임워크의 자동 이스케이프 기능(React의 JSX, Vue의 {{ }})이 있더라도 dangerouslySetInnerHTML 사용 시에는 직접 인코딩해야 합니다.
❓ 자주 묻는 질문
Q. HTML 인코딩이 왜 필요한가요?
A. HTML에서 <, > 같은 특수문자를 그대로 표시하려면 엔티티로 변환해야 합니다. 보안(XSS 방지)에도 중요합니다.
Q. 도 변환되나요?
A. 네, 공백을 포함한 모든 HTML 엔티티를 지원합니다.
Q. XSS 공격이란 무엇인가요?
A. 크로스 사이트 스크립팅(XSS)은 악의적인 스크립트를 웹 페이지에 삽입하는 공격입니다. 사용자 입력을 HTML 인코딩 없이 출력하면 <script> 태그가 실행되어 쿠키 탈취, 세션 하이재킹 등이 발생할 수 있습니다.
Q. 이름 엔티티와 숫자 엔티티의 차이는?
A. 이름 엔티티는 <, & 같이 이름으로 표현하고, 숫자 엔티티는 <, & 같이 유니코드 코드포인트로 표현합니다. 기능은 동일하지만 이름 엔티티가 가독성이 좋습니다.
Q. 모든 특수문자를 인코딩해야 하나요?
A. HTML에서 반드시 인코딩해야 하는 문자는 <, >, &, ", ' 다섯 가지입니다. 그 외 특수문자(©, € 등)는 선택적으로 인코딩하며, UTF-8 문서에서는 대부분 직접 사용해도 됩니다.
Q. React/Vue 같은 프레임워크에서도 인코딩이 필요한가요?
A. 대부분의 모던 프레임워크는 텍스트를 자동으로 이스케이프합니다. 하지만 v-html, dangerouslySetInnerHTML 등으로 HTML을 직접 삽입하는 경우에는 수동 인코딩이 필수입니다.
🔗 관련 도구
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.