Web Security

Web Security
Docker

payload 可以參考這個網站
Web CTF Cheatsheet

What is a website?

一般我們看到的網頁是由 HTML、JavaScript 以及 CSS 組成的
當你到一個網站時，實際上是向一個伺服器發起 HTTP 請求，並以此獲得資源
而瀏覽器則會 render 得到的 HTML 及 CSS
並執行裡面的 JavaScript

Frontend

在網頁開發中，我們會將使用者可以看到並且操作的部分稱為前端，這部分是由 HTML/CSS/JavaScript 組成的
透過瀏覽器的開發者工具(F12)，我們可以看到原始碼

主控台(console)，可以執行 JavaScript
來源(source)，此頁面所用到的所有 HTML、CSS、JavaScript 或是圖片等
網路(network)，紀錄此頁面所發起的所有連線
應用程式(application)，存放此頁面的 Cookie 以及 LocalStorage

HTML

HTML(超文本標記語言) 是用來表示網頁架構的語言，本身雖然不具有任何執行的能力，但是可以在裡面擺放 <script> 標籤來讓瀏覽器執行 JavaScript
~~但加上 CSS 可以達成圖靈完備~~

同時一些如 <img> 或是 <iframe> 等標籤會讓瀏覽器向伺服器發起 HTTP 請求來取得圖片或是其他資源
瀏覽器會以 DOM tree 的形式來對應 HTML 的元素，使得 CSS 可以透過標籤、class 或是 id 來對元素附加 style(樣式)
同時也讓 JavaScript 可以來操控 HTML 的元素

<!DOCTYPE html>
<html>
    <head>
        <title>My Link</title>
        <link rel=stylesheet type="text/css" href="index.css">
    </head>
    <body>
        <img class="bg-img" src="https://myimage.com">
        <div class="content">
            <div class="box">
                hihi
            </div>
        </div>
    </body>
    <script>
        console.log(123)
    </script>
    <style>
        .content {
            width: 300px;
            justify-content: center;
            display: flex;
            align-items: center;
        }
    </style>
</html>

每一個標籤都可以含有多個屬性，而某些標籤的某些屬性可以註冊事件，使得在觸發某些事件時執行 JavaScript(按下按鈕、送出表單)

<button class="btn" onclick='alert(1)'>
<img id="my-img" src='https://imgur.com/123' onload='console.log(1)'>

JavaScript

Image Not Showing Possible Reasons

The image was uploaded to a note which you don't have access to
The note which the image was originally uploaded to has been deleted

Learn More →

JavaScript 是一個~~自由的語言~~被設計用來操縱網頁的語言，可以透過瀏覽器提供的 API 來操縱網頁的 DOM 或是發起 HTTP 請求
他也是一個以 prototype (原型鍊)來實作物件導向的弱型別語言
而以 Google v8 來實作的 Node.js 也使得它可以脫離瀏覽器的環境來運作

MDN JavaScript

// 選取一個 id 為 my-element 的元素，並將他的文字設為 hello
const a = document.querySelector('#my-element')
a.innerText = 'hello'

fetch

https://developer.mozilla.org/zh-TW/docs/Web/API/Fetch_API

最早的時候，瀏覽器要發送請求只能透過網址或是發送表單，所以每次更動頁面都必須重新載入
後來 Google 開始使用 AJAX，使得網頁可以透過 JavaScript 來發送請求，並以此來動態的改變網頁

fetch 為現今瀏覽器提供的 API，比起以往的 XMLHttpRequest 介面好用許多

fetch('https://example.com',{
    method:'POST',
    header:{
        'Content-Type':'application/json'
    },
    body: JSON.stringify(myobject)
})

cookie 常被用來存放一些資訊，例如

Session
Token
狀態
追蹤資訊

而前端可以使用 JavaScript 來設置 cookie，或是使用 devtool 的 application 頁面來設置

document.cookie = "username=Asuna";
//or
//Chrome api
cookieStore.set('admin',true)

後端要設置 cookie 則是透過 Set-Cookie 標頭

HTTP/1.1 200 OK
...
Set-Cookie: session=deadbeef;
...

