크로스 사이트 스크립팅 (XSS) - jquery html

Cross-site Scripting (XSS)

설명

크로스 사이트 스크립팅(XSS)은 웹 애플리케이션이 사용자 입력값을 적절히 검증하지 않고 웹 페이지에 반영할 때 발생하는 취약점입니다. jQuery의 html() 함수는 입력된 내용을 HTML로 해석하여 DOM에 삽입하므로, 만약 사용자가 악의적인 스크립트를 입력하면 브라우저에서 그대로 실행될 수 있습니다. 이를 통해 공격자는 피해자의 브라우저에서 악성 코드를 실행하거나, 세션 탈취, 계정 도용, 피싱 등 다양한 공격을 할 수 있습니다.

잠재적 영향

• 정보 탈취 (개인정보, 세션 쿠키 등): 공격자가 사용자의 세션 쿠키나 민감한 정보를 획득할 수 있습니다.

• 브라우저 악성코드 실행: 사용자 브라우저에 악성 스크립트를 실행할 수 있습니다.

• UI 변조 및 피싱: 정상적인 화면에 피싱 화면을 삽입하여 사용자를 속일 수 있습니다.

해결 방법

• jQuery의 html() 함수 대신 text() 함수를 사용해 입력값이 HTML로 해석되지 않도록 합니다.

• 만약 반드시 HTML을 삽입해야 할 때는, 입력값에 대한 철저한 이스케이프 처리를 합니다. edX의 HtmlUtils.setHtml()과 같이 안전하게 처리하는 라이브러리를 활용하세요.

• 사용자 입력값은 항상 신뢰하지 말고, 출력 전에 인코딩 또는 필터링을 적용하세요.

취약한 코드 및 안전한 코드 예시

취약한 코드

// XSS 취약 코드 예시
function showMessage(userInput) {
    $("#message").html(userInput);
}
// 사용자가 <script>alert('XSS')</script> 를 입력하면 스크립트가 실행됩니다.

안전한 코드

// 안전한 코드 예시 1 (text() 사용)
function showMessage(userInput) {
    $("#message").text(userInput);
}

// 안전한 코드 예시 2 (HTML 이스케이프 처리)
function escapeHtml(str) {
    return str.replace(/[&<>"']/g, function(tag) {
        const chars = {'&':'&amp;', '<':'&lt;', '>':'&gt;', '"':'&quot;', "'":'&#39;'};
        return chars[tag] || tag;
    });
}
function showMessage(userInput) {
    $("#message").html(escapeHtml(userInput));
}

설명:

• 취약한 코드: 사용자 입력값을 html() 함수에 직접 전달하면, 입력에 포함된 스크립트가 실행되어 XSS 공격에 노출됩니다.

• 안전한 코드: compliant 코드에서는 text() 함수로 사용자 입력을 출력하여 HTML 태그와 스크립트가 해석되지 않도록 하거나, HTML로 삽입할 경우 입력값을 이스케이프 처리하여 악성 스크립트가 동작하지 않도록 막습니다.

참조

• CWE-79