XSS(DOM).html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DVWA DOM XSS 이론</title>

<style>
body{
    font-family: "Segoe UI", sans-serif;
    background:#eef3f8;
    margin:0;
    padding:30px;
}

h1{
    text-align:center;
    color:#0d47a1;
}

.section{
    background:white;
    padding:20px;
    margin:30px auto;
    max-width:1200px;
    border-radius:12px;
    box-shadow:0 5px 15px rgba(0,0,0,.15);
}

svg{
    width:100%;
    height:auto;
}

.title{
    font-size:28px;
    font-weight:bold;
    fill:#0d47a1;
}

.box{
    fill:#90caf9;
    stroke:#1565c0;
    stroke-width:3;
}

.red{
    fill:#ef5350;
}

.green{
    fill:#66bb6a;
}

.orange{
    fill:#ffb74d;
}

.gray{
    fill:#eceff1;
}

.text{
    font-size:18px;
    text-anchor:middle;
}

.arrow{
    stroke:#333;
    stroke-width:3;
    marker-end:url(#arrow);
}
</style>
</head>
<body>

<h1>DVWA - DOM XSS (Document Object Model XSS)</h1>

<div class="section">

<h2>1. DOM XSS 개념</h2>

<svg viewBox="0 0 1100 280">

<defs>
<marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto">
<path d="M0,0 L8,3 L0,6 Z" fill="#333"/>
</marker>
</defs>

<rect class="box" x="30" y="80" width="220" height="100" rx="12"/>
<text class="text" x="140" y="125">사용자 입력</text>
<text class="text" x="140" y="155">URL</text>

<line class="arrow" x1="250" y1="130" x2="420" y2="130"/>

<rect class="orange" x="420" y="80" width="260" height="100" rx="12"/>
<text class="text" x="550" y="120">JavaScript</text>
<text class="text" x="550" y="150">DOM 처리</text>

<line class="arrow" x1="680" y1="130" x2="850" y2="130"/>

<rect class="red" x="850" y="80" width="220" height="100" rx="12"/>
<text class="text" x="960" y="120">innerHTML</text>
<text class="text" x="960" y="150">실행</text>

</svg>

</div>

<div class="section">

<h2>2. DOM XSS 동작 과정</h2>

<svg viewBox="0 0 1150 500">

<defs>
<marker id="arrow2" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto">
<path d="M0,0 L8,3 L0,6 Z" fill="#333"/>
</marker>
</defs>

<rect class="green" x="80" y="40" width="220" height="90"/>
<text class="text" x="190" y="90">1. URL 입력</text>

<line x1="300" y1="85" x2="430" y2="85" stroke="#333" stroke-width="3" marker-end="url(#arrow2)"/>

<rect class="box" x="430" y="40" width="250" height="90"/>
<text class="text" x="555" y="90">2. location.hash</text>

<line x1="680" y1="85" x2="810" y2="85" stroke="#333" stroke-width="3" marker-end="url(#arrow2)"/>

<rect class="orange" x="810" y="40" width="250" height="90"/>
<text class="text" x="935" y="90">3. JavaScript 처리</text>

<line x1="935" y1="130" x2="935" y2="220" stroke="#333" stroke-width="3" marker-end="url(#arrow2)"/>

<rect class="red" x="810" y="220" width="250" height="90"/>
<text class="text" x="935" y="270">4. innerHTML</text>

<line x1="810" y1="265" x2="680" y2="265" stroke="#333" stroke-width="3" marker-end="url(#arrow2)"/>

<rect class="gray" x="430" y="220" width="250" height="90"/>
<text class="text" x="555" y="270">5. 브라우저 실행</text>

<line x1="430" y1="265" x2="300" y2="265" stroke="#333" stroke-width="3" marker-end="url(#arrow2)"/>

<rect class="red" x="80" y="220" width="220" height="90"/>
<text class="text" x="190" y="260">XSS 발생</text>

</svg>

</div>

<div class="section">

<h2>3. Stored / Reflected / DOM 비교</h2>

<svg viewBox="0 0 1150 350">

<rect class="green" x="30" y="50" width="320" height="220"/>
<text class="text" x="190" y="90">Stored XSS</text>

<text x="60" y="140" font-size="18">
• DB 저장
</text>

<text x="60" y="180" font-size="18">
• 서버 응답 포함
</text>

<text x="60" y="220" font-size="18">
• 여러 사용자 영향
</text>

<rect class="orange" x="410" y="50" width="320" height="220"/>
<text class="text" x="570" y="90">Reflected XSS</text>

<text x="440" y="140" font-size="18">
• URL 전달
</text>

<text x="440" y="180" font-size="18">
• 서버가 그대로 출력
</text>

<text x="440" y="220" font-size="18">
• 응답 HTML 포함
</text>

<rect class="red" x="790" y="50" width="320" height="220"/>
<text class="text" x="950" y="90">DOM XSS</text>

<text x="820" y="140" font-size="18">
• 서버 미관여
</text>

<text x="820" y="180" font-size="18">
• JavaScript 실행
</text>

<text x="820" y="220" font-size="18">
• DOM 변경
</text>

</svg>

</div>

<div class="section">

<h2>4. DVWA DOM XSS 구조</h2>

<svg viewBox="0 0 1100 300">

<rect class="green" x="40" y="90" width="220" height="90"/>
<text class="text" x="150" y="140">URL Hash</text>

<line class="arrow" x1="260" y1="135" x2="430" y2="135"/>

<rect class="orange" x="430" y="90" width="240" height="90"/>
<text class="text" x="550" y="140">
document.location
</text>

<line class="arrow" x1="670" y1="135" x2="840" y2="135"/>

<rect class="box" x="840" y="90" width="220" height="90"/>
<text class="text" x="950" y="140">
innerHTML
</text>

</svg>

</div>

<div class="section">

<h2>5. 공격 흐름</h2>

<svg viewBox="0 0 1100 340">

<rect class="green" x="40" y="120" width="220" height="100"/>
<text class="text" x="150" y="170">공격 URL</text>

<line class="arrow" x1="260" y1="170" x2="430" y2="170"/>

<rect class="orange" x="430" y="120" width="240" height="100"/>
<text class="text" x="550" y="170">브라우저</text>

<line class="arrow" x1="670" y1="170" x2="840" y2="170"/>

<rect class="red" x="840" y="120" width="220" height="100"/>
<text class="text" x="950" y="170">스크립트 실행</text>

</svg>

</div>

<div class="section">

<h2>6. 방어 방법</h2>

<svg viewBox="0 0 1150 260">

<rect class="green" x="40" y="60" width="220" height="120"/>
<text class="text" x="150" y="120">textContent</text>
<text class="text" x="150" y="150">사용</text>

<rect class="green" x="320" y="60" width="220" height="120"/>
<text class="text" x="430" y="120">입력 검증</text>

<rect class="green" x="600" y="60" width="220" height="120"/>
<text class="text" x="710" y="120">출력 인코딩</text>

<rect class="green" x="880" y="60" width="220" height="120"/>
<text class="text" x="990" y="120">CSP 적용</text>

</svg>

</div>

</body>
</html>