喜大普奔，魚皮的靶場開源了~

魚皮自制互動式網路安全自學網，助你成為網路安全達人！

大家好，我是鲏。

據說互聯網是沒有記憶的，那不知道大家是否還記得，很久很久以前，我有一個網站叫 。這個網站上線之初，遭受了各種各樣的網路攻擊，也一度給我的心態造成了巨大的影響。

在很多網友看來網站攻擊只是個玩笑，但只有站長本人才知道那種無力和痛苦。

經歷過網站攻擊後，更加意識到網路安全意識的重要性，所以當時我做了一個幫助大家學習網路安全的免費網站 —— 測試（逝）鴨。

這個網站可不是傳統的教程網站，掛個課、掛個電子書就結束了，而是一個 互動式 自學網站。魚皮結合自己遭受網站攻擊的經歷和教訓，給網站設定了 30 多個漏洞。

大家需要透過自由探索和種種提示，發現這些漏洞並對網站造成攻擊 🦖，從而在實戰中學習到網路安全知識，主打一個輕松愉快！

有網友評論說：我建了個免費的靶場。

這麽說倒也對哈哈，不過可能沒那麽專業，更多地還是教學向。

我希望透過這個網站，大家都能意識到網路安全的重要性，並且在開發網站時提升安全防護意識。

記住！學習這些知識是為了更好地防範，而不要利用技術去違法作惡！！！

這兩天我在整理自己的程式碼，無意中又發現了這個計畫，覺得還是可以給大家學習的。

所以直接 100% 開源到 GitHub 上！再給大家一個免費的計畫。

下面給大家簡單介紹一下這個開源計畫。

線上體驗：http://ceshiya.yupi.icu

開源地址：https://github.com/liyupi/ceshiya

20 秒學會使用

1）第一次進入主頁時，會自動彈出新手引導，教你如何攻擊本網站，跟著引導點選下一步即可

2）頁面上的任何一個按鈕、任何一個輸入框都有可能暗藏玄機。比如瘋狂地點選 「收藏」 按鈕，不給系統反應的機會，然後 Bug 就出現了。

每當你找到一個 Bug，站長魚皮的血鴨值都會極速上升，並且你還可以看到魚皮給出的小知識點，以及一張魚皮的高畫質無碼發飆圖，據說總共有 5 張，集齊之後也許不能召喚神龍，但魚皮會請你喝茶。

3）可以透過右下角的工具包幫助自己攻擊網站：

比如上圖的請求工具，可以幫助你繞過前端界面，直接從網站後台獲取數據 🐓。

4）點選右下角的 Bug 圖示彈出遊戲面板，可以檢視得分情況、已發現的 Bug、獲取提示、檢視自己的排名等等。

1 分鐘本地啟動

由於計畫采用純前端實作，本地啟動計畫非常簡單！

線上存取人數較多，可能會卡頓，所以更推薦大家自己在本地使用~

1）下載本計畫程式碼

2）進入計畫根目錄，執行 npm install 安裝計畫依賴

3）執行 npm run dev 本地啟動即可

功能和特性

技術選型

本計畫采用 純前端實作 ，不需要任何後端的前置知識~

Q：為什麽采用純前端實作？

A：該網站更側重前端互動，無需後台儲存；同時也能減少攻擊風險 + 省錢

核心設計

1、網站改造流程

本網站是由一個完整前後端計畫 面試鴨 改造而成的純前端網站，這裏分享下通用的網站改造流程，大家可以嘗試把自己做的計畫也變成互動式教學網站。

步驟如下：

1）完整前端頁面開發（已有計畫的話這一步預設已完成）

2）頁面數據靜態化：建立 mock 目錄，存放人為編寫的假數據；然後將和後端互動的 service 層程式碼全部改造為操作和獲取 mock 目錄中的假數據。

3）建立遊戲機制：具體實作方式見下

2、遊戲機制實作

首先遵循元件化的思想，把所有和遊戲相關的程式碼封裝到 games 目錄中，並且提供一個 GameBox 元件供前端頁面引入，而不是直接侵入現有的業務程式碼：

怎麽實作在使用者執行了某個操作後，觸發完成對應的關卡呢？

