ceshiya
1.0.0
Das Pure Front-End Interactive Network Security Self-Study-Netzwerk hilft Ihnen dabei, ein Netzwerksicherheitsexperte zu werden!
Durch Programmierer Fischhaut
Online -Erfahrung: http://ceshiya.yupi.icu
Demo -Video: https://www.bilibili.com/video/bv1y14y1175y/
Test Duck (Test Duck), eine völlig kostenlose Tutorial-Tutorial-Website für interaktive Netzwerksicherheit, war eine Interview-Frage-Sweeping-Website (Test Duck), die zum Zusammenbruch angegriffen wurde.
Im Gegensatz zu herkömmlichen Lehrwebsites hat Yushe mehr als 30 Lücken auf der Website auf der Grundlage seiner Erfahrungen und seiner Lektionen aus dem Website -Angriff gesetzt! Jeder muss diese Schwachstellen entdecken und Angriffe auf der Website durch kostenlose Erkundung und verschiedene Tipps verursachen, um das Wissen über Netzwerksicherheit im tatsächlichen Kampf zu erlernen, was einfach und angenehm ist ~
Studierende, die Anfänger in der Website -Entwicklung sind, neigen dazu, die Website aufgrund verschiedener geringfügiger Probleme anzugreifen und psychologische und wirtschaftliche Verluste zu verursachen.
Ich hoffe, über diese Website kann jeder die Bedeutung der Netzwerksicherheit erkennen und bei der Entwicklung von Websites den Sicherheitsschutzbewusstsein verbessern.
Das Erlernen dieses Wissens bedeutet, besser zu verhindern und Technologie nicht zu nutzen, um illegal und böse zu begehen!
1) Wenn Sie zum ersten Mal die Homepage eingeben, wird automatisch ein Neulingsführer angezeigt, um Ihnen beizubringen, wie Sie diese Website angreifen. Befolgen Sie die Anleitung und klicken Sie auf Weiter.
2) Eine Schaltfläche oder ein Eingabefeld auf der Seite kann versteckte Geheimnisse haben. Wenn Sie beispielsweise verzweifelt auf die Schaltfläche "Lieblings" klicken, gibt es dem System keine Chance zum Reagieren, und dann wird ein Fehler angezeigt.
Immer wenn Sie einen Käfer finden, steigt der Bluthuckwert der Webmaster-Fischhaut schnell an, und Sie können auch die kleinen Wissenspunkte von Fischhaut sowie eine hochauflösende unzensierte Fischhaut-Thriller sehen. Es wird gesagt, dass es insgesamt 5 Bilder gibt. Nach dem Sammeln wird der Drache möglicherweise nicht beschworen, aber die Fischhaut lädt Sie ein, Tee zu trinken.
3) Sie können sich selbst helfen, die Website über das Toolkit in der unteren rechten Ecke anzugreifen:
Das Anforderungswerkzeug im obigen Bild oben kann Ihnen beispielsweise helfen, die Front-End-Schnittstelle zu umgehen und Daten direkt vom Website-Hintergrund zu erhalten?
4) Klicken Sie in der unteren rechten Ecke auf das Fehlersymbol, um das Spielpanel anzuzeigen, mit dem die Punktzahl angezeigt, Fehler angezeigt, Eingabeaufforderungen erhalten, Ihr Ranking usw. angezeigt werden können.
Da das Projekt mit einem reinen Front-End implementiert ist, ist es sehr einfach, das Projekt lokal zu starten!
Es gibt viele Online -Besucher und können stottert werden. Es wird daher empfohlen, es lokal zu verwenden ~
1) Laden Sie den Code dieses Projekts herunter
2) Geben Sie das Projektroot -Verzeichnis ein und führen Sie npm install aus, um die Projektabhängigkeiten zu installieren
3) Führen Sie das lokale Start npm run dev
Komplette Interview-Fragen-Lösung Website Front End
30+ interaktive Fehlerstufen
Game Toolbox
Spielpanel
Dieses Projekt wird mit einem reinen Front-End implementiert und erfordert keine Front-End-Kenntnisse über das Back-End ~
F: Warum reine Front-End-Implementierung verwenden?
A: Die Website konzentriert sich mehr auf Front-End-Interaktion und erfordert keinen Back-End-Speicher. Es kann auch Angriffsrisiken reduzieren + Geld sparen
Diese Website ist eine reine Front-End-Website, die von einem kompletten Front-End-Projektinterview verändert wird. Hier teilen wir den allgemeinen Website -Transformationsprozess. Sie können versuchen, die Projekte, die Sie durchführen, in eine interaktive Lehrwebsite umzuwandeln.
Die Schritte sind wie folgt:
1) Komplette Front-End-Seitenentwicklung (wenn bereits ein Projekt vorhanden ist, wurde dieser Schritt standardmäßig abgeschlossen)
2) Seitendaten statisch: Erstellen Sie ein Scheinverzeichnis, um gefälschte Daten zu speichern, die von Menschen verfasst wurden. Verwenden Sie dann den gesamten Service -Layer -Code, der mit dem Backend in Betrieb interagiert und gefälschte Daten im Scheinverzeichnis erhalten.
3) Erstellen Sie einen Spielmechanismus: Weitere Informationen zu spezifischen Implementierungsmethoden finden Sie im Folgenden
Folgen Sie zunächst der Idee der Komponentierung, in den Spiele-Verzeichnis in den games und geben Sie eine GameBox Komponente für die Einführung der Front-End-Seite an, anstatt direkt in die vorhandene Geschäftsordnung einzudringen:
Wie löste ich die entsprechende Ebene aus, die nach dem Benutzer eine bestimmte Operation ausgeführt hat?
Die hier angewandte Implementierungsidee ähnelt den "Grabpunkten" im Front-End-Überwachungsgeschäft.
Zunächst definieren wir das Spiel des Spiels in gameUnit.ts (genannte Einheiten der Einheiten hier). Der Beispielcode lautet wie folgt:
/**
* 游戏单元类型
*/
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 : '网页前端和后端都要对点赞状态进行控制，防止点赞数异常' ,
} ,
] ; Anschließend schreiben wir eine globale Spielstatus -Speicherdatei gameState.tsx , um die Levels, Ergebnisse, Spielkonfiguration und andere Informationen, die der Benutzer abgeschlossen hat, aufzuzeichnen:
/**
* 游戏全局状态类型
* @author https://yuyuanweb.feishu.cn/wiki/Abldw5WkjidySxkKxU2cQdAtnah yupi
*/
export type GameStateType = {
init : boolean ; // 是否为初始化
score : number ; // 当前分数
gameTip : boolean ; // 是否开启提示
succeedUnitList : string [ ] ; // 已通过的关卡
} ; Es bietet auch eine Funktion, die die doGameUnitSucceed -Benachrichtigung meldet. Der Parameter ist der Schlüssel der oben definierten Pegeleinheit. In dieser Funktion wird der Passstatus des aktuellen Benutzers geändert und eine Popup-Eingabeaufforderung angegeben.
Der Beispielcode lautet wie folgt:
/**
* 完成游戏
* @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 ) ;
} ; Danach müssen wir der entsprechenden Seite und dem Funktionscode nur ein Stück Pass -Logik hinzufügen. Wenn sich die Bedingungen erfüllen, rufen Sie doGameUnitSucceed(关卡key) für die Benachrichtigung zur Verfügung, um die Aktualisierung und Benachrichtigung des Passstatus zu erzielen.
Beispielsweise fügt der folgende Code der Funktionsfunktion die Pass -Logik für die Passurteil hinzu:
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, Definieren Sie die Boot -Bühne in GameBox -Game -Assembly und verwenden Sie dann Lokalstorage, um festzustellen, ob Sie Stiefel beim ersten Betreten des Spiels zum ersten Mal anzeigen müssen.
Der Muster -Bootstrap -Phasencode lautet wie folgt:
const [ steps ] = useState ( [
{
title : '欢迎来到测逝鸭 ?' ,
intro : '这是一个锻炼你网络安全能力的破站，准备好旅程了么？???' ,
position : 'top' ,
} ,
{
title : '目标 ' ,
intro :
'你要做的就是运用你的智慧和强大的洞察力，尽可能多地发现并利用该网站的 Bug、对网站造成破坏！?' ,
nextLabel : '应该的应该的' ,
} ,
...
] ToolBox.tsx ist im Wesentlichen eine Seite, die bestimmte Passmethoden integriert, was als individuelle Entwicklung angesehen wird. Jedes Tool wird als separate Seite im tools -Verzeichnis gespeichert.
Wir begrüßen alle möglichen Helden, um an den Beiträgen teilzunehmen und anderen und sich selbst zugute kommen ~
Empfohlene Beitragsmethoden: Fügen Sie neue Spieleinheiten (offizielle Karten) hinzu, beheben Systemfehler und ergänzen Netzwerksicherheitspunkte. Vielen Dank für Ihren Beitrag.
Vielen Dank für das Lesen und willkommen, sich dem Programmierkreis des Autors anzuschließen, um mehr Originalprojekte zu erfahren ~
