-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathlearn_5.html
More file actions
245 lines (202 loc) · 10.3 KB
/
learn_5.html
File metadata and controls
245 lines (202 loc) · 10.3 KB
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="learn.js" async></script>
<link rel="stylesheet" href="indexStyle.css">
<link rel="Shortcut Icon" type="image/x-icon" href="img/home.ico" />
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@500&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Mr+De+Haviland&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rosario:wght@600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Alice&display=swap" rel="stylesheet">
<title>InfoSec Learning</title>
<style>
footer{
display: block;
clear:both;
bottom: 0;
padding:5px;
text-align:center;
font-family: 'Noto Serif TC', serif;
}
p,ul,ol{
font-family: 'Noto Serif TC', serif;
font-size: 130%;
}
body{
margin-right:2em;
margin-left:2em;
}
.slidein {
-moz-animation-duration: 3s;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-moz-animation-name: slidein;
-webkit-animation-name: slidein;
animation-name: slidein;
-moz-animation-iteration-count: 100;
-webkit-animation-iteration-count: 100;
animation-iteration-count: 100;
-moz-animation-direction: alternate;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
@-moz-keyframes slidein {
from {
margin-left:65%;
width:30%
}
to {
margin-left:0%;
width:30%;
}
}
@-webkit-keyframes slidein {
from {
margin-left:65%;
width:30%
}
to {
margin-left:0%;
width:30%;
}
}
@keyframes slidein {
from {
margin-left:65%;
width:30%
}
to {
margin-left:0%;
width:30%;
}
}
}
</style>
</head>
<body onload="setup();" style="background-color: #BCB8B1;" >
<br><br>
<header>
<div class="navbar">
<a href="index.html"><img src="img/logo.png" class="logo"></a>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="learn.html">Learning</a></li>
<li><a href="game.html">InfoSec Game</a></li>
<li><a href="html/about.html">About</a></li>
</ul>
</nav>
</div>
</header>
<h1 class="title">Information Security Knowledge</h1>
<div id="top" class="navbar">
<nav>
<ul style="text-align: right;">
<li class="title-a" style="width: 10%; text-align: center;">Navbar</li><br><br><br>
<li><a href="learn.html#P1">Plain text and Cipher text</a></li><br><br>
<li><a href="learn_2.html#P2">Cryptography</a></li><br><br>
<li><a href="learn_3.html#P3">This is password.</a></li><br><br>
<li><a href="learn_4.html#P4">Buffer Overflow</a></li><br><br>
<li><a href="learn_5.html#P5">Cross-Site Scripting</a></li><br><br>
<li><a href="learn_6.html#P6">Forensics</a></li><br><br>
</ul>
</nav>
</div>
<h1 id="P5" class="title-f">XSS(Cross-Site Scripting)</h1>
 <a href="#top"><img src="img/caret-quare-up.png" alt=""></a>
