교차 사이트 스크립팅(XSS) 공격은 웹 애플리케이션의 일반적인 취약점이며, 가장 위험한 유형 중 하나는 DOM 기반 XSS입니다. 이러한 형태의 XSS는 웹페이지의 DOM(문서 개체 모델)을 조작하여 악성 스크립트를 실행할 때 발생합니다. 이 블로그에서는 DOM 기반 XSS, 작동 방식, 실제 예제 코드를 사용하여 이러한 공격으로부터 애플리케이션을 보호하는 방법을 살펴보겠습니다.

DOM 기반 XSS란 무엇입니까?

DOM 기반 XSS는 취약점이 서버 측 코드가 아닌 클라이언트 측 코드에 있는 일종의 XSS 공격입니다. 이는 웹 애플리케이션이 사용자 입력과 같은 신뢰할 수 없는 소스의 데이터를 사용하고 적절한 유효성 검사나 이스케이프 없이 DOM에 쓸 때 발생합니다. 이로 인해 웹페이지 컨텍스트 내에서 악성 스크립트가 실행되어 공격자가 데이터를 도용하고 세션을 가로채는 등의 작업을 수행할 수 있습니다.

DOM 기반 XSS 작동 방식

공격자가 DOM 기반 XSS를 어떻게 악용할 수 있는지 이해하기 위해 간단한 시나리오를 분석해 보겠습니다.

취약한 웹 애플리케이션 예
URL 해시의 사용자 입력을 사용하여 인사말 메시지를 표시하는 간단한 웹 페이지를 생각해 보세요.

공격자가 취약점을 악용하는 방법

1. 악성 URL 제작: 공격자는 URL 해시에 악성 JavaScript 코드가 포함된 URL을 제작할 수 있습니다. 예를 들어:

https://xyz.com/#

2. 악성 URL 공유: 공격자는 이 URL을 의심 없이 클릭할 수 있는 잠재적인 피해자와 공유합니다. 공격자는 이메일, 소셜 미디어 또는 기타 수단을 통해 이 링크를 배포할 수 있습니다.

삼. 취약점 악용: 피해자가 악성 URL을 방문하면 웹 애플리케이션은 URL 해시에서 값을 추출하여 DOM에 삽입합니다. 악성 스크립트는 웹페이지의 컨텍스트에서 실행됩니다.

결과: 피해자는 스크립트가 실행되었음을 나타내는 'XSS' 메시지가 포함된 경고 상자를 보게 됩니다. 실제 공격에서 악성 스크립트는 쿠키 도용, 키 입력 캡처, 사용자를 피싱 사이트로 리디렉션 등의 작업을 수행할 수 있습니다.

    var userInput = window.location.hash.substring(1);
    document.getElementById('message').innerHTML = "Hello, "   userInput   "!";
    // This results in: Hello, !
    // The alert will pop up

DOM 기반 XSS 방지

DOM 기반 XSS로부터 보호하려면 다음 모범 사례를 따르세요.

1. 사용자 입력 삭제 및 이스케이프: 사용자 입력을 DOM에 삽입하기 전에 항상 삭제하고 이스케이프하세요. DOMPurify와 같은 라이브러리를 사용하여 HTML을 삭제하세요.

2. 안전한 DOM 조작 방법 사용: innerHTML을 사용하는 대신 textContent, createElement 및 AppendChild와 같은 더 안전한 방법을 사용하세요.

삼. 콘텐츠 보안 정책(CSP): 강력한 CSP를 구현하여 스크립트를 로드하고 실행할 수 있는 소스를 제한합니다.

DOM 기반 XSS는 웹 애플리케이션과 사용자 데이터를 손상시킬 수 있는 중요한 보안 위험입니다. 사용자 입력 삭제 및 이스케이프 처리, 안전한 DOM 조작 방법 사용, 강력한 콘텐츠 보안 정책 구현과 같은 모범 사례를 따르면 DOM 기반 XSS 공격의 위험을 크게 줄일 수 있습니다.

주의를 기울여 JavaScript 애플리케이션이 이러한 취약점과 기타 취약점으로부터 안전한지 확인하세요. 질문이 있거나 추가 지원이 필요한 경우 아래 댓글을 통해 언제든지 문의해 주세요.