ceshiya
1.0.0
A rede de auto-estudo de segurança de rede interativa pura de front-end ajuda você a se tornar um especialista em segurança de rede!
Por programador de peixe pele
Experiência on -line: http://ceshiya.yupi.icu
Vídeo de demonstração: https://www.bilibili.com/video/bv1y14y1175y/
Test Duck (Test Duck), um site de tutorial de auto-estudo de segurança interativa completamente gratuito, seu antecessor foi um site de entrevista à entrevista (Test Duck) que foi atacado a entrar em colapso.
Ao contrário dos sites de ensino tradicionais, Yushe estabeleceu mais de 30 brechas no site com base em sua experiência e lições do ataque do site! Todo mundo precisa descobrir essas vulnerabilidades e causar ataques ao site por meio de exploração gratuita e várias dicas, de modo a aprender conhecimento de segurança de rede em combate real, o que é fácil e agradável ~
Os alunos iniciantes no desenvolvimento de sites são propensos a atacar o site devido a vários problemas menores, causando perdas psicológicas e econômicas.
Através deste site, espero que todos possam perceber a importância da segurança da rede e melhorar a conscientização da proteção de segurança ao desenvolver sites.
Aprender esse conhecimento é prevenir melhor, e não usar a tecnologia para cometer ilegal e mal!
1) Quando você entra na página inicial pela primeira vez, um guia de novatos aparece automaticamente para ensinar como atacar este site. Siga o guia e clique em Avançar.
2) Qualquer botão ou caixa de entrada na página pode ter segredos ocultos. Por exemplo, clicar no botão "favorito" freneticamente não dá ao sistema a chance de reagir e, em seguida, um bug é exibido.
Sempre que você encontrar um inseto, o valor do pato sanguíneo da pele de peixe com webmasters aumentará rapidamente, e você também pode ver os pequenos pontos de conhecimento dados pela pele de peixe, bem como um thriller da pele de peixe sem censura de alta definição. Dizem que existem 5 fotos no total. Depois de colecioná -los, o dragão não pode ser convocado, mas a pele do peixe convidará você a tomar chá.
3) Você pode ajudar a atacar o site através do kit de ferramentas no canto inferior direito:
Por exemplo, a ferramenta de solicitação na figura acima pode ajudá-lo a ignorar a interface front-end e obter diretamente dados do histórico do site?
4) Clique no ícone de bug no canto inferior direito para aparecer no painel do jogo, que pode ver a pontuação, encontrou bugs, obter instruções, visualizar sua classificação etc.
Como o projeto é implementado com um front-end puro, é muito fácil iniciar o projeto localmente!
Existem muitos visitantes on -line e podem ser gaguejados, por isso é recomendável que você o use localmente ~
1) Faça o download do código deste projeto
2) Digite o diretório raiz do projeto e execute npm install para instalar as dependências do projeto
3) Execute npm run dev Local Startup
Fronteiro do site de solução de perguntas para entrevistas completa
Mais de 30 níveis de bugs interativos
Caixa de ferramentas do jogo
Painel de jogo
Este projeto é implementado usando um front-end puro e não requer nenhum conhecimento front-end do back-end ~
P: Por que usar a implementação pura do front-end?
R: O site se concentra mais na interação front-end e não requer armazenamento de back-end; Também pode reduzir os riscos de ataque + economizar dinheiro
Este site é um site de front-end puro transformado de uma entrevista completa do projeto de front-end. Aqui compartilhamos o processo de transformação do site geral. Você pode tentar transformar os projetos que faz em um site de ensino interativo.
As etapas são as seguintes:
1) Complete o desenvolvimento da página front-end (se já houver um projeto, esta etapa foi concluída por padrão)
2) Dados da página estática: Crie um diretório simulado para armazenar dados falsos escritos por humanos; Em seguida, transforme todo o código da camada de serviço interagindo com o back -end em operação e obtendo dados falsos no diretório simulado.
3) Crie um mecanismo de jogo: veja abaixo para métodos de implementação específicos
Primeiro, siga a idéia de componente, encapsula todo o código relacionado ao jogo no diretório games e forneça um componente GameBox para introdução de página front-end, em vez de se intrometer diretamente ao código comercial existente:
Como acionar o nível correspondente a ser concluído depois que o usuário executa uma determinada operação?
A idéia de implementação adotada aqui é semelhante aos "pontos de cemitério" nos negócios de monitoramento front-end.
Primeiro, definimos o nível do jogo em gameUnit.ts (chamados unidades de unidades aqui). O código de amostra é o seguinte:
/**
* 游戏单元类型
*/
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 : '网页前端和后端都要对点赞状态进行控制，防止点赞数异常' ,
} ,
] ; Em seguida, escrevemos um arquivo global de armazenamento estadual de jogo gameState.tsx para gravar os níveis, pontuações, configuração de jogos e outras informações que o usuário concluiu:
/**
* 游戏全局状态类型
* @author https://yuyuanweb.feishu.cn/wiki/Abldw5WkjidySxkKxU2cQdAtnah yupi
*/
export type GameStateType = {
init : boolean ; // 是否为初始化
score : number ; // 当前分数
gameTip : boolean ; // 是否开启提示
succeedUnitList : string [ ] ; // 已通过的关卡
} ; Ele também fornece uma função que relata a notificação doGameUnitSucceed . O parâmetro é a chave da unidade de nível definida acima. Nesta função, o status de passagem do usuário atual é alterado e um prompt pop-up é fornecido.
O código de amostra é o seguinte:
/**
* 完成游戏
* @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 ) ;
} ; Depois disso, precisamos adicionar apenas uma lógica de passagem à página correspondente e código da função. Se as condições se encontrarem, ligue para doGameUnitSucceed(关卡key) para obter atualização e notificação do status de aprovação.
Por exemplo, o código a seguir adiciona a lógica de julgamento de aprovação à função 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 o estágio de inicialização na montagem do GameBox Game e, em seguida, use o LocalStorage para determinar se você precisa exibir botas ao entrar no jogo pela primeira vez.
O código de fase de bootstrap de amostra é o seguinte:
const [ steps ] = useState ( [
{
title : '欢迎来到测逝鸭 ?' ,
intro : '这是一个锻炼你网络安全能力的破站，准备好旅程了么？???' ,
position : 'top' ,
} ,
{
title : '目标 ' ,
intro :
'你要做的就是运用你的智慧和强大的洞察力，尽可能多地发现并利用该网站的 Bug、对网站造成破坏！?' ,
nextLabel : '应该的应该的' ,
} ,
...
] ToolBox.tsx é essencialmente uma página que integra métodos de passagem específicos, que é considerado um desenvolvimento personalizado. Cada ferramenta é armazenada como uma página separada no diretório tools .
Congratulamo -nos com todos os tipos de heróis para participar das contribuições e beneficiar os outros e a si mesmo ~
Métodos de contribuição recomendada: adicione novas unidades de jogo (cartas oficiais), corrige bugs do sistema e suplementar os pontos de conhecimento de segurança da rede. Obrigado por sua contribuição.
Obrigado pela leitura e bem -vindo a ingressar no círculo de aprendizado de programação do autor para aprender mais projetos originais ~
