ceshiya
1.0.0
純粋なフロントエンドインタラクティブネットワークセキュリティセキュリティセルフスタディネットワークは、ネットワークセキュリティの専門家になるのに役立ちます！
プログラマーフィッシュスキンによって
オンラインエクスペリエンス：http：//ceshiya.yupi.icu
デモビデオ：https：//www.bilibili.com/video/bv1y14y1175y/
完全に無料のインタラクティブなネットワークセキュリティセキュリティの自己学習WebサイトであるTest Duck（Test Duck）は、崩壊のために攻撃されたインタビューの質問をするWebサイト（Test Duck）でした。
従来の教育ウェブサイトとは異なり、ユシュはウェブサイトの攻撃からの経験とレッスンに基づいて、ウェブサイトに30以上の抜け穴を設定しました！誰もがこれらの脆弱性を発見し、無料の探索とさまざまなヒントを通じてウェブサイトで攻撃を引き起こす必要があります。
ウェブサイト開発の初心者である学生は、さまざまな小さな問題のためにウェブサイトを攻撃する傾向があり、心理的および経済的損失を引き起こします。
このウェブサイトを通じて、誰もがネットワークセキュリティの重要性を認識し、ウェブサイトを開発する際にセキュリティ保護の認識を改善できることを願っています。
この知識を学ぶことは、より良い防止であり、違法で悪を犯すためにテクノロジーを使用しないことです！
1）初めてホームページを入力すると、初心者ガイドが自動的にポップアップして、このウェブサイトを攻撃する方法を教えます。ガイドに従って、[次へ]をクリックします。
2）ページ上のボタンまたは入力ボックスには、隠された秘密がある場合があります。たとえば、「お気に入りの」ボタンを必死にクリックしても、システムに反応する機会が与えられず、バグが表示されます。
バグを見つけるたびに、ウェブマスターの魚の肌の血まみれの値は急速に上昇し、魚の肌から与えられた小さな知識ポイントと、高解像度のない無修正の魚の肌のスリラーも見ることができます。合計5枚の写真があると言われています。それらを収集した後、ドラゴンは召喚されないかもしれませんが、魚の肌はお茶を飲むように誘います。
3）右下隅にあるツールキットを介してウェブサイトを攻撃するのを手伝うことができます。
たとえば、上の写真のリクエストツールは、フロントエンドインターフェイスをバイパスし、Webサイトの背景から直接データを取得するのに役立ちますか？
4）右下隅にあるバグアイコンをクリックして、スコアを表示したり、バグを見つけたり、プロンプトを取得したり、ランキングを表示したりできるゲームパネルをポップアップします。
プロジェクトは純粋なフロントエンドで実装されているため、プロジェクトをローカルで開始するのは非常に簡単です！
多くのオンライン訪問者がいて、utter音を立てている可能性があるため、ローカルで使用することをお勧めします〜
1）このプロジェクトのコードをダウンロードします
2）プロジェクトルートディレクトリを入力し、 npm installを実行してプロジェクトの依存関係をインストールします
3） npm run devローカルスタートアップを実行します
完全なインタビュー質問を解決するウェブサイトのフロントエンド
30以上のインタラクティブバグレベル
ゲームツールボックス
ゲームパネル
このプロジェクトは、純粋なフロントエンドを使用して実装されており、バックエンドのフロントエンドの知識を必要としません〜
Q：なぜ純粋なフロントエンドの実装を使用するのですか？
A：ウェブサイトは、フロントエンドの相互作用に焦点を当てており、バックエンドストレージは必要ありません。また、攻撃のリスクを減らし、お金を節約することもできます
このWebサイトは、完全なフロントエンドプロジェクトのインタビューから変換された純粋なフロントエンドのWebサイトです。ここでは、一般的なWebサイトの変革プロセスを共有します。行うプロジェクトをインタラクティブな教育Webサイトに変えることができます。
手順は次のとおりです。
1）フロントエンドページの開発を完了します（すでにプロジェクトがある場合、このステップはデフォルトで完了しています）
2）ページデータ静的：人間によって書かれた偽のデータを保存する模擬ディレクトリを作成します。次に、バックエンドと対話するすべてのサービスレイヤーコードを操作に変換し、モックディレクトリで偽のデータを取得します。
3）ゲームメカニズムの作成：特定の実装方法については以下を参照してください
まず、コンポーネント化のアイデアに従って、ゲーム関連のすべてのコードをgamesディレクトリにカプセル化し、既存のビジネスコードに直接侵入するのではなく、フロントエンドページの紹介用のGameBoxコンポーネントを提供します。
ユーザーが特定の操作を実行した後に、対応するレベルをトリガーして完了する方法は？
ここで採用されている実装のアイデアは、フロントエンド監視事業の「埋葬ポイント」に似ています。
まず、 gameUnit.ts （ここではユニットユニットと呼ばれる）でゲームのレベルを定義します。サンプルコードは次のとおりです。
/**
* 游戏单元类型
*/
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通知を報告する関数も提供します。パラメーターは、上記で定義されたレベル単位のキーです。この関数では、現在のユーザーのパスステータスが変更され、ポップアッププロンプトが与えられます。
サンプルコードは次のとおりです。
/**
* 完成游戏
* @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ディレクトリに別のページとして保存されます。
私たちはあらゆる種類のヒーローが貢献に参加し、他の人と自分自身に利益をもたらすことを歓迎します〜
推奨される貢献方法：新しいゲームユニット（公式カード）を追加し、システムバグを修正し、ネットワークセキュリティの知識ポイントを補完します。貢献していただきありがとうございます。
読んでくれてありがとう、そして著者のプログラミングラーニングサークルに参加して、より多くのオリジナルプロジェクトを学ぶことを歓迎します〜
