Cross-Site Scripting(XSS)과 escapeHTML 👮🏻‍♀️

웹 애플리케이션이 점점 더 복잡해지고 동적으로 변하면서, 이를 공격하는 방식 역시 다양해지고 있습니다. 그중에서도 Cross-Site Scripting(XSS) 공격은 가장 흔하면서도 위험한 보안 위협인데요, 이번 포스트에서는 XSS가 무엇인지, 어떻게 작동하는지, 그리고 이를 방지하기 위한 대표적인 기법인 escapeHTML 함수의 원리에 대해 살펴보고자 합니다.

XSS의 작동 원리

Cross-Site Scripting(XSS)는 공격자가 웹 페이지에 악의적인 스크립트를 삽입하여, 해당 스크립트가 다른 사용자에게 실행되도록 유도하는 공격 방식입니다. 브라우저가 사용자로부터 입력받은 데이터를 검증 없이 그대로 실행하는 상황을 이용하여, 기존 의도와 다른 HTML과 JavaScript 코드가 실행되게 만드는 거죠😈

일반적으로 사용자로부터 텍스트 입력을 받는 투두 리스트 같은 간단한 웹 애플리케이션에서도 XSS 공격의 위험은 존재합니다. 사용자가 HTML 형식의 문자열을 입력할 때, 이 입력이 제대로 검증되지 않으면 브라우저가 HTML 태그로 해석하여 페이지의 구조를 바꾸거나 스크립트를 실행할 수 있거든요😨

예를 들어, 사용자가 <h2>Buy Groceries</h2>라는 텍스트를 입력한다고 가정했을 때, 브라우저가 이를 텍스트가 아닌 HTML로 해석하여 투두 항목에 큰 제목을 추가할 수 있습니다. 이러한 구조 변화는 기능적으로는 큰 문제가 없을 수 있지만, 여전히 사용자가 의도한 대로 표시되지 않는 비정상적인 결과를 낳을 수 있습니다.

물론 이 역시 크나큰 오류긴 하지만, 정말 무서운 위험 요소는 사용자가 <script> 태그와 같은 악의적인 JavaScript 코드를 입력하는 것입니다. 단순히 웹 페이지의 구조가 바뀌는 것을 넘어서서 브라우저에서 JavaScript가 실행되게 함으로써 사용자 세션을 탈취하거나 악성 스크립트를 통해 시스템을 공격할 수 있는 것이죠.

<script>alert('XSS Attack');</script>

위와 같은 악의적인 코드가 투두 리스트에 입력된다고 가정하면, 브라우저는 이 코드를 실행하게 되고, 사용자는 알림 창을 통해 공격이 성공했다는 사실을 알게 되는거죠. 실제 공격에서는 사용자의 쿠키, 로그인 정보 등 민감한 데이터를 훔치거나, 사용자의 계정으로 원치 않는 작업을 수행할 수도 있습니다.

XSS의 주요 유형

XSS는 공통적으로 사용자 입력을 악용하여 악성 코드를 실행하지만, 어떤 취약점을 이용하느냐에 따라 유형이 나뉩니다.

1. Stored XSS (저장형 XSS)

저장형 XSS는 공격자가 서버에 악의적인 스크립트를 저장하고, 이를 다른 사용자에게 실행되게 하는 방식입니다. 보통은 게시글, 댓글, 프로필 정보 같은 사용자 입력 데이터를 저장하는 웹 애플리케이션에서 발생합니다. 사용자가 작성한 내용이 서버에 저장되고, 이후 다른 사용자가 해당 데이터를 요청할 때, 서버는 악성 스크립트를 그대로 반환하게 됩니다.

예를 들어, 사용자가 게시글에 <script>alert('XSS');</script>를 입력하면, 다른 사용자가 그 게시글을 볼 때 해당 스크립트가 실행됩니다.

2. Reflected XSS (반사형 XSS)

반사형 XSS는 사용자의 요청을 즉시 반영하여 발생하는 방식입니다. 사용자가 입력한 데이터가 서버에 저장되지 않고, 즉시 반사되어 웹 페이지에 표시됩니다. 일반적으로 URL 매개변수를 이용한 공격이 자주 발생합니다. 공격자가 악의적인 URL을 생성하고, 이를 클릭한 사용자의 브라우저에서 URL속의 스크립트가 실행됩니다.

예를 들어, URL에 http://example.com/search?q=<script>alert('XSS');</script>를 포함하면, 서버는 이 데이터를 그대로 웹 페이지에 반영하고, 사용자의 브라우저는 이를 실행하게 됩니다.

3. DOM-based XSS (DOM 기반 XSS)

DOM 기반 XSS는 서버 측에서 처리되지 않고 클라이언트 측에서 발생하는 방식으로, 브라우저의 DOM을 직접 조작하여 악성 스크립트를 실행하게 만듭니다. 보통 JavaScript에서 사용자 입력을 처리하는 과정에서 발생하는데, HTML 요소나 URL 파라미터 등을 JavaScript로 조작할 때 발생할 수 있습니다.

