ceshiya
1.0.0
순수한 프론트 엔드 대화식 네트워크 보안자가 학습 네트워크를 통해 네트워크 보안 전문가가 될 수 있습니다!
프로그래머 물고기 피부
온라인 경험 : http://ceshiya.yupi.icu
데모 비디오 : https://www.bilibili.com/video/bv1y14y1175y/
완전 무료 대화 형 네트워크 보안 자체 학습 튜토리얼 웹 사이트 인 Test Duck (Test Duck) 인 Test Duck (Test Duck) 인 전임자는 붕괴에 대한 인터뷰 질문 스위핑 웹 사이트 (Test Duck)였습니다.
전통적인 교육 웹 사이트와 달리 Yushe는 웹 사이트 공격의 경험과 교훈을 바탕으로 웹 사이트에 30 개 이상의 허점을 설정했습니다! 모든 사람들은 이러한 취약점을 발견하고 무료 탐사 및 다양한 팁을 통해 웹 사이트에서 공격을 일으켜 실제 전투에서 네트워크 보안 지식을 배우기 위해 쉽고 즐겁습니다.
웹 사이트 개발의 초보자 인 학생들은 다양한 사소한 문제로 인해 웹 사이트를 공격하기 쉽고 심리적, 경제적 손실을 일으 킵니다.
이 웹 사이트를 통해 모든 사람들이 웹 사이트를 개발할 때 네트워크 보안의 중요성을 깨닫고 보안 보호 인식을 향상시킬 수 있기를 바랍니다.
이 지식을 배우는 것은 더 나은 예방을하고 기술을 사용하여 불법적이고 악을 저 지르지 않는 것입니다!
1) 처음으로 홈페이지를 입력하면 초보자 가이드가 자동으로 팝업 되어이 웹 사이트를 공격하는 방법을 가르쳐줍니다. 가이드를 따르고 다음을 클릭하십시오.
2) 페이지의 모든 버튼 또는 입력 상자에는 숨겨진 비밀이있을 수 있습니다. 예를 들어, "좋아하는"버튼을 열렬히 클릭해도 시스템에 반응 할 수있는 기회가 없으며 버그가 나타납니다.
버그를 발견 할 때마다 웹 마스터 물고기 피부의 혈액 오리 가치가 빠르게 상승 할 것이며, 물고기 피부에 의해 주어진 작은 지식 포인트와 고화질 무수정 물고기 피부의 스릴러를 볼 수 있습니다. 총 5 장의 사진이 있다고합니다. 그것들을 수집 한 후에는 용을 소환하지 못할 수도 있지만 물고기 피부는 차를 마시도록 초대합니다.
3) 오른쪽 하단의 툴킷을 통해 웹 사이트를 공격 할 수 있습니다.
예를 들어, 위 그림의 요청 도구는 프론트 엔드 인터페이스를 우회하고 웹 사이트 배경에서 데이터를 직접 얻는 데 도움이 될 수 있습니까?
4) 오른쪽 하단의 버그 아이콘을 클릭하여 게임 패널을 팝업하여 점수를보고, 버그를 찾거나, 프롬프트를 얻고, 순위를 보는 등 게임 패널을 나타냅니다.
프로젝트는 순수한 프론트 엔드로 구현되므로 프로젝트를 로컬로 시작하는 것은 매우 쉽습니다!
온라인 방문자가 많고 말더듬이있을 수 있으므로 로컬로 사용하는 것이 좋습니다 ~
1)이 프로젝트의 코드를 다운로드하십시오
2) 프로젝트 루트 디렉토리를 입력하고 npm install 실행하여 프로젝트 종속성을 설치하십시오.
3) npm run dev
완전한 인터뷰 질문 해결 웹 사이트 프론트 엔드
30+ 대화식 버그 수준
게임 도구 상자
게임 패널
이 프로젝트는 순수한 프론트 엔드를 사용하여 구현되며 백엔드에 대한 프론트 엔드 지식이 필요하지 않습니다.
Q : 순수한 프론트 엔드 구현을 사용하는 이유는 무엇입니까?
A : 웹 사이트는 프론트 엔드 상호 작용에 더 중점을두고 백엔드 스토리지가 필요하지 않습니다. 또한 공격 위험을 줄이고 돈을 절약 할 수 있습니다
이 웹 사이트는 전체 프론트 엔드 프로젝트 인터뷰에서 전환 된 순수한 프론트 엔드 웹 사이트입니다. 여기서는 일반 웹 사이트 변환 프로세스를 공유합니다. 당신은 당신이하는 프로젝트를 대화식 교육 웹 사이트로 전환 할 수 있습니다.
단계는 다음과 같습니다.
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 디렉토리에 별도의 페이지로 저장됩니다.
우리는 모든 종류의 영웅들이 기여에 참여하고 다른 사람과 자신에게 도움이되도록 환영합니다 ~
권장 기여 방법 : 새로운 게임 유닛 (공식 카드) 추가, 시스템 버그 수정 및 네트워크 보안 지식 포인트를 보충하십시오. 귀하의 기여에 감사드립니다.
읽어 주셔서 감사합니다. 더 많은 독창적 인 프로젝트를 배우려면 저자의 프로그래밍 학습 서클에 가입하시기 ~