這裏采用的實作思想類似於前端監控業務中的 「埋點」。

首先我們在 gameUnit.ts 中定義遊戲的關卡（此處稱為 unit 單元），範例程式碼如下：

/**
 * 遊戲單元型別
 */
exporttype GameUnitType = {
key: string;
desc: string;
type: string;
score: number;
knowledge: string;
no?: number; // 題號
href?: string; // 更多知識的連結
};
/**
 * 遊戲單元列表
 */
const GAME_UNIT_LIST: GameUnitType[] = [
{
key: 'favourInfinite',
desc: '收藏按鈕可以無限點選',
type: '邏輯漏洞',
score: 1,
knowledge: '網頁前端和後端都要對收藏狀態進行控制，防止收藏數異常',
},
{
key: 'thumbUpInfinite',
desc: '點贊可以無限點選',
type: '邏輯漏洞',
score: 1,
knowledge: '網頁前端和後端都要對點贊狀態進行控制，防止點贊數異常',
},
];

然後我們編寫一個全域遊戲狀態儲存檔 gameState.tsx ，用於記錄使用者已經完成的關卡、分數、遊戲配置等資訊：

/**
 * 遊戲全域狀態型別
 * @author https://yuyuanweb.feishu.cn/wiki/Abldw5WkjidySxkKxU2cQdAtnah yupi
 */
exporttype GameStateType = {
init: boolean; // 是否為初始化
score: number; // 當前分數
gameTip: boolean; // 是否開啟提示
succeedUnitList: string[]; // 已透過的關卡
};


並且提供一個上報過關通知的函式 doGameUnitSucceed ，參數為上面定義的關卡單元的 key，在該函式中改變當前使用者的過關狀態，並給出過關彈窗提示。

範例程式碼如下：

/**
 * 完成遊戲
 * @param key
 */
const doGameUnitSucceed = (key: string) => {
// 已經完成
if (gameState.succeedUnitList.includes(key)) {
return;
}
gameState.succeedUnitList.push(key);
const unit = GAME_UNIT_MAP[key];
gameState.score += unit.score;
setTimeout(() => {
Modal.success({
title: `太棒了，魚皮的血鴨又高了！😡 ${gameState.score - unit.score} +${unit.score}`,
content: ...,
okText: '繼續加油！',
});
}, 1000);
updateGameState(gameState);
};


之後，我們只需要在對應的頁面和功能程式碼中，增加一段過關邏輯，符合條件的話就呼叫 doGameUnitSucceed(關卡key) 過關通知函式，就能實作過關狀態的更新和通知了。

比如下面的程式碼，是在點贊功能中添加過關判斷邏輯：

const doThumbUp = async (id: string) => {
setThumbLoading(true);
const res = await thumbUpComment(id);
if (res === 1 || res === -1) {
comment.thumbNum = (comment.thumbNum ?? 0) + res;
// 點贊數 > 9 則過關
if (comment.thumbNum > 9) {
// 註意這行程式碼是關鍵，觸發過關
doGameUnitSucceed('thumbUpInfinite');
}
}
};


3、新手指引

引入 Intro.js 庫，在 GameBox 遊戲組建中定義引導階段，然後透過 LocalStorage 判斷是否首次進入遊戲需要展示引導即可。

範例引導階段程式碼如下：

const [steps] = useState([
{
title: '歡迎來到測逝鴨 🦆',
intro: '這是一個鍛煉你網路安全能力的破站，準備好旅程了麽？🧑🏻‍🦲',
position: 'top',
},
{
title: '目標 🎯',
intro:
'你要做的就是運用你的智慧和強大的洞察力，盡可能多地發現並利用該網站的 Bug、對網站造成破壞！🦖',
nextLabel: '應該的應該的',
},
...
]


4、工具箱實作

工具箱（ ToolBox.tsx ）本質上就是整合了特定過關方法的頁面，算是一種客製化開發。每種工具都作為單獨的頁面，存放在 tools 目錄下。

大概就介紹到這裏，更多的玩法大家感興趣的話可以自行探索，如果覺得計畫還不錯，也歡迎給個 star~

👇🏻 點選下方閱讀原文，獲取魚皮往期編程幹貨。

往期推薦