Главная/ Проекты/ Вебмониторэкс

Разработка менеджера для системы защиты от кибератак

В этом тексте расскажем, как мы помогли разработать MVP менеджера для средства защиты API от компании Вебмониторэкс. Система должна не только в режиме реального времени анализировать запросы на соответствие OAS (OpenAPI Specification) и производить их фильтрацию, но и собирать метрики. Evrone сделали фронтенд сервиса и переработали дизайн.

29 января 2025

Продукты компании Вебмониторэкс используются для защиты ведущих финансовых и платежных систем, электронной коммерции и высоконагруженных веб-приложений от кибератак, взломамов и утечек данных. Продуктовый портфель компании, объединенный в платформу,включает в себя Web Application Firewall (ПроWAF) и линейку средств управления и защиты ПроAPI, состоящей из компонентов Структура, Тестирование и Защита

Клиент принял решение об аутстафе, чтобы сократить время на создание сервиса, и сосредоточиться на технической части. Плюс, требовалось ревью дизайна, который давно не обновлялся. Клиент обратился в Evrone с задачей разработать консоль управления, которая бы помимо менеджмента отображала все данные в виде таблиц и графиков. Нам вместе с командой клиента предстояло создать MVP, чтобы клиент мог протестировать продукт с точки зрения бизнеса. Evrone работает по модели умного аутстаффинга, и этот проект не стал исключением. 

Разработка менеджера для системы защиты от кибератак 1

Подбор стека

Основным языком разработки стал Go, поскольку это основной язык в продуктовой линейке ПроAPI от Вебмониторэкс. Для системы хранения данных выбрали MongoDB, из-за наличия особенных требований. Помимо стандартного хранения бизнес-сущностей, нужно было сохранять сервис-ивенты — все запросы, которые не соответствуют правилам валидации. Информацию о них нужно сохранять, открывать, сортировать и иметь возможность оптимизированного поиска по этим данным, так как они используются для построения таблиц и графиков мониторинга работы системы. 

Разработка менеджера для системы защиты от кибератак 2

На фронтенде использовали React, пожеланием клиента было применение библиотеки Recharts для построения графиков, поскольку она уже задействована на других проектах. Для UI-компонентов мы решили применить библиотеку shadcn/ui, которая добавляет исходный код компонентов в проект с помощью интерфейса командной строки. Это добавляет возможностей в создании кастомных нестилизованных элементов. 

Консоль

Интерфейс управления доступен и через консоль, которая принимает набор определенных команд или фильтров и отправляет их на бэк. Основной сложностью стало то, что команды и селекты должны быть синхронизированы: выбранный пресет фильтров должен подставляться в консоль и наоборот. Помимо стандартных команд консоль принимает обычные фразы, например, last five days покажет события за последние пять дней. 

В экосистеме продуктов клиента используется единый язык запросов, поэтому нашей задачей было сделать совместимую с ним имплементацию. Это набор логических конструктов, которые трансформируются в запросы к базе данных и позволяют настраивать выборку событий, которые выгружаются из средства защиты. Решение позволяет быстро искать по большому количеству элементов, параметры поиска можно задавать текстово или через UI-компоненты. 

Взаимодействие с системой

Система и интерфейс управления могут взаимодействовать синхронно и асинхронно. Чтобы поддерживать высокую нагрузку и абстрагировать жесткие связи между двумя узлами, обычно используют брокер сообщений — очередь, куда система отправляет сообщения, а консоль управления считывает, и наоборот. Это технически нагруженное решение, под которое нужно разворачивать еще один сервис. 

Поскольку перед нами стояла задача создать работоспособный продукт с базовым набором функций, мы решили отложить реализацию сложного асинхронного взаимодействия, но подготовить базу для его внедрения. Если клиент примет решение сохранить и развивать продукт, можно будет легко добавить очередь и перейти к более совершенной модели.

Дизайн

На старте у клиента уже был работающий продукт, элементы фирменного стиля и сверстанная дизайн-система, но они не покрывали потребности интерфейса в функциональных компонентах. Многие решения в интерфейсе сложились исторически и требовали визуального упрощения.

От дизайна требовалось упростить сложные конструкции до уровня best practice, поработать с формулировками, гармонизировать отступы и размеры по всем компонентам. При этом важно было сохранить преемственность удачных решений и сценариев. Аудитория продукта пользуются им ежедневно и уже имеет свои сформировавшиеся привычки, которые не должны быть резко изменены при обновлениях. Поэтому мы рассматривали обновление, как один из эволюционных шагов в ряду постоянных улучшений.

Как и у любой аналитической системы, основные функциональные элементы «Вебмониторэкс» это таблицы, графики и формы. Дизайн-команда много лет работает с такими компонентами, и на момент старта проекта обладала внушительной базой наработок. Именно поэтому мы смогли быстро кастомизировать компоненты под нужды клиента и отдать материалы в сборку со всеми состояниями и корнер-кейсами.

Разработка менеджера для системы защиты от кибератак 3

Мы помогли клиенту обновить разделы сводки, список подключенных приложений, список нод, настройки, профиль и список событий с фильтрацией. На основе обновленных компонентов можно собирать новые разделы, так решения можно логично переиспользовать.

Результат

Команда Evrone совместно с клиентом разработала систему управления, которая помогает в режиме реального времени контролировать работу средства защиты API, собирать метрики и отображать их в виде таблиц и схем. При этом мы создали кастомный инструмент для сбора метрик, не полагаясь на стандартные решения типа Grafana. Решение умеет строить графики, агрегировать и фильтровать данные. На фронтенде мы тоже сосредоточились на создании уникальных UI-компонентов. 

В коде мы придерживались чистой архитектуры. Программное обеспечение разбивается на независимые функциональные компоненты, которые взаимодействуют и обмениваются только необходимыми ресурсами и только определенным способом. Такой подход помогает разделить ответственность компонентов и способствует созданию простой в обслуживании системы, код которой понятно устроен. В дальнейшем для продукта можно будет собрать SDK для работы с серверами и клиентами.

Мы завершили основные работы над проектом, и на момент публикации он готовится к деплою. Запуском клиент будет заниматься самостоятельно.

Evrone разрабатывает сложные и нагруженные проекты обособленной командой и в составе команды клиента. Заполните форму, чтобы обсудить варианты сотрудничества. 

Мы приняли решение пригласить сторонних специалистов для разработки сервиса и выбрали Evrone. Мы оценили уровень экспертизы и опыт компании, и остались довольны сотрудничеством.
Лев Палей
CISO Вебмониторэкс
Будем на связи
Прикрепить файл
Максимальный размер файла: 8 МБ.
Допустимые типы файлов: jpg jpeg png txt rtf pdf doc docx ppt pptx.