ceshiya
1.0.0
เครือข่ายความปลอดภัยของเครือข่ายแบบอินเทอร์แอคทีฟที่บริสุทธิ์ช่วยให้คุณเป็นผู้เชี่ยวชาญด้านความปลอดภัยเครือข่าย!
โดย Programmer Fish Skin
ประสบการณ์ออนไลน์: http://ceshiya.yupi.icu
วิดีโอสาธิต: https://www.bilibili.com/video/bv1y14y1175y/
Test Duck (Test Duck) เว็บไซต์การสอนการศึกษาด้วยตนเองแบบอินเทอร์แอคทีฟฟรีแบบโต้ตอบได้อย่างสมบูรณ์แบบก่อนหน้านี้เป็นเว็บไซต์สัมภาษณ์แบบสัมภาษณ์ (ทดสอบเป็ดทดสอบ) ที่ถูกโจมตีเพื่อล่มสลาย
ซึ่งแตกต่างจากเว็บไซต์การสอนแบบดั้งเดิม Yushe ได้ตั้งค่าช่องโหว่มากกว่า 30 ช่องบนเว็บไซต์ตามประสบการณ์และบทเรียนของเขาจากการโจมตีเว็บไซต์! ทุกคนต้องค้นพบช่องโหว่เหล่านี้และทำให้เกิดการโจมตีบนเว็บไซต์ผ่านการสำรวจฟรีและเคล็ดลับต่าง ๆ เพื่อเรียนรู้ความรู้ด้านความปลอดภัยของเครือข่ายในการต่อสู้จริงซึ่งเป็นเรื่องง่ายและน่าพอใจ ~
นักเรียนที่เป็นผู้เริ่มต้นในการพัฒนาเว็บไซต์มีแนวโน้มที่จะโจมตีเว็บไซต์เนื่องจากปัญหาเล็กน้อยต่าง ๆ ทำให้เกิดความสูญเสียทางจิตวิทยาและเศรษฐกิจ
ผ่านเว็บไซต์นี้ฉันหวังว่าทุกคนจะตระหนักถึงความสำคัญของความปลอดภัยของเครือข่ายและปรับปรุงการรับรู้การป้องกันความปลอดภัยเมื่อพัฒนาเว็บไซต์
การเรียนรู้ความรู้นี้คือการป้องกันได้ดีขึ้นและไม่ใช้เทคโนโลยีในการกระทำที่ผิดกฎหมายและชั่ว!
1) เมื่อคุณเข้าสู่หน้าแรกเป็นครั้งแรกคู่มือมือใหม่จะปรากฏขึ้นโดยอัตโนมัติเพื่อสอนวิธีโจมตีเว็บไซต์นี้ ทำตามคำแนะนำและคลิกถัดไป
2) ปุ่มหรือกล่องอินพุตใด ๆ ในหน้าอาจมีความลับที่ซ่อนอยู่ ตัวอย่างเช่นการคลิกที่ปุ่ม "โปรด" อย่างเมามันไม่ได้ให้โอกาสระบบตอบสนองและจากนั้นข้อผิดพลาดจะปรากฏขึ้น
เมื่อใดก็ตามที่คุณพบข้อผิดพลาดค่าเป็ดเลือดของผิวปลาเว็บมาสเตอร์จะเพิ่มขึ้นอย่างรวดเร็วและคุณยังสามารถเห็นจุดความรู้เล็ก ๆ น้อย ๆ ที่ได้รับจากผิวปลา ว่ากันว่ามีทั้งหมด 5 ภาพ หลังจากรวบรวมพวกเขามังกรอาจไม่ถูกเรียกตัว แต่ผิวปลาจะเชิญชวนให้คุณดื่มชา
3) คุณสามารถช่วยตัวเองโจมตีเว็บไซต์ผ่านชุดเครื่องมือที่มุมล่างขวา:
ตัวอย่างเช่นเครื่องมือคำขอในภาพด้านบนสามารถช่วยคุณข้ามส่วนต่อประสานส่วนหน้าและรับข้อมูลโดยตรงจากพื้นหลังเว็บไซต์?
4) คลิกไอคอนข้อผิดพลาดที่มุมล่างขวาเพื่อปรากฏขึ้นแผงเกมซึ่งสามารถดูคะแนนพบข้อบกพร่องรับพรอมต์ดูการจัดอันดับของคุณ ฯลฯ
เนื่องจากโครงการถูกนำไปใช้กับ Front-End บริสุทธิ์จึงเป็นเรื่องง่ายมากที่จะเริ่มโครงการในพื้นที่!
มีผู้เยี่ยมชมออนไลน์จำนวนมากและอาจพูดติดอ่างดังนั้นขอแนะนำให้คุณใช้ในพื้นที่ ~
1) ดาวน์โหลดรหัสของโครงการนี้
2) ป้อนไดเรกทอรีรูทของโครงการและดำเนินการ npm install เพื่อติดตั้งการพึ่งพาโครงการ
3) เรียกใช้งาน npm run dev Local Startup
การสัมภาษณ์คำถามการสัมภาษณ์คำถามที่สมบูรณ์
30+ ระดับบั๊กแบบโต้ตอบ
กล่องเครื่องมือเกม
แผงเกม
โครงการนี้ดำเนินการโดยใช้ Front-end ที่บริสุทธิ์และไม่ต้องการความรู้ด้านหน้าของส่วนหลัง ~
ถาม: ทำไมต้องใช้การใช้งาน Front-End บริสุทธิ์?
ตอบ: เว็บไซต์มุ่งเน้นไปที่การโต้ตอบส่วนหน้ามากขึ้นและไม่จำเป็นต้องมีที่เก็บข้อมูลย้อนกลับ นอกจากนี้ยังสามารถลดความเสี่ยงจากการโจมตี + ประหยัดเงิน
เว็บไซต์นี้เป็นเว็บไซต์ front-end ที่บริสุทธิ์จากการสัมภาษณ์โครงการ Front-End ที่สมบูรณ์ ที่นี่เราแบ่งปันกระบวนการแปลงเว็บไซต์ทั่วไป คุณสามารถลองเปลี่ยนโครงการที่คุณทำไปเป็นเว็บไซต์การสอนแบบโต้ตอบ
ขั้นตอนมีดังนี้:
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 : '网页前端和后端都要对点赞状态进行控制，防止点赞数异常' ,
} ,
] ; จากนั้นเราเขียนไฟล์การจัดเก็บสถานะเกม Global Game 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 ) ;
} ; หลังจากนั้นเราจะต้องเพิ่มตรรกะของ Pass หนึ่งชิ้นในหน้าและรหัสฟังก์ชันที่เกี่ยวข้อง หากเงื่อนไขตรงตามฟังก์ชันการแจ้งเตือน 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 Library กำหนดเวทีบูตในชุดเกม GameBox แล้วใช้ LocalStorage เพื่อพิจารณาว่าคุณจำเป็นต้องแสดงรองเท้าบู๊ตเมื่อเข้าสู่เกมเป็นครั้งแรกหรือไม่
ตัวอย่างรหัสเฟส bootstrap มีดังนี้:
const [ steps ] = useState ( [
{
title : '欢迎来到测逝鸭 ?' ,
intro : '这是一个锻炼你网络安全能力的破站，准备好旅程了么？???' ,
position : 'top' ,
} ,
{
title : '目标 ' ,
intro :
'你要做的就是运用你的智慧和强大的洞察力，尽可能多地发现并利用该网站的 Bug、对网站造成破坏！?' ,
nextLabel : '应该的应该的' ,
} ,
...
] ToolBox.tsx เป็นหน้าหลักที่รวมวิธีการผ่านที่เฉพาะเจาะจงซึ่งถือเป็นการพัฒนาที่กำหนดเอง แต่ละเครื่องมือจะถูกเก็บไว้เป็นหน้าแยกต่างหากในไดเรกทอรี tools
เรายินดีต้อนรับฮีโร่ทุกชนิดที่จะมีส่วนร่วมในการมีส่วนร่วมและเป็นประโยชน์ต่อผู้อื่นและตัวเอง ~
วิธีการบริจาคที่แนะนำ: เพิ่มหน่วยเกมใหม่ (การ์ดอย่างเป็นทางการ), แก้ไขข้อบกพร่องของระบบและเสริมจุดความรู้ด้านความปลอดภัยของเครือข่าย ขอบคุณสำหรับการบริจาคของคุณ
ขอบคุณสำหรับการอ่านและยินดีต้อนรับสู่การเข้าร่วมวงกลมการเรียนรู้การเขียนโปรแกรมของผู้แต่งเพื่อเรียนรู้โครงการดั้งเดิมเพิ่มเติม ~
