HTML 인코더 / 디코더

텍스트를 HTML 엔티티로 인코딩하거나 HTML 엔티티를 다시 텍스트로 디코딩합니다.

입력 텍스트

HTML 인코더 / 디코더 사용 방법

1
텍스트 또는 HTML 입력
이스케이프할 일반 텍스트나, 되돌리려는 HTML 엔티티를 입력란에 붙여넣으세요.
2
인코딩 또는 디코딩 선택
< > & 같은 문자를 안전한 엔티티로 변환하려면 Encode to HTML Entities를, 엔티티를 읽을 수 있는 문자로 되돌리려면 Decode HTML Entities를 클릭하세요.
3
출력 검토
출력란에서 변환 결과를 확인하고, 필요하면 Swap Input/Output을 사용해 역방향 변환을 이어서 하세요.

4
결과 복사
Copy Output을 눌러 인코딩 또는 디코딩된 텍스트를 가져오거나, Clear Both로 입력란을 초기화하세요.

HTML 인코딩: 특수 문자를 안전하게 이스케이프하기

HTML 인코딩이란 무엇인가요

HTML 인코딩(HTML 이스케이프라고도 합니다)은 HTML에서 특별한 의미를 가진 문자를 문자 참조로 바꿔, 브라우저가 그것을 마크업으로 해석하지 않고 리터럴 텍스트로 표시하게 합니다. 브라우저는 원시 < 를 태그의 시작으로 읽으므로, 실제 작다 기호를 페이지에 보이려면 대신 참조 < 를 적어야 합니다. 인코딩은 여러분이 보여 주고 싶은 것과 브라우저가 그러지 않으면 실행해 버릴 것 사이의 안전한 번역입니다.

일상적인 HTML에서 정말로 이스케이프가 필요한 문자는 한 줌뿐이지만, 그것을 제대로 처리하는지가 올바르게 렌더링되는 페이지와 깨지거나 취약해지는 페이지를 가르는 차이입니다. 참조에는 두 가지 형태가 있습니다. < 같은 이름 있는 엔티티와, < 또는 < 같은 숫자 참조이며, 이들 모두 같은 눈에 보이는 문자를 만들어 냅니다.

핵심 문자와 그 엔티티들