而瀏覽器發起請求時，便會將這些 cookie 帶入 Cookie 標頭裡

GET / HTTP/1.1
...
Cookie: session=deadbeef;
...

cookie 同時也有不同的屬性，來決定瀏覽器要怎麼處理 cookie

HttpOnly 前端的 JavaScript 不能操作這個 cookie
Domain cookie 存放的網域
Expire cookie 什麼時候過期
Secure 此 cookie 只能在 https 下存放

MDN Cookies

Backend

負責處理請求以及請求的資料，可以由幾乎所有程式語言來撰寫
現代常用的 HTTP Server 或是框架都有針對不同路徑執行不同函式的功能

Nginx 現代主流的 Web Server
Apache 老牌的 Web Server
Flask Python 的後端框架
Express Node.js 的後端框架
PHP ~~世界上最好的語言~~

HTTP

HTTP 請求是前後端溝通的手段
一個 HTTP 請求會分成三個部分

request line 這會在請求的第一行，說明此請求的方法(method)、路徑(path)以及版本
request header 請求的標頭，可包含許多訊息，包括 Cookie 或是使用者使用的客戶端
request body 請求攜帶的資料，不一定需要

一個 HTTP 請求的範例長這樣

GET / HTTP/1.1
Host: google.com
User-Agent: curl/7.68.0
Accept: */*

request line 以及 header 的每一行會用 \r\n 來隔開

Request Line

GET      /     HTTP/1.1
 ^       ^       ^
method  path   version

一般來說請求方法只會用到 GET 跟 POST
分別代表獲取以及上傳的意思
其他還有較不常用的 PUT、OPTION、HEAD 等
這部分其實完全可以自定義，只要後端有對應的 route 即可
有些開發者會依照 REST 的設計方法讓每個 API 的 method 都是更為精確的 PUT 或是 OPTION 之類的
可參考 : https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods

請求路徑則是 URL 的一部分
但是還可以使用 ? 來提供參數
/foo/bar?dead=beef&id=123
若是在請求路徑裡含有特殊字元(如 ascii 0x00~0x19 或是中文)
我們可以使用 url encoding，也就是以 hex 來表達該字元
/%41%42%43

Request Header

Host: google.com
User-Agent: curl/7.68.0
Accept: */*

HTTP 標頭會攜帶封包的資訊，像是我們常聽說的 Cookie 之類的
而因為 HTTP 是無狀態的 (Stateless)，所以 header 所攜帶的訊息非常重要

HTTP Response

HTTP/1.1 200 OK
Server: nginx/1.18.0 (Ubuntu)
Date: Fri, 15 Sep 2023 02:34:04 GMT
Content-Type: text/html; charset=utf-8
Content-Length: 22511

response 跟 request 的格式差不多相同
不同的點在於第一行會改而顯示 HTTP 狀態碼
像是 200 就是 OK，而我們常見的 404 就是無此頁面的意思
同時 request 跟 response 所使用的 header 也不盡相同

MDN HTTP Header
MDN HTTP Status

Lab

使用 Curl 或是 BurpSuite 來觀察 HTTP 封包
curl https://www.google.com -v

Rookie Vulnerable

SQLI(SQL Injection)

SQL 是非常常使用的資料庫語言，可說是現代資料庫的基石
他可以用來操作關聯式資料庫(RDBMS)，也就是用表格型式來儲存資料的資料庫
這些表格被稱為 table
每一個欄位被稱為 column
而每一項資料被稱為 row

id	user	password
1	Heathcliff	047463c04d2c12909efbbc71fb170efd
2	Kirito	8699314d319802ef792b7babac9da58a

select * from users where user = 'Kirito' and password = '8699314d319802ef792b7babac9da58a'
--     ^        ^              ^
--  columns   table         condition

在 condition 的部分我們通常會讓使用者來提供輸入
但若沒檢查用戶輸入會發生非常嚴重的後果
假如使用者在 user 欄位輸入 Healthcliff' or '1'='1';--
則查詢的語句就會變成

select * from users where user = 'Healthcliff' or '1'='1';--' and password = 'something'

Union base

