ceshiya
1.0.0
純前端實現的交互式網絡安全自學網，助你成為網絡安全達人！
By 程序員魚皮
在線體驗：http://ceshiya.yupi.icu
演示視頻：https://www.bilibili.com/video/BV1y14y1175y/
測試鴨（測逝鴨），一個完全免費的交互式網絡安全自學教程網站，它的前身是已經被攻擊到倒閉的面試刷題網（面試鴨） 。
和傳統的教學網站不同，魚皮結合自己遭受網站攻擊的經歷和教訓，給網站設置了30 多個漏洞！大家需要通過自由探索和種種提示，發現這些漏洞並對網站造成攻擊?，從而在實戰中學習到網絡安全知識，輕鬆愉快~
初學網站開發的同學很容易因為各種小的問題導致網站被攻擊，造成心理和經濟上的損失。
通過這個網站，希望大家都能意識到網絡安全的重要性，在開發網站時提升安全防護意識。
學習這些知識是為了更好地防範，而不要利用技術去違法作惡！
1）第一次進入主頁時，會自動彈出新手引導，教你如何攻擊本網站，跟著引導點擊下一步即可
2）頁面上的任何一個按鈕、任何一個輸入框都有可能暗藏玄機。比如瘋狂地點擊“收藏” 按鈕，不給系統反應的機會，然後Bug 就出現了。
每當你找到一個Bug，站長魚皮的血鴨值都會極速上升，並且你還可以看到魚皮給出的小知識點，以及一張魚皮的高清無碼發飆圖，據說總共有5 張，集齊之後也許不能召喚神龍，但魚皮會請你喝茶。
3）可以通過右下角的工具包幫助自己攻擊網站：
比如上圖的請求工具，可以幫助你繞過前端界面，直接從網站後台獲取數據?。
4）點擊右下角的Bug 圖標彈出遊戲面板，可以查看得分情況、已發現的Bug、獲取提示、查看自己的排名等等。
由於項目採用純前端實現，本地啟動項目非常簡單！
在線訪問人數較多，可能會卡頓，所以更推薦大家自己在本地使用~
1）下載本項目代碼
2）進入項目根目錄，執行npm install安裝項目依賴
3）執行npm run dev本地啟動即可
完整的面試刷題網站前端
30+ 交互式Bug 關卡
遊戲工具箱
遊戲面板
本項目採用純前端實現，不需要任何後端的前置知識~
Q：為什麼採用純前端實現？
A：該網站更側重前端交互，無需後台存儲；同時也能減少攻擊風險+ 省錢
本網站是由一個完整前後端項目面試鴨改造而成的純前端網站，這里分享下通用的網站改造流程，大家可以嘗試把自己做的項目也變成交互式教學網站。
步驟如下：
1）完整前端頁面開發（已有項目的話這一步默認已完成）
2）頁面數據靜態化：創建mock 目錄，存放人為編寫的假數據；然後將和後端交互的service 層代碼全部改造為操作和獲取mock 目錄中的假數據。
3）創建遊戲機制：具體實現方式見下
首先遵循組件化的思想，把所有和遊戲相關的代碼封裝到games目錄中，並且提供一個GameBox組件供前端頁面引入，而不是直接侵入現有的業務代碼：
怎麼實現在用戶執行了某個操作後，觸發完成對應的關卡呢？
這裡採用的實現思想類似於前端監控業務中的“埋點”。
首先我們在gameUnit.ts中定義遊戲的關卡（此處稱為unit 單元），示例代碼如下：
/**
* 游戏单元类型
*/
export type 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
*/
export type 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' ) ;
}
}
} ;引入Intro.js庫，在GameBox遊戲組建中定義引導階段，然後通過LocalStorage 判斷是否首次進入遊戲需要展示引導即可。
示例引導階段代碼如下：
const [ steps ] = useState ( [
{
title : '欢迎来到测逝鸭 ?' ,
intro : '这是一个锻炼你网络安全能力的破站，准备好旅程了么？???' ,
position : 'top' ,
} ,
{
title : '目标 ' ,
intro :
'你要做的就是运用你的智慧和强大的洞察力，尽可能多地发现并利用该网站的 Bug、对网站造成破坏！?' ,
nextLabel : '应该的应该的' ,
} ,
...
]工具箱（ ToolBox.tsx ）本質上就是集成了特定過關方法的頁面，算是一種定制化開發。每種工具都作為單獨的頁面，存放在tools目錄下。
歡迎各路好漢參與貢獻，利人利己~
推薦的貢獻方式：增加新的遊戲單元（官卡）、修復系統Bug、補充網絡安全知識點，感謝您的貢獻。
感謝閱讀，也歡迎加入作者的編程學習圈，學習更多原創項目~
