SecLab — Demo Concept

Vì sao là mermaid, không phải ảnh

Sơ đồ dạng chữ nằm trong diff, nên editor duyệt bản sửa thấy được hình đã đổi gì; sửa một nhãn sai là sửa một chữ, không phải xin lại tệp gốc; chữ trong sơ đồ tìm được bằng ⌘K và đọc được bằng screen reader; và nó theo theme sáng/tối của site. Một tấm PNG không làm được cái nào trong bốn cái đó.

Kèm theo: ảnh từ ngoài bị chặn vì bait-and-switch — duyệt một ảnh sạch rồi đổi tệp trên server của mình sau khi bài đã publish là vòng qua toàn bộ cổng duyệt bằng một lệnh scp.

Luồng dữ liệu — dùng cho bài kinh nghiệm và bài sự cố

Nguồn sơ đồ

flowchart LR  U[Người dùng] --> A[API]  A -->|"fetch(url) không kiểm"| M[169.254.169.254]  M -->|"credentials tạm"| A

SSRF vào metadata endpoint: chỗ sai là API tin URL do người dùng gửi.

Nhãn có ký tự đặc biệt thì bọc trong dấu ngoặc kép: A[Client] -->|"fetch(url)"| B. Không bọc thì mermaid báo lỗi cú pháp và trang rơi về khối nguồn.

Trình tự thời gian — bài sự cố

Nguồn sơ đồ

timeline  title Rò khoá qua log của CI  09:12 : Phát hiện qua alert của GitHub  09:40 : Xoay khoá, khoá artifact  11:05 : Quét lại toàn bộ artifact cũ  14:00 : Hậu kiểm, thêm bước quét trước upload

Bốn mốc, và mốc cuối là mốc duy nhất sửa được nguyên nhân.

Trao đổi giữa các bên — luồng token, callback, webhook

Nguồn sơ đồ

sequenceDiagram  participant B as Browser  participant W as Web (BFF)  participant A as API  B->>W: POST /auth/login  W->>A: /v1/auth/login  A-->>W: access + refresh  W-->>B: Set-Cookie (HttpOnly)  Note over B,W: Token không bao giờ tới browser

Refresh token nằm server-side; browser chỉ có cookie.

Trước / sau khi vá — bài bản vá

Nguồn sơ đồ

flowchart TD  subgraph Trước    A1[GET /orders/42] --> B1[Không kiểm chủ sở hữu] --> C1[Đơn của người khác]  end  subgraph Sau    A2[GET /orders/42] --> B2["WHERE user_id = @subject"] --> C2[404]  end

BOLA và bản vá của nó. 404 chứ không 403: 403 xác nhận rằng id đó tồn tại.

Bốn lỗi thường gặp

Lỗi	Nó trông như	Sửa
Thiếu khai loại sơ đồ	Khối rỗng, "No diagram type detected"	Dòng đầu phải là `flowchart LR`, `sequenceDiagram`, `timeline`…
Nhãn có `(`, `:`, `,` chưa bọc	"Parse error on line N"	Bọc nhãn trong `"…"`
Mũi tên sai	Không vẽ được	`-->` cho flowchart, `->>` cho sequence
Thiếu `end`	Lỗi ở dòng cuối	Mỗi `subgraph` cần một `end`

Ba trần, và một cảnh báo

Tối đa 10 sơ đồ một bài, 120 dòng một sơ đồ, và render có timeout 2 giây: một sơ đồ

5000 dòng làm treo tab của người đọc, và nó sẽ được thử.

Chỉ thị click và href của mermaid bị loại — đó là script và link injection đi qua cửa

sau của một khối "sơ đồ".

Sơ đồ nên có một dòng chú thích ngay dưới. Đó là bản mô tả bằng chữ cho người không thấy

được hình, và cũng là thứ vào được index tìm kiếm. Thiếu nó thì lint cảnh báo, không chặn.