但是上述語句只有在登入的情況才能使用
我們能否透過其他查詢語句來將整個資料庫 dump 下來?
這時候就可以用到 union 關鍵字
假如我們有下列的 table

id	book	author	rating
1	Lord of the Rings	J. R. R. Tolkien	5
2	Sword Art Online	Kawahara Reki	3

而有一個 query 長這樣

select * from books where book = 'Lord of the Rings'

union 便可以用來查詢另一個 table，並且跟原本的結果合併
要注意的是透過 union 查詢的另一個 select 語句的 column 數必須與原本的一樣
若不足的可以補 null、字串或是數字
有些 DBMS 除了 column 數要相同外，還會要求資料型態相同，可以使用 null 就好

select * from books where book = 'Lord of the Rings' union select *,null from users;

Boolean base

更常的一些情況是 query 查詢的結果不會直接顯示在頁面上
但是仍然能透過其他資訊來判斷是否查詢成功，像是登入成功與否之類的
而這時我們便可以使用 SQLI 裡的 if else 並搭配二分搜來將要搜尋的東西一個字一個字的爆出來

-- i = 1
-- mid = (l+r)/2
-- 用{}包起來不是合法 sql 語句，這樣弄只是避免看起來太長
... and if((select ascii(substring(password,{i},{i}))<={mid} from users where user='admin'),true,false);--

Metadata table

每種 SQL 資料庫都會有專門的 table 去存放所有 table 以及 column 的名稱
若你不知道你要撈的目標表名，則需要先從這些 table 將目標表明撈出來

sqlite_master SQLite
information_schema MySQL
pg_database pg_tables PostgreSQL

How to prevent?

最佳解法就是使用 prepare statement 或是使用 ORM，來避免直接串接字串
自己去過濾關鍵字，可能會有漏網之魚，還不如用別人提供的

db.get('SELECT * FROM Users WHERE username = ?', username)

XSS(Cross-Site Scripting)

前端使用 HTML、CSS 以及 JavaScript 來 render 頁面
但若直接把用戶的輸入不加以過濾便插入至頁面上，就會造成 XSS(Cross-Site Scripting)

雖然 XSS 的形式有分很多種，但最常見的成因只有兩個

前端的 JS 使用到 innerHTML 來植入用戶提供的內容
後端在 render 模板時沒有 escape 用戶提供的內容

而受到 XSS 攻擊的網站會使得攻擊者能獲得其他用戶的 Cookie，造成能獲得其他使用者的敏感資訊，或是成為管理員

而若受到 XSS 攻擊的是使用 Electron 的應用程式，則也有機會能造成 RCE

一些常見的 payload

<img src=# onerror="alert(1)">
<svg/onload="alert(1)">
<button onclick="alert(1)">

瀏覽器的同源政策 (Same-Origin Policy) 會限制網頁只能去存取同個網頁的資源，除了路徑以外，協定(protocol)、網域(domain)以及埠口(port)都必須相同
而如果要去獲取別的網站的資源(api、CSS、JavaScript)，瀏覽器提供一個叫做 CORS 的機制
本質上就是只要該網站的回應包含 CORS 標頭就允許存取
Access-Control-Allow-Origin: *

MDN CORS

CSP

How to prevent?

通常會將 HTML 轉譯成 HTML Entity 來將 HTML 轉成純字串顯示
不要隨意使用 innerHTML
若是要有多功能的文字編輯(如用戶發文可以附圖片、超連結等)
一定要使用如 Dompurify 等過濾函式庫來處理用戶的輸入

若是有其他需求，如使用到 iframe 的 srcdoc 或是讓用戶可以上傳並檢視 SVG 等，也需要去使用 CSP 做好防護

Miss Configuration

Information Leak

有些檔案可能會帶有敏感資訊，同時網站開發者沒限制存取

robots.txt
.git
.htaccess
.well-known
package.json

Other Vulnerable

Arbitrary Read/Write

有些網站可能會將使用者的輸入拼接到路徑之上，並且讀取該路徑的檔案
這時候便可以讀取諸如原始碼或是環境變數等檔案

open(f'/tmp/userdir/{file}')
# file = ../../etc/passwd
open('/tmp/userdir/../../etc/passwd')

