web/index.html at main · CryptographyYonsei/web · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Deep Learning-based Side Channel Attack Detection System</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Circuit Background -->
<div class="circuit-bg"></div>

<!-- Navigation -->
<nav class="navbar">
    <div class="nav-container">
        <div class="nav-logo">
            <span class="logo-text">SCA Research</span>
        </div>
        <div class="hamburger" id="hamburger">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <ul class="nav-menu" id="nav-menu">
            <li><a href="index.html" class="nav-link active">Home</a></li>
            <li><a href="pages/team.html" class="nav-link">Team</a></li>
            <li><a href="pages/contact.html" class="nav-link">Contact</a></li>
        </ul>
    </div>
</nav>

<!-- Hero Section -->
<section class="hero">
    <div class="container">
        <h1 class="hero-title">Deep Learning-based<br>Side Channel Attack Detection System</h1>
        <p class="hero-subtitle">
            Research on next-generation security solutions that analyze physical side effects<br>
            to detect and defend vulnerabilities in cryptographic systems
        </p>
        <div class="university-badge">
            <span>Yonsei University | 2025 Spring Semester</span>
        </div>
    </div>
</section>

<!-- Research Overview -->
<section class="research-overview">
    <div class="container">
        <h2 class="section-title">Research Overview</h2>
        <div class="overview-grid">
            <div class="overview-card" data-aos="fade-up">
                <div class="card-icon">🔒</div>
                <h3>Side Channel Attack</h3>
                <p>An attack technique that extracts secret information by analyzing physical side effects such as power consumption, electromagnetic radiation, and processing time</p>
            </div>
            <div class="overview-card" data-aos="fade-up" data-aos-delay="200">
                <div class="card-icon">🧠</div>
                <h3>Deep Learning-based Detection</h3>
                <p>Utilizing three deep learning models—MLP, CNN1D, and LSTM—to detect and classify side channel attacks</p>
            </div>
            <div class="overview-card" data-aos="fade-up" data-aos-delay="400">
                <div class="card-icon">🛡️</div>
                <h3>Defense System</h3>
                <p>Developing real-time detection-based defense strategies and hardware-based security solutions</p>
            </div>
        </div>
    </div>
</section>

<!-- Attack Types -->
<section class="attack-types">
    <div class="container">
        <h2 class="section-title">Types of Side Channel Attacks</h2>
        <div class="attack-timeline">
            <div class="timeline-item" data-aos="fade-right">
                <div class="timeline-content">
                    <h3>SPA (Simple Power Analysis)</h3>
                    <p>Visually analyzing power consumption patterns during computation through simple power analysis</p>
                </div>
                <div class="timeline-icon">📊</div>
            </div>
            <div class="timeline-item" data-aos="fade-left">
                <div class="timeline-content">
                    <h3>DPA (Differential Power Analysis)</h3>
                    <p>Using statistical techniques to analyze differences in power consumption and compare with predicted results</p>
                </div>
                <div class="timeline-icon">📈</div>
            </div>
            <div class="timeline-item" data-aos="fade-right">
                <div class="timeline-content">
                    <h3>TA (Template Analysis)</h3>
                    <p>Constructing a probabilistic model from a pre-collected device for comparative analysis</p>
                </div>
                <div class="timeline-icon">🎯</div>
            </div>
        </div>
    </div>
</section>

