moim.bio

HTML 이스케이프

< > & " 를 HTML 엔티티로 바꿔 태그로 해석되지 않게 만듭니다. 코드를 글에 넣을 때 씁니다.

언제 필요한가

사용자가 입력한 값이나 코드 예제를 HTML 안에 넣을 때 씁니다. 이스케이프하지 않으면 <script>가 진짜 스크립트로 실행되고(XSS), <div>는 화면에서 사라집니다.

블로그 글에 코드를 넣을 때도 같은 문제입니다. <&lt;로 바꾸어야 브라우저가 태그가 아니라 글자로 그립니다.

다섯 글자만 알면 됩니다

글자엔티티안 바꾸면
&&amp;뒤 글자와 붙어 다른 엔티티로 해석됨
<&lt;태그 시작으로 해석됨
>&gt;태그 끝으로 해석됨
"&quot;속성값이 거기서 끊김
'&#39;홑따옴표 속성값이 끊김

&가장 먼저 바꿔야 한다는 게 직접 구현할 때의 함정입니다. 나중에 바꾸면 앞서 만든 &lt;&amp;lt;로 이중 이스케이프됩니다.

따옴표 옵션

본문 텍스트에만 넣는다면 따옴표는 안 바꿔도 됩니다. 하지만 <input value="여기">처럼 속성값에 들어간다면 반드시 켜세요. 따옴표 하나로 속성이 끊기고 그 뒤에 onerror= 같은 걸 붙일 수 있게 됩니다. 기본값을 켜짐으로 둔 이유입니다.

숫자 참조 옵션

한글과 이모지를 &#44032; 같은 숫자 참조로 바꿉니다. 문서에 <meta charset="utf-8">이 있다면 필요 없습니다. 인코딩을 못 믿는 오래된 메일 템플릿이나 레거시 시스템에 넣을 때만 켜세요 — 용량이 크게 늘고 사람이 읽을 수 없게 됩니다.

이스케이프만 하면 XSS가 막히나요?

본문 텍스트 자리에서는 대체로 그렇습니다. 하지만 href="javascript:…", <script> 안, style 속성 안에서는 규칙이 다릅니다. 넣는 자리마다 필요한 처리가 달라서, 실제 서비스라면 프레임워크의 자동 이스케이프에 맡기는 편이 안전합니다.

다른 도구 33개