ceshiya
1.0.0
Pure Front-End Interactive Network Secure Security Network помогает стать экспертом по безопасности сети!
От программиста Fish Skin
Онлайн -опыт: http://ceshiya.yupi.icu
Демо -видео: https://www.bilibili.com/video/bv1y14y1175y/
Test Duck (Test Duck), совершенно бесплатный веб-сайт самообслуживания интерактивной сети, ее предшественник был веб-сайтом, раздавающим вопросы (Test Duck), который подвергся нападению.
В отличие от традиционных учебных веб -сайтов, Юше установил более 30 лазейков на веб -сайте на основе его опыта и уроков из атаки на веб -сайте! Каждый должен обнаружить эти уязвимости и вызвать атаки на веб -сайте посредством бесплатного исследования и различных советов, чтобы узнать знания о безопасности сети в реальном бою, что легко и приятно ~
Студенты, которые являются новичками в разработке веб -сайтов, подвержены нападению на веб -сайт из -за различных незначительных проблем, что приводит к психологическим и экономическим потерям.
Через этот веб -сайт я надеюсь, что каждый сможет осознать важность безопасности сети и повысить осведомленность о безопасности при разработке веб -сайтов.
Изучение этих знаний - это лучше предотвратить, а не использовать технологии для совершения незаконных и злых!
1) Когда вы впервые входите на домашнюю страницу, руководство новичка автоматически появится, чтобы научить вас атаковать этот веб -сайт. Следуйте руководству и нажмите Далее.
2) Любая кнопка или окно ввода на странице могут иметь скрытые секреты. Например, нажатие кнопки «Любимая» отчаянно не дает системе шанс отреагировать, а затем появляется ошибка.
Всякий раз, когда вы найдете ошибку, ценность кровавой утки рыбной кожи веб-мастера быстро расти, и вы также можете увидеть небольшие знания, данные рыбной кожей, а также триллер с нецензурной кожей в высокой четкости. Говорят, что всего 5 картинок. После их сбора дракон не может быть вызван, но кожа рыбы пригласит вас провести чай.
3) Вы можете помочь себе атаковать веб -сайт через инструментарий в правом нижнем углу:
Например, инструмент запроса на картинке выше может помочь вам обойти интерфейс фронтального интерфейса и напрямую получить данные из фона веб-сайта?
4) Нажмите на значок ошибки в правом нижнем углу, чтобы вспять игровой панель, которая может просмотреть счет, найти ошибки, получить подсказки, просмотреть свой рейтинг и т. Д.
Поскольку проект реализован с чистым фронтальным, очень легко запустить проект локально!
Есть много онлайн -посетителей и может быть заикается, поэтому рекомендуется использовать его на местном уровне ~
1) Загрузите код этого проекта
2) Введите каталог Project Root и выполните npm install для установки зависимостей проекта
3) Выполнить npm run dev
Полное интервью для решения вопросов Front End
30+ интерактивных уровней ошибок
Игровой набор инструментов
Игровая панель
Этот проект реализован с использованием чистого фронтального конца и не требует никаких фронтальных знаний о задней части ~
В: Зачем использовать чистую переднюю реализацию?
О: Веб-сайт больше фокусируется на взаимодействии фронт-энда и не требует среднего хранилища; Это также может снизить риски атаки + сэкономить деньги
Этот веб-сайт представляет собой чистый интерфейс-сайт, преобразованный из полного интервью проекта. Здесь мы делимся общим процессом преобразования веб -сайта. Вы можете попытаться превратить проекты, которые вы делаете в интерактивный учебный сайт.
Шаги следующие:
1) Полная разработка страниц на фронта (если уже есть проект, этот шаг был завершен по умолчанию)
2) Статические данные страницы: Создайте фиктивный каталог для хранения поддельных данных, написанных людьми; Затем преобразуйте весь код уровня сервиса, взаимодействующий с бэкэнд в эксплуатацию и получение поддельных данных в макетном каталоге.
3) Создать игровой механизм: см. Ниже конкретные методы реализации
Во-первых, следуйте идее компонентов, инкапсулируйте весь код, связанный с игрой, в каталог games и предоставьте компонент GameBox для введения страницы фронт-END, а не непосредственно вторгаться в существующий бизнес-код:
Как запустить соответствующий уровень для завершения после того, как пользователь выполнит определенную операцию?
Идея реализации, принятая здесь, аналогична «захоронениям» в бизнес-мониторинге.
Во -первых, мы определяем уровень игры в 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 : '网页前端和后端都要对点赞状态进行控制，防止点赞数异常' ,
} ,
] ; Затем мы пишем глобальный файл хранилища Global Game 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) чтобы получить уведомление об обновлении и уведомлении о статусе прохода.
Например, следующий код добавляет логику суда Pass к функции «Подобно»:
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 Game Assembly, а затем используйте LocalStorage, чтобы определить, нужно ли вам отображать ботинки при входе в игру в первый раз.
Пример фазы начальной загрузки следующим образом:
const [ steps ] = useState ( [
{
title : '欢迎来到测逝鸭 ?' ,
intro : '这是一个锻炼你网络安全能力的破站，准备好旅程了么？???' ,
position : 'top' ,
} ,
{
title : '目标 ' ,
intro :
'你要做的就是运用你的智慧和强大的洞察力，尽可能多地发现并利用该网站的 Bug、对网站造成破坏！?' ,
nextLabel : '应该的应该的' ,
} ,
...
] ToolBox.tsx - это, по сути, страница, которая интегрирует конкретные методы прохождения, которая считается индивидуальной разработкой. Каждый инструмент хранится как отдельная страница в каталоге tools .
Мы приветствуем всех видов героев, чтобы участвовать в вкладе и принести пользу другим и себе ~
Рекомендуемые методы взноса: добавьте новые игровые блоки (официальные карты), исправляют системные ошибки и дополняют знания по безопасности сети. Спасибо за ваш вклад.
Спасибо за чтение, и добро пожаловать, чтобы присоединиться к кругу обучения программированию автора, чтобы узнать больше оригинальных проектов ~
