Новая уникальная платформа для проведения соревнований Advanced Cyber Labs была разработана для практического подкрепления теории пентеста. Структура сайта включает:
- Главная (домашняя) страница.
- Список заданий.
- Страница задания.
- Результаты.
- Обучающие материалы (Learning)
- Часто возникающие вопросы (FAQ).
Дизайн выполнен в темно-серых и акцентных неоново-зеленых и жёлтых тонах. На фоне присутствует анимация, добавляющая динамичности контенту.
Техническая сторона проекта:
- Бэкенд разработан на мощном PHP-фреймворке Laravel, обеспечивающем надежность и безопасность.
- Фронтенд создан с использованием Filament (админпанель) и Livewire (динамичные компоненты контента).
- Флеш-сообщения реализованы с помощью библиотек SweetAlert и PHPFlasher для удобного уведомления пользователей.
- Стилизация выполнена на базе CSS-фреймворков Bootstrap и Tailwind.
- JavaScript графика осуществлена с помощью D36.7.0 и particles.js.
- База данных – MySQL, обеспечивающая стабильное хранение и быструю обработку данных.
Домашняя страница
На странице представлена информация о целях платформы. Также есть блок с её преимуществами, реализованный в стильном и удобном дизайне. Для более яркой визуализации принципов работы и особенностей платформы в нижнем блоке домашней страницы расположен слайдер со скриншотами самых ключевых страниц платформы.
Страница с заданиями
Неавторизованным пользователям доступна только домашняя страница. А вот после авторизации можно перейти на страницу с заданиями. На ней отображается таймер обратного отсчета до начала соревнования. В каждом из заданий представлено различное количество флагов, при этом сложность взятия каждого из флагов определяется его стоимостью. Также в правом верхнем углу карточки отображается суммарное количество взятых на данный момент флагов всеми пользователями. При клике на карточку задания, пользователь перенаправляется на страницу с заданием, где в разделе проверки флагов можно увидеть взятые флаги.
Страница с заданием
Для каждого участника CTF запускается своя уникальная виртуальная машина. При нажатии на кнопку Start (Старт), генерируется отдельная сущность виртуальной машины и через какое-то время появляется ее IP адрес. Автоматически каждая машина запускается на 2 часа и появляется таймер обратного отсчета до её удаления. Если у пользователя осталось менее часа до остановки машины, можно добавить еще час. Эту процедуру можно повторять столько раз, сколько понадобиться времени на решение задания. После истечения времени работы машины, если по какой-либо причине не нажата кнопка Terminate (Завершить), машина удалится автоматически. Пользователь одновременно может запускать и работать только с одной машиной. Для старта машины в другом задании, предыдущая машина должна быть обязательно остановлена. Если же предыдущая машина не остановлена, то при переходе на страницу с заданиями, будет отображаться зеленый мигающий индикатор в верхнем левом углу карточки задания с работающей машиной. При попытке запустить машину из другого задания, появится сообщение о необходимости остановить предыдущую машину. Таким образом, для участников соревнований предусмотрены максимально удобный интерфейс и защита от случайного запуска нескольких машин.
Страница с обучающими материалами (Learning)
На этой странице в очень удобной форме размещены учебные материалы по пентесту, которые могут понадобиться участникам соревнований. В правом углу размещен сайдбар с основными обучающими статьями. При клике на название статьи она открывается на той же странице, в её левой части. Весь материал чётко структурирован, в нём присутствуют скриншоты и блоки с кодом для команд в терминале.
Страница с ЧаВо (FAQ)
Для максимально эффективного участия в соревнованиях предусмотрена страница с Часто задаваемыми вопросами. Они размещены в виде аккордеона, при клике на название вопроса, открывается окошко с наиболее исчерпывающим ответом на него.
Страница с результатами (Results)
На странице выводится график для десяти лидеров соревнования. Под ним расположена таблица с результатами всех участников соревнования.
При наведении курсора на точки графика можно увидеть вид флага и время его взятия, а также общую стоимость баллов в тот момент. Кроме того, чтобы не перегружать интерфейс, на графике можно выключать ненужные линии кликом по элементу легенды. Также по умолчанию присутствует опция увеличения области до масштаба 1 к 50. В таблице можно навести курсор на элемент с номером решенного задания и увидеть в какое время и в какой последовательности были взяты к флаги.
