data_object HTML 엔티티 인코더 / 디코더 star

작동 방식

HTML은 자체 문법을 위해 몇 가지 문자를 예약해 둡니다. <와 >는 태그를 표시하고, &는 엔티티 참조를 시작합니다. 페이지에 삽입되는 콘텐츠 — 댓글, 사용자 이름, 다시 표시되는 검색어 등 — 안에 이 문자들이 그대로 나타나면 브라우저는 이를 텍스트로 표시하는 대신 마크업으로 해석하려 합니다. 인코딩은 이런 문자를 엔티티 형태(<, >, &)로 변환하여 해석되지 않고 글자 그대로 렌더링되게 합니다. 디코딩은 그 반대로, &나 ’ 같은 엔티티를 실제로 나타내는 문자로 되돌립니다.

이는 단순한 표시상의 문제가 아니라 보안 통제입니다. 댓글 입력창이 사용자 입력을 받아 인코딩하지 않고 페이지 HTML에 그대로 삽입하면, 방문자가 <script>...</script>를 입력해 그 스크립트가 다른 모든 방문자의 브라우저에서 실제로 실행되게 만들 수 있습니다. 이런 취약점 유형을 크로스 사이트 스크립팅(XSS)이라고 하며, 신뢰할 수 없는 출력을 HTML에 넣기 전에 인코딩하는 것이 이에 대한 표준 방어책입니다. 예를 들어 5 < 10 & 10 > 5라는 텍스트를 인코딩하면 5 < 10 & 10 > 5가 되며, 이는 올바르게 표시되고 마크업으로 오인될 수 없습니다.

알아두어야 할 사항

• 이름 붙은 엔티티와 숫자 엔티티는 같은 문자를 다르게 표현합니다. '(이름형)와 '(숫자형)는 둘 다 작은따옴표를 의미하지만, 이름형 엔티티는 파서가 그 특정 이름을 인식해야만 동작합니다. 반면 숫자형 엔티티(10진수 또는 &#x 16진수)는 어디서나 지원되므로 기계 생성 출력에 더 안전합니다.
• 인코딩만으로는 충분하지 않습니다. 인코딩은 텍스트 콘텐츠를 보호할 뿐이며, 속성값·URL·인라인 자바스크립트 컨텍스트는 각각 별도의 이스케이프 규칙이 필요합니다. href="javascript:..." 안의 값이나 <script> 블록 안의 값은 일반 본문 텍스트와는 다른 규칙으로 파싱되기 때문입니다.
• 변환은 로컬에서 이루어집니다. 이 도구는 브라우저 자체의 DOM 파서를 사용하므로 아무것도 업로드되거나 기록되지 않습니다.
• 모든 서버 사이드 템플릿 언어가 기본적으로 자동 이스케이프를 하지는 않습니다. 오래된 PHP 출력 방식이나 단순 문자열 연결처럼 이스케이프 함수를 명시적으로 호출해야 하는 경우가 있으며, 이를 잊는 것이 실제 XSS 버그의 가장 흔한 원인 중 하나입니다.
• 일부 엔티티는 시각적으로 거의 구별되지 않습니다. 곧은 아포스트로피(')와 타이포그래피용 오른쪽 작은따옴표(’)는 화면에서는 거의 같아 보이지만 서로 다른 바이트 시퀀스이며, 코드 샘플이나 URL에서는 이 차이가 중요합니다.

구체적인 전후 비교: Nice post! 5 < 10, right?라는 댓글 내용은 일반 텍스트로서는 특별한 처리가 필요 없지만, 이스케이프 없이 HTML 템플릿에 삽입되는 순간 악의적인 방문자가 대신 <img src=x onerror=alert(1)>를 제출할 수 있습니다. 인코딩은 이를 실행되는 이미지 오류 핸들러가 아니라 무해하고 눈에 보이는 텍스트로 바꿔 줍니다.