/etc/passwd
/proc/self/cmdline
/proc/self/fd/[0-9]
/proc/self/environ
/etc/nginx/nginx.conf
/etc/apache2/httpd.conf
…

Local File Inclusion

在一些特殊的語言如 PHP，可以在執行時去動態 include 外部的腳本
這時若能改變所 include 的檔案，則就有辦法達成 RCE

Template Injection

SSRF

Prototype Pollution

Unsafe Deserialization

Docker

在打 Web 題的時候，出題者通常會提供 Dockerfile 來讓參賽者可以在自己的電腦把環境架起來
Docker 其實就是一種 KVM 的應用，可以透過設定檔來定義虛擬容器的內容
容器化的技術可以讓服務在更精簡的環境運行，同時擴展性以及開關速度都比以往的虛擬機器還要好

Docker 的架構主要有三個

Dockerfile 決定 Image 如何去構建
Image 決定 Container 開啟時會長怎樣，可以直接從官方倉庫抓下來別人構建好的
Container 運作時的實體，每個 container 都互相獨立

Install Docker

Ubuntu 可以直接輸入 sudo apt-get install docker
Windows 及 MacOS 則是下載 Docker Desktop
MacOS 還可以使用 OrbStack 作為替代方案

Dockerfile

Docker 可以使用 Dockerfile 來做好一個虛擬容器的配置
包括安裝套件或是複製原始碼
同時他也是一層一層的結構，也就是說每個 Dockerfile 都會是基於另一個 Dockerfile 去做配置

# 基於 node 20 alpine 的環境
FROM node:20-alpine

# 將工作目錄設成容器裡的 /app
WORKDIR /app

# 將檔案及目錄複製過去
COPY package.json ./
COPY package-lock.json ./
COPY views ./views
COPY public ./public
COPY app.js ./

# 安裝套件
RUN npm install

# 容器啟動時要使用的指令
CMD ["node", "app.js"]

當寫好 Dockerfile 時，我們可以使用 docker build -t . 來將對應的 image 建構出來
而 Dockerfile 的內容則會在 build 時執行完畢
接著便能使用 docker run 來啟動容器

$ docker run -d --name web -p 8080:80 image
# -d 背景執行
# -p port 轉發
# image 你的 image 的名稱

Docker compose

如果每次重新啟動容器都要重打參數會很麻煩，雖然可以自行寫 shell script 來自動化
但是官方提供了 docker compose 來使用 yaml 設定檔一次管理多個容器

docker-compose.yml

# 版本
version: "3.7"
services:
    minecraft:
        # 要使用的 image
        image: itzg/minecraft-server
        # 容器名稱
        container_name: minecraft
        # 容器裡的環境變數
        environment:
            EULA: "TRUE"
            TYPE: "FABRIC"
            ENABLE_COMMAND_BLOCK: "true"
            ONLINE_MODE: "false"
            DIFFICULTY: "hard"
            VERSION: "1.20"
            VIEW_DISTANCE: 14
            TZ: "Asia/Taipei"
        # 使容器裡的目錄或檔案映射到 host 的目錄或是檔案，讓容器關閉後資料仍然能留存
        volumes:
            - ./minecraft:/data
        # port 轉發
        port:
            - "25565:25565"

要啟動便在同一個目錄底下輸入

$ sudo docker compose up -d

如果是舊版則是

$ sudo docker-compose up -d

Web Security

What is a website?

Frontend

HTML

JavaScript

fetch

cookie

Backend

HTTP

Request Line

Request Header

HTTP Response

Lab

Rookie Vulnerable

SQLI(SQL Injection)

Union base

Boolean base

Metadata table

How to prevent?

XSS(Cross-Site Scripting)

CORS(Cross-Origin Resource Sharing)

CSP

How to prevent?

Miss Configuration

Information Leak

Other Vulnerable

Arbitrary Read/Write

Local File Inclusion

Template Injection

SSRF

Prototype Pollution

Unsafe Deserialization

Docker

Install Docker

Dockerfile

Docker compose

Read more

IND DNS Server

CTF簡介/Linux 操作

2023/9/3 會議記錄

IND網路概論 2023