HTML 보안 취약점 및 예방

1. 도입 (왜 배워야 하는가)

웹 애플리케이션의 보안은 매우 중요합니다. 특히 HTML은 웹 페이지의 구조를 정의하는 기본 언어로, 잘못된 사용은 다양한 보안 취약점으로 이어질 수 있습니다. 예를 들어, Cross-Site Scripting (XSS) 공격은 사용자가 악성 스크립트를 웹 페이지에 삽입하여 다른 사용자에게 전달하는 방식으로 발생합니다. 이러한 취약점을 모른다면, 사용자의 개인 정보가 유출되거나 웹사이트가 해킹당하는 등의 심각한 문제가 발생할 수 있습니다.

따라서, HTML을 안전하게 사용하는 방법을 배우는 것은 개발자로서의 필수적인 책임입니다.

2. 핵심 개념 설명

2.1. XSS (Cross-Site Scripting)

XSS는 공격자가 악성 스크립트를 웹 페이지에 삽입하여 다른 사용자의 브라우저에서 실행하게 하는 공격입니다. 이는 마치 누군가가 친구의 생일파티에 몰래 끼어들어 친구에게 유해한 정보를 전달하는 것과 같습니다.

2.2. CSRF (Cross-Site Request Forgery)

CSRF는 사용자가 로그인한 상태에서 공격자가 의도하지 않은 요청을 보내게 만드는 공격입니다. 마치 누군가가 친구의 지갑에서 몰래 카드를 꺼내어 무단으로 결제하는 것과 같습니다.

3. 기본 코드 예제

XSS 공격 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>XSS 예제</title>
</head>
<body>
    <h1>안녕하세요!</h1>
    <form action="#" method="post">
        <input type="text" name="user_input" placeholder="입력하세요">
        <input type="submit" value="전송">
    </form>
    <div id="output"></div>
    
    <script>
        const form = document.querySelector('form');
        form.addEventListener('submit', (event) => {
            event.preventDefault();
            const userInput = document.querySelector('input[name="user_input"]').value;
            document.getElementById('output').innerHTML = userInput; // 입력값을 그대로 출력
        });
    </script>
</body>
</html>

• 실행 결과: 사용자가 입력한 값이 output div에 그대로 표시됨
• 1: <form> 태그로 입력 폼을 생성합니다.
• 2: 이벤트 리스너를 추가하여 폼이 제출될 때 입력값을 가져옵니다.
• 3: innerHTML을 사용하여 입력값을 output div에 삽입합니다. (문제: XSS 공격 가능)

4. 실전 활용 예제

예제 1: XSS 예방

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>XSS 예방 예제</title>
</head>
<body>
    <h1>안녕하세요!</h1>
    <form action="#" method="post">
        <input type="text" name="user_input" placeholder="입력하세요">
        <input type="submit" value="전송">
    </form>
    <div id="output"></div>

    <script>
        const form = document.querySelector('form');
        form.addEventListener('submit', (event) => {
            event.preventDefault();
            const userInput = document.querySelector('input[name="user_input"]').value;
            const safeInput = document.createTextNode(userInput); // 안전한 텍스트 노드로 변환
            document.getElementById('output').appendChild(safeInput); // 안전한 방식으로 출력
        });
    </script>
</body>
</html>

• 상황 설명: 사용자 입력을 안전하게 출력하는 방법으로, XSS를 방지합니다.

예제 2: CSRF 예방

CSRF를 방지하기 위해 CSRF 토큰을 활용하는 방법입니다.

<form action="/submit" method="post">
    <input type="hidden" name="csrf_token" value="여기에_토큰_값">
    <input type="text" name="user_input" placeholder="입력하세요">
    <input type="submit" value="전송">
</form>

• 상황 설명: 각 요청에 CSRF 토큰을 추가하여, 서버에서 유효성을 검사함으로써 CSRF 공격을 방지합니다.

5. 흔한 실수와 주의사항

실수 1: innerHTML의 사용

• 잘못된 코드:

document.getElementById('output').innerHTML = userInput; // XSS 취약점

• 올바른 코드:

const safeInput = document.createTextNode(userInput);
document.getElementById('output').appendChild(safeInput); // 안전하게 출력

실수 2: CSRF 토큰 누락

• CSRF 토큰을 포함하지 않으면 공격에 취약해질 수 있습니다. 항상 폼에 CSRF 토큰을 추가해야 합니다.

6. 정리

• 웹 애플리케이션 보안은 필수적입니다.
• XSS 및 CSRF와 같은 공격 방식에 대해 이해해야 합니다.
• 사용자 입력을 안전하게 처리하는 방법을 배워야 합니다.
• 향후 학습할 주제: 서버 측 보안, HTTPS 구현, 웹 애플리케이션 방화벽.

이 자료를 통해 HTML 보안 취약점과 그 예방 방법에 대한 이해를 높이고, 실무에서 활용할 수 있는 기초를 다지길 바랍니다.