DOM 기반 XSS 공격으로부터 JavaScript 애플리케이션 보호-JS 튜토리얼-php.cn

DOM 기반 XSS 공격으로부터 JavaScript 애플리케이션 보호

WBOY

풀어 주다： 2024-07-24 16:00:43

원래의

1117명이 탐색했습니다.

Protecting Your JavaScript Applications from DOM-based XSS Attacks

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

DOM 기반 XSS란 무엇입니까?

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

DOM 기반 XSS 작동 방식

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM-based XSS Example</title>
</head>
<body>
    <div id="message"></div>
    <script>
        // Assume user input is taken from the URL hash
        var userInput = window.location.hash.substring(1);
        // Directly inserting user input into the DOM
        document.getElementById('message').innerHTML = "Hello, " + userInput + "!";
    </script>
</body>
</html>

로그인 후 복사

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

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

https://xyz.com/#<script>alert('XSS');</script>

로그인 후 복사

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

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

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

<script>
    // User visits: https://xyz.com/#&lt;script&gt;alert('XSS');&lt;/script&gt;
    var userInput = window.location.hash.substring(1);
    document.getElementById('message').innerHTML = "Hello, " + userInput + "!";
    // This results in: Hello, <script>alert('XSS');</script>!
    // The alert will pop up

로그인 후 복사

DOM 기반 XSS 방지

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.2.8/purify.min.js"></script>
<script>
    var userInput = window.location.hash.substring(1);
    // Sanitize the user input
    var sanitizedInput = DOMPurify.sanitize(userInput);
    // Insert sanitized input into the DOM
    document.getElementById('message').innerHTML = "Hello, " + sanitizedInput + "!";
</script>

로그인 후 복사

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

<script>
    var userInput = window.location.hash.substring(1);
    var messageDiv = document.getElementById('message');
    // Create a text node with the user input
    var textNode = document.createTextNode("Hello, " + userInput + "!");
    // Append the text node to the message div
    messageDiv.appendChild(textNode);
</script>

로그인 후 복사

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

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self';">

로그인 후 복사

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

자바스크립트 애플리케이션이 이러한 취약점과 기타 취약점으로부터 안전한지 항상 주의를 기울이십시오. 질문이 있거나 추가 지원이 필요한 경우 아래 댓글로 언제든지 문의해 주세요.

위 내용은 DOM 기반 XSS 공격으로부터 JavaScript 애플리케이션 보호의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!