인코딩 · 2026년 7월 4일 · 읽는 시간 4분
HTML 엔티티 & <, 일일이 외우다가 포기함
사용자 입력 텍스트를 HTML에 삽입해야 하는데, XSS 방지를 위해 엔티티 인코딩이 필요하다.
HTML 엔티티가 필요한 상황
웹 개발하다 보면 여러 곳에서 만난다:
- 사용자 입력 → HTML 출력 → XSS 방지 필수
- HTML 안에서 <, >, & 문자를 텍스트로 표시
- 이메일 HTML 템플릿 → 엔티티 안 쓰면 깨질 수 있음
- XML/RSS 피드 → 특수문자 반드시 이스케이프
- 마크다운에서 HTML 직접 삽입할 때
- 서버사이드 렌더링 → 동적 HTML 생성 시
특히 XSS(Cross-Site Scripting) 방지가 핵심이다. <script> 같은 태그를 그대로 HTML에 넣으면 악용될 수 있다.
필수 HTML 엔티티 5가지
이 5개는 반드시 알아야 한다:
- & → & (앰퍼샌드)
- < → < (보다 작음, 태그 열기)
- > → > (보다 큼, 태그 닫기)
- " → " (큰따옴표, 속성값에서 사용)
- ' → ' (작은따옴표, HTML5에서 표준)
특히 & 부터 이스케이프해야 한다. < 에서 & 를 & 로 먼저 바꾸지 않으면 이중 이스케이프 문제가 생긴다.
그 외 자주 쓰는 엔티티
- → 줄바꿈 안 하는 공백 (non-breaking space)
- © → © (저작권 기호)
- ® → ® (등록 상표)
- ™ → ™ (상표)
- — → — (em dash, 긴 줄표)
- – → – (en dash, 짧은 줄표)
- … → … (말줄임표)
-   → 숫자 코드로도 표현 가능
그래서 만들었음
텍스트 붙여넣으면 HTML 엔티티로 변환해준다:
- 인코딩 → 텍스트 → HTML 엔티티 (XSS 방지용)
- 디코딩 → HTML 엔티티 → 원본 텍스트
- 필수만 인코딩 → <, >, &, ", ' 만
- 전체 인코딩 → ASCII 범위 외 모든 문자를 엔티티로
확인 기능:
- 변환된 엔티티 목록 표시
- 결과 미리보기 → HTML로 렌더링하면 어떻게 보이는지
- 복사 버튼
XSS 공격이 뭔데
간단히 설명하면:
- 악의적인 사용자가 입력창에 <script>악성코드</script> 입력
- 서버가 이걸 그대로 HTML에 넣어서 다른 사용자에게 보냄
- 다른 사용자 브라우저에서 악성 스크립트가 실행됨
- 쿠키/세션 탈취, 개인정보 유출 가능
방지 방법:
- 사용자 입력을 HTML에 넣을 때 반드시 엔티티 인코딩
- <script> → <script> 로 변환 → 브라우저가 태그로 해석 안 함
- 프론트엔드: innerHTML 대신 textContent 사용
- CSP(Content Security Policy) 헤더 설정
실제로 써보니
좋은 점:
- 인코딩/디코딩 양방향 지원
- 필수 5개만 또는 전체 인코딩 선택 가능
- 렌더링 미리보기 → 결과 확인 쉬움
한계:
- 실제 보안 라이브러리(DOMPurify 등) 대체는 안 됨 → 개발 시 참고용
- 복잡한 중첩 HTML 구조는 수동 확인 필요
사용법
- 텍스트 또는 HTML 엔티티 붙여넣기
- 인코딩/디코딩 선택
- 결과 복사
- 끝
3초면 된다.
써보기
회원가입 없이 바로 쓸 수 있다.
#HTML엔티티 #HTML인코딩 #XSS방지 #HTML특수문자 #웹개발도구 #인코딩도구