ceshiya
1.0.0
تساعدك شبكة الدراسة الذاتية ذاتية الشبكة التفاعلية في الواجهة الأمامية على أن تصبح خبيرًا في أمان الشبكة!
بواسطة برمجة الأسماك بشرة
الخبرة عبر الإنترنت: http://ceshiya.yupi.icu
الفيديو التجريبي: https://www.bilibili.com/video/bv1y14y1175y/
Test Duck (Test Duck) ، وهو موقع تعليمي تفاعلي للدرس الذاتي للدراسة الذاتية ، كان سابقتها موقعًا على شبكة الإنترنت لمقابلته (Test Duck) تم الهجوم على الانهيار.
على عكس مواقع التدريس التقليدية ، وضع يوشي أكثر من 30 حفرة على الموقع الإلكتروني بناءً على تجربته ودروسه من هجوم الموقع! يحتاج الجميع إلى اكتشاف هذه الثغرات الأمنية والتسبب في هجمات على الموقع من خلال الاستكشاف المجاني ونصائح مختلفة ، وذلك لتعلم معرفة أمان الشبكة في القتال الفعلي ، وهو أمر سهل وممتع ~
الطلاب المبتدئون في تطوير موقع الويب عرضة لمهاجمة الموقع بسبب مختلف المشكلات الطفيفة ، مما يسبب خسائر نفسية واقتصادية.
من خلال هذا الموقع ، آمل أن يتمكن الجميع من إدراك أهمية أمان الشبكة وتحسين الوعي بحماية الأمان عند تطوير مواقع الويب.
تعلم هذه المعرفة هو منع التقنية بشكل أفضل ، وعدم استخدام التكنولوجيا لارتكاب غير قانوني وشر!
1) عند إدخال الصفحة الرئيسية لأول مرة ، سيظهر دليل مبتدئ تلقائيًا لتعليمك كيفية مهاجمة هذا الموقع. اتبع الدليل وانقر فوق التالي.
2) قد يكون لأي زر أو مربع إدخال في الصفحة أسرارًا مخفية. على سبيل المثال ، لا يمنح النقر فوق الزر "المفضل" بشكل محموم النظام فرصة للرد ، ثم يظهر خطأ.
كلما وجدت خللًا ، سترتفع قيمة بطة الدم لجلد أسماك المشرف بسرعة ، ويمكنك أيضًا رؤية نقاط المعرفة الصغيرة التي تقدمها بشرة الأسماك ، بالإضافة إلى إثارة جلد الأسماك العالية غير الخاضعة للرقابة. يقال أن هناك 5 صور في المجموع. بعد جمعها ، قد لا يتم استدعاء التنين ، لكن جلد السمك سوف يدعوك إلى تناول الشاي.
3) يمكنك مساعدة نفسك على مهاجمة موقع الويب من خلال مجموعة الأدوات في الزاوية اليمنى السفلى:
على سبيل المثال ، يمكن أن تساعدك أداة الطلب في الصورة أعلاه في تجاوز الواجهة الأمامية والحصول على بيانات مباشرة من خلفية الموقع؟
4) انقر فوق أيقونة الأخطاء في الزاوية اليمنى السفلية لإطفاء لوحة اللعبة ، والتي يمكنها عرض النتيجة ، أو الأخطاء التي تم العثور عليها ، والحصول على مطالبات ، وعرض تصنيفك ، إلخ.
نظرًا لأن المشروع يتم تنفيذه مع الواجهة الأمامية الخالصة ، فمن السهل جدًا بدء المشروع محليًا!
هناك العديد من الزوار عبر الإنترنت وقد يتم تأثرهم ، لذلك يوصى باستخدامه محليًا ~
1) قم بتنزيل رمز هذا المشروع
2) أدخل دليل جذر المشروع وتنفيذ npm install لتثبيت تبعيات المشروع
3) تنفيذ بدء التشغيل المحلي npm run dev
إكمال موقع مقابلة في مقابلة المواقع الأمامية
30+ مستويات الأخطاء التفاعلية
أدوات اللعبة
لوحة اللعبة
يتم تنفيذ هذا المشروع باستخدام واجهة أمامية خالصة ، ولا يتطلب أي معرفة أمامية من الواجهة الخلفية ~
س: لماذا تستخدم تنفيذ الواجهة الأمامية النقية؟
ج: يركز موقع الويب أكثر على التفاعل في الواجهة الأمامية ولا يتطلب تخزينًا خلفيًا ؛ يمكن أن يقلل أيضًا من مخاطر الهجوم + توفير المال
هذا الموقع هو موقع ويب نقي في الواجهة الأمامية تم تحويله من مقابلة كاملة للمشروع الأمامي. هنا نشارك عملية تحويل الموقع العام. يمكنك محاولة تحويل المشاريع التي تقوم بها إلى موقع تدريس تفاعلي.
الخطوات كما يلي:
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 gameState.tsx Gamestate Gamestate.
/**
* 游戏全局状态类型
* @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 لتحديد ما إذا كنت بحاجة إلى عرض الأحذية عند إدخال اللعبة لأول مرة.
رمز طور bootstrap عينة كما يلي:
const [ steps ] = useState ( [
{
title : '欢迎来到测逝鸭 ?' ,
intro : '这是一个锻炼你网络安全能力的破站，准备好旅程了么？???' ,
position : 'top' ,
} ,
{
title : '目标 ' ,
intro :
'你要做的就是运用你的智慧和强大的洞察力，尽可能多地发现并利用该网站的 Bug、对网站造成破坏！?' ,
nextLabel : '应该的应该的' ,
} ,
...
] ToolBox.tsx هي في الأساس صفحة تدمج طرق تمرير محددة ، والتي تعتبر تطوراً مخصصًا. يتم تخزين كل أداة كصفحة منفصلة في دليل tools .
نرحب بجميع أنواع الأبطال للمشاركة في المساهمات والاستفادة من الآخرين ونفسهم ~
طرق المساهمة الموصى بها: أضف وحدات ألعاب جديدة (البطاقات الرسمية) ، إصلاح أخطاء النظام ، وتكملة نقاط معرفة أمان الشبكة. شكرا لك على مساهمتك.
شكرًا لك على القراءة ، ومرحبا بكم للانضمام إلى دائرة تعلم البرمجة للمؤلف لمعرفة المزيد من المشاريع الأصلية ~