<h1 id="watchme" class="slidein title-b" style="width: 29%; text-align: center;font-size: 300%;">Never trust user input</h1><br>
<div class="container">
<div class="box" style="width: 55%;">
<h1 class = "title-a">攻擊流程</h1><br>
<img width="100%;" src="img/xss.jpg" alt=""> <br>
<br><br><br>
<p style="text-align: left;">
<ol style="text-align: left;">
<li>Hacker 在受害網站注入 XSS 漏洞</li><br>
<li>透過社交工程手法傳送惡意 URL 給 User</li><br>
<li>當User 點擊 URL 便會把自己的資料（cookie）藉由受害網站傳回給 Hacker</li>
</ol>
</p>
</div>
</div>
<div class="container">
<div class="box" style="width: 55%;">
<br><br><br>
<a id="sim" class="title-b button" style="font-size: 200%;" target="_blank" href="xss.html">點我進入XSS模擬</a>
<br><br><br>
<h1 class = "title-a">XSS三大種類</h1><br>
<br><br><br>
<p style="text-align: left;">
<ol style="font-size: 200%; list-style-type: upper-roman;text-align: left;">
<li> 反射型 (Reflected)</li>
<ul style="font-size: 80%; list-style-type: katakana;">
<li>最常見的 XSS 攻擊類型，通常是將惡意程式會藏在網址列裡，放在 GET 參數傳遞，範例如下：<br>
<pre class="language-txt"><code class="language-txt">http://www.example.com/upload.asp?id=<script>alert(1);</script ></code></pre>
</li><br>
<li>這種手法要能夠成功攻擊，需要使用社交工程釣魚的技巧，使 User 點擊URL 攻擊才會生效。</li><br>
<li>因為 URL 通常看起來很詭異，所以 Hacker 通常會使用短網址或 HTML Encoder 的方式嘗試欺騙 User。</li><br>
</ul><br><br><br>
<li> DOM型</li>
<ul style="font-size: 80%; list-style-type: katakana;">
<li>這種手法和反射型 XSS一樣，都需要使用社交工程釣魚的技巧，使 User 點擊 URL 攻擊才會生效。</li><br>
<li>Hacker 在 URL 輸入 DOM 物件，把物件嵌入網頁程式碼，範例：</li><br>
<pre class="language-txt"><code class="language-txt"><img src=# onerror=”alert(123)”></code></pre>
<br>
</ul><br><br><br>
<li> 儲存型 (Stored)</li>
<ul style="font-size: 80%; list-style-type: katakana;">
<li>與前兩種手法不同的是此種攻擊手法不需要使用社交工程釣魚的技巧，也能使 User 受到攻擊</li><br>
<li>攻擊的方式是 Hacker 將 Javascript 儲存在伺服器的資料庫中，進而引起使 User 遭受攻擊。</li><br>
<li>最常見的例子就是將 Javascript 注入留言板，當下一位 User 瀏覽網頁時，網頁會載入留言板的 Javascript 進而使 User 受到攻擊，範例如下：</li><br>
<pre class="language-txt"><code class="language-txt">我是壞人！ <script>alert(1);</script></code></pre>
<br>
<br>
</ul>
</ol>
</p>
</div>
</div><br><br><br>
<div class="container">
<div class="box" style="width: 55%;">
<h1 class = "title-a">防範方式</h1><br>
<br><br><br>
<p style="text-align: left;">
<ol style="font-size: 150%;text-align: left; list-style-type: katakana">
<li>做好欄位輸入的驗證與檢查，不論是前後端都應假設輸入是惡意且不可信任的，例如：URL、檔案上傳、表單欄位、留言板等。</li><br>
<li>文法與語意：應確認每個網頁表單輸入欄位是否為合理的資料類型與內容，例如：年齡的欄位在文法上應只接受0–9的數字，而語意上應確認此數字介於 0–120。</li><br>
<li>像上述所說明的任何輸入和其他難以定義文法的自由格式，都應該要經過編碼成為純字符串來處理，防止內容被當作程式碼執行，許多程式框架都有提供內建的編碼函式庫，可以依自己的慣用語言程式查找並多加利用。</li><br>
<li>絕對不要將使用者的輸入放入 註解、屬性名稱、標籤名稱 等，因為這些位置都能將字符串作為程式碼運行
另外，於伺服器上可作以下設定增強瀏覽器的防護：</li><br>
<ul style="font-size: 80%;">
<li>對 cookie 設定 HttpOnly 的屬性，確保程式碼沒有存取權</li><br>
<li>設定內容安全策略（CSP）的標頭，明確定義允許瀏覽器在該頁面上加載的內容來源，涵蓋的類型包括 JavaScriptCSS、HTML框架、字體、圖片和可嵌入對象，例如 Java applet、ActiveX等。</li><br>
</ul>
</ol>
</p>
</div>
</div>
<p style="text-align: right"><a href="#sim">模擬</a><br><br>
返回top <a href="#top"><img src="img/caret-quare-up.png" alt=""></a>
</p>
<br><br><br>
<footer>
<p>
相關新聞: <a target="_blank" href="https://www.ithome.com.tw/news/139205">Meetup安全漏洞可讓駭客接管社團以及金流</a><br>
Reference: <a target="_blank" href="https://tech-blog.cymetrics.io/posts/jo/zerobased-cross-site-scripting/">零基礎資安系列（二）-認識 XSS（Cross-Site Scripting）</a>
</p>
<p><small>
<font size="5" face="serif">Takeda <br><a rel="license" href="http://creativecommons.org/licenses/by-nc/3.0/tw/"><img alt="創用 CC 授權條款" style="border-width:0" src="https://i.creativecommons.org/l/by-nc/3.0/tw/88x31.png" /><a href=""></a><br>2021</font>
</small></p>
<font size="10">
<span style="font-family: 'Mr De Haviland', cursive;">Takeda NaNa</span>
</font>
</footer>
</body>
</html>