Contents

HTML5 보안(Security)

HTML5의 보안 이슈(Security Issues in HTML5)

HTML5는 많은 새로운 기능을 도입하여 웹 애플리케이션 개발을 쉽게 만들었지만, 보안 문제도 증가시켰습니다. 주요 보안 이슈는 다음과 같습니다:

웹 스토리지(Web Storage)

로컬 스토리지와 세션 스토리지는 브라우저에 데이터를 저장하는데 사용됩니다. 그러나, 이 데이터는 클라이언트 측에 저장되므로 쉽게 접근할 수 있어 보안 위협이 될 수 있습니다.

크로스 도메인 메시징(Cross-Origin Resource Sharing, CORS)

CORS는 리소스 공유를 가능하게 하지만, 잘못된 설정으로 인해 민감한 데이터가 노출될 수 있습니다.

웹소켓(WebSockets)

실시간 통신을 가능하게 하지만, 악성 공격에 대한 취약점이 존재할 수 있습니다.

콘텐츠 보안 정책(Content Security Policy, CSP)

콘텐츠 보안 정책(CSP)은 웹사이트가 특정 소스에서만 콘텐츠를 로드하도록 지시하는 보안 기능입니다. 이를 통해 XSS(Cross-Site Scripting) 및 데이터 인젝션 공격을 방지할 수 있습니다.

CSP 설정 예제

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';">
    <title>CSP 예제</title>
</head>
<body>
    <h1>콘텐츠 보안 정책 설정 예제</h1>
    <p>이 페이지는 기본적으로 자체 소스만 허용하고, 이미지 로드는 https 프로토콜만 허용하며, iframe 로드는 차단합니다.</p>
</body>
</html>

XSS와 CSRF 방지(Preventing XSS and CSRF)

XSS(Cross-Site Scripting)

XSS는 악성 스크립트가 다른 사용자의 브라우저에서 실행되도록 하는 공격입니다. 이를 방지하기 위한 방법은 다음과 같습니다:

입력 값 검증: 사용자가 입력한 데이터에 대해 철저한 검증과 필터링을 수행합니다.
출력 인코딩: 사용자 입력 데이터를 HTML, JavaScript, URL 등에 출력하기 전에 적절히 인코딩합니다.
CSP 사용: CSP를 사용하여 승인된 소스에서만 스크립트를 로드하도록 제한합니다.

XSS 방지 예제

<!DOCTYPE html>
<html>
<head>
    <title>XSS 방지 예제</title>
</head>
<body>
    <h1>XSS 방지</h1>
    <form method="post">
        <label for="username">사용자 이름:</label>
        <input type="text" id="username" name="username">
        <button type="submit">제출</button>
    </form>

    <p>안녕하세요, <?php echo htmlspecialchars($_POST['username'], ENT_QUOTES, 'UTF-8'); ?>!</p>
</body>
</html>

CSRF(Cross-Site Request Forgery)

CSRF는 사용자가 모르는 사이에 다른 사용자가 의도하지 않은 요청을 보낼 수 있도록 하는 공격입니다. 이를 방지하기 위한 방법은 다음과 같습니다:

CSRF 토큰 사용: 폼 제출 시 유일한 토큰을 생성하여 검증합니다.
Referer 헤더 검증: 요청의 출처를 확인하여 신뢰할 수 있는 도메인에서만 요청을 처리합니다.

CSRF 방지 예제

<!DOCTYPE html>
<html>
<head>
    <title>CSRF 방지 예제</title>
</head>
<body>
    <h1>CSRF 방지</h1>
    <form method="post" action="/submit" onsubmit="return validateToken();">
        <input type="hidden" name="csrf_token" value="유일한_토큰_값">
        <label for="username">사용자 이름:</label>
        <input type="text" id="username" name="username">
        <button type="submit">제출</button>
    </form>

    <script>
        function validateToken() {
            var token = document.querySelector('input[name="csrf_token"]').value;
            // 서버에서 제공한 토큰과 일치하는지 검증하는 로직 추가
            return true;
        }
    </script>
</body>
</html>

HTML5 보안 실습(Security Practice with HTML5)

실습 1: 안전한 웹 스토리지 사용

<!DOCTYPE html>
<html>
<head>
    <title>안전한 웹 스토리지 사용</title>
</head>
<body>
    <h1>안전한 로컬 스토리지 예제</h1>
    <input type="text" id="dataInput" placeholder="저장할 데이터 입력">
    <button onclick="saveData()">저장</button>
    <button onclick="loadData()">로드</button>
    <p id="output"></p>

    <script>
        function saveData() {
            var data = document.getElementById('dataInput').value;
            if (data) {
                localStorage.setItem('myData', data);
                alert('데이터가 저장되었습니다.');
            }
        }

        function loadData() {
            var data = localStorage.getItem('myData');
            if (data) {
                document.getElementById('output').textContent = '저장된 데이터: ' + data;
            } else {
                alert('저장된 데이터가 없습니다.');
            }
        }
    </script>
</body>
</html>

실습 2: 안전한 CORS 설정

<!DOCTYPE html>
<html>
<head>
    <title>안전한 CORS 설정</title>
</head>
<body>
    <h1>안전한 CORS 설정 예제</h1>
    <button onclick="fetchData()">데이터 가져오기</button>
    <p id="dataOutput"></p>

    <script>
        function fetchData() {
            fetch('https://example.com/api/data', {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                document.getElementById('dataOutput').textContent = '가져온 데이터: ' + JSON.stringify(data);
            })
            .catch(error => {
                console.error('데이터 가져오기 오류:', error);
            });
        }
    </script>
</body>
</html>

이와 같은 보안 실습을 통해 HTML5의 다양한 보안 이슈를 이해하고, 안전한 웹 애플리케이션을 개발하는 데 도움을 받을 수 있습니다.

Post Views: 512

HTML5 Security