다섯 개의 문자가 거의 모든 이스케이프 필요를 아우릅니다. 앰퍼샌드 & 는 & 가 되며, 모든 엔티티를 시작하는 문자이므로 어떤 수동 변환에서도 가장 먼저 와야 합니다. 작다 기호 < 는 < 가 되고 크다 기호 > 는 > 가 되는데, 이들이 태그를 구분하기 때문입니다. 큰따옴표 " 는 " 가 되고 작은따옴표 또는 아포스트로피 ' 는 ' (또는 HTML5의 이름 있는 ')가 되며, 이들은 속성 값 안에서 중요합니다.

앰퍼샌드 우선 규칙은 미묘한 버그를 막아 줍니다. 만약 < 를 < 로 바꾼 다음에야 앰퍼샌드를 이스케이프하면, 방금 적은 < 가 &lt; 로 바뀌어 페이지에 리터럴 텍스트 "<"가 보이게 됩니다. 언제나 다른 것들보다 & 를 먼저 인코딩하세요. 이 도구는 변환을 자동으로 올바른 순서로 적용하므로, 여러분이 그 함정에 빠지는 일은 결코 없습니다.

직접 해 보는 예시: 코드 조각 표시하기

어떤 페이지가 링크를 렌더링하는 대신 텍스트 <a href="x">Tom & Jerry</a> 를 글자 그대로 보여 주길 원한다고 합시다. 각 특수 문자는 그 참조로 바뀝니다. 여는 꺾쇠는 < 가 되고, 닫는 꺾쇠는 > 가 되며, 속성을 둘러싼 큰따옴표는 " 가 되고, 이름 사이의 앰퍼샌드는 & 가 됩니다.

인코딩된 결과는 <a href="x">Tom & Jerry</a> 입니다. HTML 파일에 붙여넣으면 브라우저는 작동하는 앵커 요소로 바꾸는 대신, 튜토리얼이나 문서 페이지가 예시 마크업을 보여 주는 바로 그 방식대로 원래의 소스 코드를 화면에 눈에 보이게 출력합니다.

인코딩이 XSS를 막는 이유

교차 사이트 스크립팅(XSS)은 공격자가 댓글, 사용자 이름, 검색어처럼 나중에 다른 사용자에게 표시되는 입력란을 통해 HTML이나 JavaScript를 페이지에 주입하는 공격입니다. 사이트가 그 신뢰할 수 없는 텍스트를 이스케이프하지 않고 페이지에 넣으면, script 태그 같은 페이로드가 사이트의 권한으로 피해자의 브라우저에서 실행되어 세션 탈취나 그보다 더한 일이 가능해집니다.

인코딩은 그 공격을 뿌리에서 무력화합니다. 위험한 문자가 이스케이프되면, 주입된 <script>alert(1)</script> 는 실행 가능한 요소가 아니라 무해하게 눈에 보이는 텍스트, 즉 <script>alert(1)</script> 로 저장되고 렌더링됩니다. 이 부류의 취약점에 맞서는 가장 믿을 만한 단 하나의 방어책은, 신뢰할 수 없는 데이터 한 조각 한 조각을 그것이 페이지에 적히는 바로 그 지점에서 HTML 인코딩하는 것입니다.

요소 내용 대 속성 맥락

데이터를 어디에 두느냐에 따라 어떤 문자가 위험한지가 달라지므로, 모든 자리에 단 하나의 이스케이프 규칙으로는 충분하지 않습니다. 여는 태그와 닫는 태그 사이의 텍스트인 요소 내용 안에서 결정적인 문자는 <, >, & 입니다. 속성 값 안에서는 속성을 구분하는 따옴표 문자가 바로 공격자가 그 값을 탈출하게 해 주는 것이므로, 거기서는 앰퍼샌드에 더해 " 와 ' 도 인코딩해야 합니다.

가장 견고한 습관은 언제나 속성을 따옴표로 감싸고, 짝이 되는 따옴표 문자를 < > & 와 함께 인코딩하는 것입니다. 따옴표 없는 속성은 훨씬 더 안전하게 만들기 어려운데, 그 경우 공백과 다른 많은 문자가 값을 탈출할 수 있기 때문입니다. 또한 script 블록 안, style 블록 안, URL 속성 안처럼 HTML 이스케이프만으로는 충분하지 않아 그 맥락에 특화된 인코딩이 대신 필요한, 완전히 별개인 맥락들도 있습니다.

인코딩 대 디코딩, 그리고 각각을 언제 할지

인코딩은 출력을 생성할 때 꺼내 드는 방향입니다. 원시 텍스트를 가져와 Encode 동작으로 안전한 마크업을 만들어 냅니다. 디코딩은 그 반대로, Decode 동작으로 엔티티를 다시 리터럴 문자로 바꾸며, 데이터베이스나 이메일, 다른 도구에서 복사해 온 이스케이프된 소스를 가지고 있고 그 밑에 깔린 텍스트를 읽거나 편집하고 싶을 때 유용합니다.

실용적인 작업 흐름은 Swap 버튼과 함께 둘을 모두 씁니다. 저장된 조각을 평문 문자로 디코딩하고, 편집한 뒤, 편집한 버전을 안전한 표시를 위해 다시 인코딩하는 것을 전부 다시 입력하지 않고 할 수 있습니다. 다만 시점에 관한 황금률만 기억하세요. 입력하는 순간이 아니라 출력하는 순간에 인코딩하세요. 너무 일찍 이스케이프하면 저장소에서 원시 상태로 남아 있어야 할 데이터가 손상될 수 있기 때문입니다.

피해야 할 흔한 실수

고전적인 오류는 이중 인코딩입니다. 이미 이스케이프된 텍스트를 인코더에 다시 통과시키는 것으로, 이는 & 를 &amp; 로 바꿔 사용자에게 리터럴 "&"를 보여 줍니다. 정확히 한 번만, 그리고 오직 출력 경계에서만 인코딩하세요. 그와 가까운 사촌은 데이터를 데이터베이스로 들어가는 길에 한 번, 나오는 길에 또 한 번 이스케이프해서 똑같이 뒤죽박죽인 결과를 만들어 내는 것입니다.

또 다른 빈번한 실수는 HTML 이스케이프가 모든 맥락을 보호한다고 넘겨짚는 것입니다. 그렇지 않습니다. HTML 이스케이프는 JavaScript 문자열 안, CSS 값 안, 또는 javascript: 로 시작하는 href 안에 놓인 데이터를 보호하지 못합니다. 그것들에는 저마다의 인코딩 규칙이 필요합니다. 끝으로, 앰퍼샌드나 속성 따옴표를 빠뜨리는 어설픈 부분 이스케이퍼를 직접 만들지 마세요. 그 빈틈이 바로 버그와 XSS가 새어 드는 곳입니다. 완전하고 올바른 순서를 따르는 인코더가 그 일을 하게 두세요.

자주 묻는 질문

어떤 문자가 HTML 엔티티로 인코딩되나요?

< (<), > (>), & (&), 따옴표 같은 예약 문자와 특수문자가 명명된 또는 숫자 HTML 엔티티로 바뀝니다. 덕분에 브라우저가 마크업으로 해석하지 않고 해당 문자를 페이지에 그대로 표시할 수 있습니다.

인코딩이 XSS 방지에 어떻게 도움이 되나요?

< 와 > 같은 문자를 엔티티로 변환하면 사용자가 입력한 마크업이나 스크립트 태그가 실행되지 않고 보이는 텍스트로 렌더링됩니다. 신뢰할 수 없는 입력을 페이지에 삽입하기 전에 인코딩하는 것은 크로스 사이트 스크립팅(XSS)에 대한 핵심 방어책입니다.

엔티티를 다시 일반 텍스트로 변환할 수 있나요?

네. Decode HTML Entities 버튼이 과정을 역으로 수행해 & 나 ' 같은 엔티티를 원래의 & 와 ' 문자로 되돌리므로, 원본 텍스트를 읽거나 재사용할 수 있습니다.

Swap 버튼은 무엇을 위한 것인가요?

Swap Input/Output은 현재 결과를 입력란으로 옮겨 줍니다. 예를 들어 조각을 디코딩한 뒤 편집한 버전을 다시 입력하지 않고 재인코딩하는 등 내용을 왕복 처리할 때 편리합니다.

내 입력이 서버로 전송되나요?

아니요. 인코딩과 디코딩이 브라우저 안에서 전부 이루어지므로 텍스트와 민감한 HTML이 기기를 벗어나지 않습니다. 이 도구는 무료이고 가입이 필요 없습니다.