ceshiya
1.0.0
¡La red de autoestudio de seguridad de red interactiva pura frontal lo ayuda a convertirse en un experto en seguridad de la red!
Por la piel del pescado programador
Experiencia en línea: http://ceshiya.yupi.icu
Video de demostración: https://www.bilibili.com/video/bv1y14y1175y/
Test Duck (Test Duck), un sitio web de tutorial de autoestudio de seguridad de red interactiva completamente gratuita, su predecesor fue un sitio web de barrido de preguntas (pato de prueba) que ha sido atacado para colapsar.
¡A diferencia de los sitios web de enseñanza tradicionales, Yushe ha establecido más de 30 lagunas en el sitio web en función de su experiencia y lecciones del ataque del sitio web! Todos necesitan descubrir estas vulnerabilidades y causar ataques en el sitio web a través de una exploración gratuita y varios consejos, para aprender el conocimiento de la seguridad de la red en el combate real, lo cual es fácil y agradable ~
Los estudiantes que son principiantes en el desarrollo del sitio web son propensos a atacar el sitio web debido a varios problemas menores, causando pérdidas psicológicas y económicas.
A través de este sitio web, espero que todos puedan darse cuenta de la importancia de la seguridad de la red y mejorar la conciencia de protección de seguridad al desarrollar sitios web.
¡Aprender este conocimiento es prevenir mejor y no usar la tecnología para cometer ilegales y malvados!
1) Cuando ingrese a la página de inicio por primera vez, una guía de novatos aparecerá automáticamente para enseñarle cómo atacar este sitio web. Siga la guía y haga clic en Siguiente.
2) Cualquier botón o cuadro de entrada en la página puede tener secretos ocultos. Por ejemplo, hacer clic en el botón "favorito" frenéticamente no le da al sistema la oportunidad de reaccionar, y luego aparece un error.
Cada vez que encuentre un error, el valor del pato de sangre de la piel de pescado webmaster se elevará rápidamente, y también puede ver los pequeños puntos de conocimiento dados por la piel de los peces, así como un thriller de piel de pescado sin censura de alta definición. Se dice que hay 5 imágenes en total. Después de recolectarlos, el dragón no puede ser convocado, pero la piel del pescado lo invitará a tomar té.
3) Puede ayudarlo a atacar el sitio web a través del kit de herramientas en la esquina inferior derecha:
Por ejemplo, ¿la herramienta de solicitud en la imagen de arriba puede ayudarlo a evitar la interfaz front-end y obtener datos directamente de los antecedentes del sitio web?
4) Haga clic en el icono de error en la esquina inferior derecha para aparecer en el panel de juego, que puede ver el puntaje, los errores encontrados, obtener indicaciones, ver su clasificación, etc.
Dado que el proyecto se implementa con un front-end puro, ¡es muy fácil iniciar el proyecto localmente!
Hay muchos visitantes en línea y puede estar tartamudeado, por lo que se recomienda que lo use localmente ~
1) Descargue el código de este proyecto
2) Ingrese el directorio root del proyecto y ejecute npm install para instalar las dependencias del proyecto
3) Ejecutar npm run dev Startup local
Sitio web de resolución de preguntas de entrevista completa front-end
Más de 30 niveles de errores interactivos
Caja de herramientas de juego
Panel de juego
Este proyecto se implementa utilizando un front-end puro, y no requiere ningún conocimiento frontal del back-end ~
P: ¿Por qué utilizar la implementación frontal pura?
R: El sitio web se centra más en la interacción frontal y no requiere almacenamiento de fondo; También puede reducir los riesgos de ataque + ahorrar dinero
Este sitio web es un sitio web frontal puro transformado de una entrevista completa del proyecto front-end. Aquí compartimos el proceso general de transformación del sitio web. Puede intentar convertir los proyectos que realiza en un sitio web de enseñanza interactiva.
Los pasos son los siguientes:
1) Desarrollo de la página front-end completa (si ya hay un proyecto, este paso se ha completado de forma predeterminada)
2) Datos de página estática: cree un directorio simulado para almacenar datos falsos escritos por humanos; Luego, transforme todo el código de la capa de servicio que interactúe con el backend en funcionamiento y obtenga datos falsos en el directorio simulado.
3) Cree un mecanismo de juego: consulte a continuación los métodos de implementación específicos
Primero, siga la idea de la componente, encapsule todo el código relacionado con el juego en el directorio games y proporcione un componente GameBox para la introducción de la página front-end, en lugar de entrometerse directamente en el código comercial existente:
¿Cómo activar el nivel correspondiente para completar después de que el usuario realiza una determinada operación?
La idea de implementación adoptada aquí es similar a los "puntos de entierro" en el negocio de monitoreo frontal.
Primero, definimos el nivel del juego en gameUnit.ts (llamado unidades unitarias aquí). El código de muestra es el siguiente:
/**
* 游戏单元类型
*/
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 : '网页前端和后端都要对点赞状态进行控制，防止点赞数异常' ,
} ,
] ; Luego escribimos un archivo de almacenamiento de estado de juego global gameState.tsx para registrar los niveles, puntajes, configuración del juego y otra información que el usuario ha completado:
/**
* 游戏全局状态类型
* @author https://yuyuanweb.feishu.cn/wiki/Abldw5WkjidySxkKxU2cQdAtnah yupi
*/
export type GameStateType = {
init : boolean ; // 是否为初始化
score : number ; // 当前分数
gameTip : boolean ; // 是否开启提示
succeedUnitList : string [ ] ; // 已通过的关卡
} ; También proporciona una función que informa la notificación doGameUnitSucceed . El parámetro es la clave de la unidad de nivel definida anteriormente. En esta función, se cambia el estado de pase del usuario actual y se proporciona un mensaje emergente.
El código de muestra es el siguiente:
/**
* 完成游戏
* @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 ) ;
} ; Después de eso, solo necesitamos agregar una lógica de pase a la página y el código de función correspondiente. Si las condiciones se reúnen, llame doGameUnitSucceed(关卡key) para lograr la actualización y la notificación del estado de aprobación.
Por ejemplo, el siguiente código agrega la lógica de juicio de Pass a la función similar:
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' ) ;
}
}
} ; Biblioteca Intro.js , defina la etapa de arranque en el ensamblaje del juego GameBox y luego use LocalStorage para determinar si necesita mostrar botas al ingresar al juego por primera vez.
El código de fase de arranque de muestra es el siguiente:
const [ steps ] = useState ( [
{
title : '欢迎来到测逝鸭 ?' ,
intro : '这是一个锻炼你网络安全能力的破站，准备好旅程了么？???' ,
position : 'top' ,
} ,
{
title : '目标 ' ,
intro :
'你要做的就是运用你的智慧和强大的洞察力，尽可能多地发现并利用该网站的 Bug、对网站造成破坏！?' ,
nextLabel : '应该的应该的' ,
} ,
...
] ToolBox.tsx es esencialmente una página que integra métodos de aprobación específicos, que se considera un desarrollo personalizado. Cada herramienta se almacena como una página separada en el directorio tools .
Agradecemos a todo tipo de héroes para participar en las contribuciones y beneficiar a los demás y a uno mismo ~
Métodos de contribución recomendados: agregue nuevas unidades de juego (tarjetas oficiales), corrige errores del sistema y complementen los puntos de conocimiento de seguridad de la red. Gracias por su contribución.
Gracias por leer y bienvenido a unirse al círculo de aprendizaje de programación del autor para obtener más proyectos originales ~
