<aside> 🥕

XSS(Cross-Site Scripting) 방어의 한 방법

</aside>

외부 입력(예: API 데이터, 사용자 입력 등)을 HTML에 출력할 때, 특수문자(<, >, &, ", ')를 안전한 HTML 엔티티로 변환하는 보안 기법입니다. 이 처리를 하지 않으면 악의적인 사용자가 <script> 등으로 XSS(크로스사이트 스크립팅) 공격을 할 수 있습니다.

API, DB 등에서 받아온 데이터에 악성 코드가 포함될 수 있습니다. 이때 escape 없이 HTML에 바로 출력하면, 브라우저가 코드를 실행하여 사이트가 해킹당할 수도 있습니다. React의 JSX의 경우 기본적으로는 escape 처리르 해주지만 dangerouslySetInnerHTML, 문자열 템플릿 등 직접 HTML을 만들 때는 반드시 escape가 필요합니다.

예시 코드 (TypeScript / React)

// HTML 이스케이프 함수
function escapeHtml(str: string): string {
  return str.replace(/[&<>"']/g, (c) => ({
    '&': '&amp;',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#39;',
  }[c] || c));
}

// 사용 예시
const unsafe = '<script>alert(1)</script>';
const safe = escapeHtml(unsafe); // &lt;script&gt;alert(1)&lt;/script&gt;

적용 시점

데이터를 저장하는 시점이 아니라, HTML로 출력하는 시점에 escape 처리를 해야합니다. 그래야 데이터 원본성을 유지하면서 보안도 지킬 수 있습니다.