예를 들어, JavaScript 코드에서 document.location.search 값을 직접 HTML에 삽입할 때, 공격자는 악성 코드를 URL 파라미터에 포함시켜 실행할 수 있습니다.

이러한 XSS를 통해서 사용자의 세션 쿠키를 가로채어 사용자 계정에 무단으로 접근하는 세션 하이재킹이나, 가짜 로그인 사이트로 사용자를 유도하는 등의 피싱 공격이 이루어집니다😰

그렇담 우짠다..

웹 애플리케이션에서 XSS 공격을 방지하는 가장 기본적인 방법 중 하나는 사용자로부터 입력받은 데이터에서 <, >, &, ', "와 같은 특수 문자를 HTML 태그가 아닌 단순한 텍스트로 인식되게엔티티 인코딩을 하는 것입니다. escapeHTML 함수는 이러한 엔티티 인코딩 과정을 통해 사용자를 XSS 공격으로부터 보호합니다.

escapeHTML 함수

export function escapeHTML(input) {
    const div = document.createElement('div');
    div.appendChild(document.createTextNode(input));
    return div.innerHTML;
}

escapeHTML 함수는 사용자로부터 입력받은 데이터를 HTML로 해석되지 않고 텍스트로 처리되도록 변환하는 기능을 수행합니다. 브라우저는 이를 이용하여 HTML 특수 문자를 특정 엔티티로 변환함으로써 <, >, & 등과 같은 문자가 HTML 태그로 인식되지 않도록 합니다. 이렇게 변환된 문자는 그저 화면에 출력될 뿐, 악의적인 HTML 태그나 스크립트로 실행되지 않기 때문에 애플리케이션의 보안성을 높일 수 있습니다.

escapeHTML의 효과

element.innerHTML = "<script>alert('XSS');</script>";

만약 innerHTML 속성을 사용하여 사용자 입력을 직접 DOM에 삽입하면, 브라우저는 입력된 문자열을 HTML로 해석하고 실행하게 됩니다. 이로 인해 <script> 태그가 그대로 실행되어, XSS 공격에 노출될 위험이 존재하는 것이죠.

하지만 이와 달리, escapeHTML 함수는 브라우저의 DOM API를 통해 입력값을 HTML이 아닌 텍스트 노드로 처리합니다. 브라우저는 텍스트 노드를 생성할 때 HTML을 실행하지 않고, 모든 특수 문자를 자동으로 엔티티로 변환하기에 사용자가 <script>와 같은 악의적인 태그를 입력해도, 이를 그저 텍스트로만 취급하여 실행되지 않는 상태로 출력하는 것을 보장합니다.

아까 예시를 들었던 아래 코드는,

  <script>alert('XSS');</script>

escapeHTML 함수에 의해 다음과 같은 단순 텍스트로 변환됩니다.

  <script>alert('XSS');</script>

브라우저는 <script> 태그를 HTML로 해석하지 않고, 텍스트로만 표시하게 됩니다. 따라서 공격자가 의도한 JavaScript 코드가 실행되지 않고, 화면에는 안전하게 변환된 HTML 코드가 출력됩니다.

escapeHTML 함수의 한계

비록 escapeHTML 함수가 XSS 공격을 방지하는 데 매우 효과적이지만 몇몇 상황에서는 한계를 지닙니다. 우선, CSS 인젝션이나 URL 기반 공격 등의 유형은 차단하지 못합니다. 예를 들어, CSS에서 url() 함수에 악의적인 데이터를 포함시킬 수 있으며, 이를 통해 공격자는 사용자를 피싱 사이트로 리디렉션하거나, CSS 파일에 악성 코드를 심을 수 있습니다. 또한, DOM 기반 XSS 공격은 escapeHTML 함수로 해결되지 않는 경우가 존재합니다. 예를 들어, JavaScript 코드가 직접 DOM을 조작하는 상황에서는 DOM 요소의 속성이나 이벤트 핸들러에 악성 코드를 삽입할 수 있습니다.

이러한 한계점이 존재하기 때문에, escapeHTML 함수는 XSS 방지의 완전한 해결책이 아니라, 보조적인 보안 레이어로 이해해야 합니다. XSS와 같은 공격을 완벽히 방지하기 위해서는 보안 헤더를 설정하거나, 사용자 입력을 철저하게 검증하고 필터링하는 등의 보안 조치가 함께 이루어져야 합니다.

결론

지금까지 XSS와 이를 해결하는 첫 번째 방어선인 escapeHTML 함수에 대해 알아보았습니다. escapeHTML은 XSS 방지에 효과적인 도구이지만, CSS 인젝션이나 DOM 기반 XSS 같은 다양한 위협에 대비하기 위해서는 추가적인 보안 대책이 필요합니다.

결국, 웹 애플리케이션의 보안을 유지하려면 한 가지의 기법에 의존하지 않고, 여러 보안 계층을 결합하여 복합적이고 강력한 방어체계를 구축하는 것이 중요합니다. 그러한 다층적인 접근을 통해 지속적으로 변화하는 보안 위협에 대응할 수 있을 것입니다.