JavaScript에서 HTML 특수 문자를 이스케이프하는 방법

HTML 특수 문자를 이스케이프해야 하는 이유

사용자 입력이나 외부 데이터를 웹 페이지에 그대로 출력하면 <, >, & 같은 특수 문자 때문에 HTML 구조가 깨질 수 있고, 심한 경우 XSS(교차 사이트 스크립팅) 공격에 노출될 위험도 있습니다. 따라서 브라우저에 출력하기 전에 반드시 특수 문자를 HTML 엔터티 형태로 변환하는 '이스케이프' 처리를 해야 합니다.

replace() 메서드로 이스케이프하기

JavaScript에서는 문자열의 replace() 메서드와 정규 표현식을 조합하면 간단하게 처리할 수 있습니다. 기본적인 변환 대상 특수 문자는 다음 세 가지입니다.

&(앰퍼샌드) → &
<(보다 작음) → <
>(보다 큼) → >

다음 코드 스니펫을 확인해 보세요.

function escapeHtml(unsafe) {
  return unsafe
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;');
}

console.log(escapeHtml('<b>Hello</b>'));
// 결과: &lt;b&gt;Hello&lt;/b&gt;

주의할 점

&는 반드시 가장 먼저 치환해야 합니다. 순서가 바뀌면 이미 생성된 엔터티의 앰퍼샌드까지 한 번 더 치환되어 &amp;처럼 잘못된 결과가 나오기 때문입니다.

또한 HTML 속성값 안에 문자열을 삽입하는 경우에는 큰따옴표와 작은따옴표도 함께 이스케이프하는 것이 안전합니다.

function escapeHtmlAll(unsafe) {
  return unsafe
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#039;');
}

이렇게 처리하면 어떤 문자열이라도 HTML 문맥에서 안전하게 출력할 수 있습니다.