HTML 엔티티 인코더/디코더이란?
HTML 엔티티 인코더/디코더는 <, >, & 및 따옴표와 같은 특수 문자를 HTML 엔티티 형태로 변환하거나 되돌립니다. 이를 통해 HTML에 사용자 콘텐츠를 삽입할 때 XSS 취약점을 방지하고 특수 문자의 표시 문제를 해결합니다.
인코더는 <, >, &, ", ' 같은 문자와 모든 유니코드 코드포인트를 이름 있는 엔티티(&, <), 10진 숫자 참조(&), 16진 숫자 참조(&)로 변환합니다. 범위 선택기로 예약된 5개 문자만, 모든 특수 문자, 또는 모든 비-ASCII 문자를 인코딩할 수 있습니다. 디코딩은 세 형식 모두를 되돌립니다. HTML 출력용으로 사용자 입력을 정제하거나 HTML 이메일 내보내기에서 텍스트를 복원할 때 유용합니다.
사용 방법
- 1단계 — 특수 문자나 HTML 엔티티가 포함된 텍스트를 붙여넣습니다.
- 2단계 — 문자를 엔티티로 변환하려면 인코딩을, 엔티티를 문자로 되돌리려면 디코딩을 선택합니다.
- 3단계 — 형식(이름·10진·16진)과 범위를 선택해 인코딩 강도를 조절하세요.
사용 시기
- CMS에 코드 예시를 붙여 넣을 때 <, > 가 태그로 처리되어 사라지는 것을 막을 때.
- HTML 메일이나 스크래핑 결과에 —, 가 남아 있는 글을 정리할 때.
- 서버 템플릿에 사용자 입력을 넣기 전에 이스케이프해 XSS를 막을 때.
결과
HTML 단락 안에 코드 스니펫 <div class="hero">를 표시해야 합니다. <div class="hero">로 인코딩하면 기기가 이를 마크업으로 해석하지 않고 텍스트로 렌더링합니다.
자주 묻는 질문
- 명명된 엔티티와 숫자 엔티티의 차이는 무엇인가요?
- 명명된 엔티티는 읽기 쉬운 단축형입니다(© 가 ©). 숫자 엔티티는 유니코드 코드포인트를 그대로 씁니다(© 또는 ©). 숫자 방식은 모든 유니코드를 다루지만, 명명된 방식은 HTML5에서 정의한 약 250자에 한정됩니다.
- 특수 문자를 전부 인코딩해야 하나요, 일부만 해도 되나요?
- HTML 본문에서는 & < > 와 속성값에 쓴 따옴표만 인코딩하면 됩니다. JavaScript 나 URL 컨텍스트에서는 규칙이 다릅니다. 범위 선택기는 세 가지를 제공합니다: 예약 문자만 — XSS에 결정적인 5개 문자, 모든 특수 — 예약 문자에 더해 타이포그래피까지, 모든 비-ASCII — 가장 폭넓은 적용 범위.
- 인코딩하면 복사·붙여넣기나 스크린리더에 문제가 생기나요?
- 그렇지 않습니다. 브라우저가 렌더링 전에 엔티티를 해석하므로 사용자에게는 원래 문자가 보이고 그대로 복사됩니다. 스크린리더 역시 해석된 문자열을 받습니다. 엔티티는 마크업 전송용 표기이지 최종 출력 형식이 아닙니다.
- HTML 엔티티 인코딩만으로 XSS를 막을 수 있나요?
- HTML 본문 텍스트라면 충분합니다. 속성 값은 따옴표로 감싸고 그 따옴표 자체도 인코딩해야 합니다. JavaScript, CSS, URL은 각각 별도의 이스케이프 규칙이 있어, 인코딩은 첫 번째 방어층일 뿐입니다.
- 왜 어떤 엔티티는 &#x 로 시작하고 어떤 것은 &# 로만 시작하나요?
- &#x 다음은 16진 코드포인트, &# 다음은 10진 코드포인트입니다. 둘 다 같은 문자를 가리켜 © 와 © 모두 © 가 됩니다. 16진 표기는 유니코드 표의 U+ 표기와 일치하며 높은 코드를 짧게 쓸 수 있습니다.