ceshiya
1.0.0
Le réseau d'auto-étude de sécurité du réseau interactif pur frontal pur vous aide à devenir un expert en sécurité du réseau!
Par la peau de poisson du programmeur
Expérience en ligne: http://cheshiya.yupi.icu
Vidéo de démonstration: https://www.bilibili.com/video/bv1y14y1175y/
Test Duck (Test Duck), un site Web de tutoriel d'auto-étude de sécurité du réseau interactif entièrement gratuit, son prédécesseur était un site Web de balayage de questions d'entrevue (Test Duck) qui a été attaqué pour s'effondrer.
Contrairement aux sites Web d'enseignement traditionnels, Yushe a établi plus de 30 lacunes sur le site Web en fonction de son expérience et des leçons de l'attaque du site Web! Tout le monde doit découvrir ces vulnérabilités et provoquer des attaques sur le site Web grâce à une exploration gratuite et à divers conseils, afin d'apprendre les connaissances en sécurité du réseau dans le combat réel, ce qui est facile et agréable ~
Les étudiants qui sont débutants dans le développement du site Web sont sujets à attaquer le site Web en raison de divers problèmes mineurs, provoquant des pertes psychologiques et économiques.
Grâce à ce site Web, j'espère que tout le monde pourra réaliser l'importance de la sécurité du réseau et améliorer la sensibilisation à la protection de la sécurité lors du développement de sites Web.
L'apprentissage de ces connaissances est de mieux prévenir, et de ne pas utiliser la technologie pour commettre illégale et maléfique!
1) Lorsque vous entrez dans la page d'accueil pour la première fois, un guide débutant apparaîtra automatiquement pour vous apprendre à attaquer ce site Web. Suivez le guide et cliquez sur Suivant.
2) Tout bouton ou boîte d'entrée sur la page peut avoir des secrets cachés. Par exemple, cliquer frénétiquement sur le bouton "préféré" ne donne pas au système une chance de réagir, puis un bogue apparaît.
Chaque fois que vous trouvez un insecte, la valeur de canard sanguin de la peau de poisson webmaster augmentera rapidement, et vous pouvez également voir les petits points de connaissance donnés par la peau de poisson, ainsi qu'un thriller de la peau de poisson non censurée à haute définition. On dit qu'il y a 5 photos au total. Après les avoir collectés, le dragon peut ne pas être convoqué, mais la peau de poisson vous invitera à prendre du thé.
3) Vous pouvez vous aider à attaquer le site Web via la boîte à outils dans le coin inférieur droit:
Par exemple, l'outil de demande de l'image ci-dessus peut vous aider à contourner l'interface frontale et à obtenir directement des données à partir de l'arrière-plan du site Web?
4) Cliquez sur l'icône de bogue dans le coin inférieur droit pour faire apparaître le panneau de jeu, qui peut afficher le score, trouver des bugs, obtenir des invites, afficher votre classement, etc.
Étant donné que le projet est mis en œuvre avec un frontal pur, il est très facile de démarrer le projet localement!
Il y a beaucoup de visiteurs en ligne et peut être bégayé, il est donc recommandé de l'utiliser localement ~
1) Téléchargez le code de ce projet
2) Entrez le répertoire racine du projet et exécutez npm install pour installer les dépendances du projet
3) Exécuter npm run dev Local Startup
Interview complète le site Web de résolution de questions frontal
30+ niveaux de bugs interactifs
Boîte à outils de jeu
Panneau de jeu
Ce projet est mis en œuvre à l'aide d'un pur front-end et ne nécessite aucune connaissance frontale de l'arrière-end ~
Q: Pourquoi utiliser la mise en œuvre frontale pure?
R: Le site Web se concentre davantage sur l'interaction frontale et ne nécessite pas de stockage arrière; Il peut également réduire les risques d'attaque et économiser de l'argent
Ce site Web est un site Web frontal pur transformé à partir d'une interview complète de projet frontal. Ici, nous partageons le processus de transformation du site Web général. Vous pouvez essayer de transformer les projets que vous réalisez en site Web d'enseignement interactif.
Les étapes sont les suivantes:
1) Compléter le développement de la page frontale (s'il y a déjà un projet, cette étape a été terminée par défaut)
2) Page Data Static: Créez un répertoire simulé pour stocker les fausses données écrites par les humains; Transformez ensuite tout le code de couche de service interagissant avec le backend en fonctionnement et obtenant de fausses données dans le répertoire Mock.
3) Créer un mécanisme de jeu: voir ci-dessous pour des méthodes de mise en œuvre spécifiques
Tout d'abord, suivez l'idée de la composante, encapsulez tout le code lié au jeu dans le répertoire games et fournissez un composant GameBox pour l'introduction de la page frontale, plutôt que de s'introduire directement dans le code commercial existant:
Comment déclencher le niveau correspondant à terminer une fois que l'utilisateur a effectué une certaine opération?
L'idée de mise en œuvre adoptée ici est similaire aux "points d'enterrement" dans l'activité de surveillance frontale.
Tout d'abord, nous définissons le niveau du jeu dans gameUnit.ts (appelé unités unitaires ici). L'exemple de code est le suivant:
/**
* 游戏单元类型
*/
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 : '网页前端和后端都要对点赞状态进行控制，防止点赞数异常' ,
} ,
] ; Ensuite, nous écrivons un fichier de stockage Global Game State gameState.tsx pour enregistrer les niveaux, les scores, la configuration du jeu et d'autres informations que l'utilisateur a terminées:
/**
* 游戏全局状态类型
* @author https://yuyuanweb.feishu.cn/wiki/Abldw5WkjidySxkKxU2cQdAtnah yupi
*/
export type GameStateType = {
init : boolean ; // 是否为初始化
score : number ; // 当前分数
gameTip : boolean ; // 是否开启提示
succeedUnitList : string [ ] ; // 已通过的关卡
} ; Il fournit également une fonction qui rapporte la notification doGameUnitSucceed . Le paramètre est la clé de l'unité de niveau définie ci-dessus. Dans cette fonction, l'état de réussite de l'utilisateur actuel est modifié et une invite contextuelle est donnée.
L'exemple de code est le suivant:
/**
* 完成游戏
* @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 ) ;
} ; Après cela, nous n'avons qu'à ajouter une logique de passe à la page et au code de fonction correspondants. Si les conditions se remplissent, appelez doGameUnitSucceed(关卡key) pour obtenir la mise à jour et la notification de l'état de réussite.
Par exemple, le code suivant ajoute la logique de jugement de passe à la fonction similaire:
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, définissez l'étape de démarrage dans GameBox Game Assembly, puis utilisez LocalStorage pour déterminer si vous devez afficher des bottes lorsque vous entrez le jeu pour la première fois.
L'exemple de code de phase de bootstrap est le suivant:
const [ steps ] = useState ( [
{
title : '欢迎来到测逝鸭 ?' ,
intro : '这是一个锻炼你网络安全能力的破站，准备好旅程了么？???' ,
position : 'top' ,
} ,
{
title : '目标 ' ,
intro :
'你要做的就是运用你的智慧和强大的洞察力，尽可能多地发现并利用该网站的 Bug、对网站造成破坏！?' ,
nextLabel : '应该的应该的' ,
} ,
...
] ToolBox.tsx est essentiellement une page qui intègre des méthodes de passe spécifiques, qui est considérée comme un développement personnalisé. Chaque outil est stocké comme une page distincte dans le répertoire tools .
Nous accueillons toutes sortes de héros pour participer aux contributions et profiter aux autres et à soi-même ~
Méthodes de contribution recommandées: ajouter de nouvelles unités de jeu (cartes officielles), corriger les bogues du système et compléter les points de connaissance de sécurité du réseau. Merci pour votre contribution.
Merci d'avoir lu, et bienvenue pour rejoindre le cercle d'apprentissage de la programmation de l'auteur pour apprendre plus de projets originaux ~