<!-- Model Comparison -->
<section class="model-comparison">
    <div class="container">
        <h2 class="section-title">Performance Comparison of Deep Learning Models</h2>
        <div class="models-grid">
            <div class="model-card mlp-card" data-aos="zoom-in">
                <div class="model-header">
                    <h3>MLP</h3>
                    <span class="model-subtitle">Multi-Layer Perceptron</span>
                </div>
                <div class="accuracy-display">
                    <div class="accuracy-circle">
                        <span class="accuracy-number">99.4%</span>
                    </div>
                </div>
                <div class="model-stats">
                    <div class="stat-item">
                        <span class="stat-label">Training Time</span>
                        <span class="stat-value">12.3 min</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-label">Memory Usage</span>
                        <span class="stat-value">560 MB</span>
                    </div>
                </div>
            </div>

            <div class="model-card lstm-card" data-aos="zoom-in" data-aos-delay="200">
                <div class="model-header">
                    <h3>LSTM</h3>
                    <span class="model-subtitle">Long Short-Term Memory</span>
                </div>
                <div class="accuracy-display">
                    <div class="accuracy-circle">
                        <span class="accuracy-number">93.1%</span>
                    </div>
                </div>
                <div class="model-stats">
                    <div class="stat-item">
                        <span class="stat-label">Training Time</span>
                        <span class="stat-value">18.5 min</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-label">Memory Usage</span>
                        <span class="stat-value">690 MB</span>
                    </div>
                </div>
            </div>

            <div class="model-card cnn-card" data-aos="zoom-in" data-aos-delay="400">
                <div class="model-header">
                    <h3>CNN1D</h3>
                    <span class="model-subtitle">1D Convolutional Neural Network</span>
                </div>
                <div class="accuracy-display">
                    <div class="accuracy-circle">
                        <span class="accuracy-number">89.6%</span>
                    </div>
                </div>
                <div class="model-stats">
                    <div class="stat-item">
                        <span class="stat-label">Training Time</span>
                        <span class="stat-value">20.8 min</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-label">Memory Usage</span>
                        <span class="stat-value">780 MB</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Data Visualization -->
<section class="data-visualization">
    <div class="container">
        <h2 class="section-title">Experimental Data Visualization</h2>
        <div class="viz-container">
            <div class="chart-card" data-aos="fade-up">
                <h3>Synthetic Data Distribution (PCA)</h3>
                <div class="chart-placeholder pca-chart">
                    <div class="data-points">
                        <div class="point class-0"></div>
                        <div class="point class-1"></div>
                        <div class="point class-0"></div>
                        <div class="point class-1"></div>
                        <div class="point class-0"></div>
                    </div>
                    <div class="chart-info">
                        <span>• Samples: 200,000</span>
                        <span>• Features: 100 dimensions</span>
                        <span>• Classes: 2</span>
                    </div>
                </div>
            </div>
            <div class="chart-card" data-aos="fade-up" data-aos-delay="200">
                <h3>Learning Curve</h3>
                <div class="chart-placeholder learning-curve">
                    <svg viewBox="0 0 300 200">
                        <path d="M20,180 Q60,120 100,60 T180,40 T260,35" stroke="#00ffff" stroke-width="2" fill="none" class="mlp-line"/>
                        <path d="M20,180 Q60,140 100,100 T180,80 T260,75" stroke="#ff6b6b" stroke-width="2" fill="none" class="lstm-line"/>
                        <path d="M20,180 Q60,150 100,120 T180,100 T260,95" stroke="#4ecdc4" stroke-width="2" fill="none" class="cnn-line"/>
                    </svg>
                    <div class="legend">
                        <span class="legend-item mlp">■ MLP</span>
                        <span class="legend-item lstm">■ LSTM</span>
                        <span class="legend-item cnn">■ CNN1D</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Results -->
<section class="results">
    <div class="container">
        <h2 class="section-title">Research Results</h2>
        <div class="results-content">
            <div class="result-highlight" data-aos="fade-up">
                <h3>🎯 Key Achievements</h3>
                <p>Successfully classified side channel attack patterns with <strong>over 90% accuracy</strong> using deep learning techniques.</p>
            </div>
            <div class="conclusions-grid">
                <div class="conclusion-card" data-aos="fade-up" data-aos-delay="200">
                    <h4>Excellence of MLP Model</h4>
                    <p>Despite its relatively simple structure, MLP achieved the best classification performance (99.4%).</p>
                </div>
                <div class="conclusion-card" data-aos="fade-up" data-aos-delay="400">
                    <h4>Efficiency Validation</h4>
                    <p>MLP was also confirmed to be the most efficient in terms of training time and memory usage.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Footer -->
<footer class="footer">
    <div class="container">
        <div class="footer-content">
            <div class="footer-section">
                <h4>Research Team</h4>
                <p>School of Software, Yonsei University<br>RAISE LAB</p>
            </div>
            <div class="footer-section">
                <h4>Course</h4>
                <p>Cryptography<br>Spring 2025</p>
            </div>
            <div class="footer-section">
                <h4>Contact</h4>
                <p>Email: sunjun7559012@yonsei.ac.kr</p>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2025 Yonsei University. All rights reserved.</p>
        </div>
    </div>
</footer>

<script src="script.js"></script>
</body>
</html>