Разработка менеджера для системы защиты от кибератак
В этом тексте расскажем, как мы помогли разработать MVP менеджера для средства защиты API от компании Вебмониторэкс. Система должна не только в режиме реального времени анализировать запросы на соответствие OAS (OpenAPI Specification) и производить их фильтрацию, но и собирать метрики. Evrone сделали фронтенд сервиса и переработали дизайн.
Продукты компании Вебмониторэкс используются для защиты ведущих финансовых и платежных систем, электронной коммерции и высоконагруженных веб-приложений от кибератак, взломамов и утечек данных. Продуктовый портфель компании, объединенный в платформу,включает в себя Web Application Firewall (ПроWAF) и линейку средств управления и защиты ПроAPI, состоящей из компонентов Структура, Тестирование и Защита.
Клиент принял решение об аутстафе, чтобы сократить время на создание сервиса, и сосредоточиться на технической части. Плюс, требовалось ревью дизайна, который давно не обновлялся. Клиент обратился в Evrone с задачей разработать консоль управления, которая бы помимо менеджмента отображала все данные в виде таблиц и графиков. Нам вместе с командой клиента предстояло создать MVP, чтобы клиент мог протестировать продукт с точки зрения бизнеса. Evrone работает по модели умного аутстаффинга, и этот проект не стал исключением.
Подбор стека
Основным языком разработки стал Go, поскольку это основной язык в продуктовой линейке ПроAPI от Вебмониторэкс. Для системы хранения данных выбрали MongoDB, из-за наличия особенных требований. Помимо стандартного хранения бизнес-сущностей, нужно было сохранять сервис-ивенты — все запросы, которые не соответствуют правилам валидации. Информацию о них нужно сохранять, открывать, сортировать и иметь возможность оптимизированного поиска по этим данным, так как они используются для построения таблиц и графиков мониторинга работы системы.
На фронтенде использовали React, пожеланием клиента было применение библиотеки Recharts для построения графиков, поскольку она уже задействована на других проектах. Для UI-компонентов мы решили применить библиотеку shadcn/ui, которая добавляет исходный код компонентов в проект с помощью интерфейса командной строки. Это добавляет возможностей в создании кастомных нестилизованных элементов.
Консоль
Интерфейс управления доступен и через консоль, которая принимает набор определенных команд или фильтров и отправляет их на бэк. Основной сложностью стало то, что команды и селекты должны быть синхронизированы: выбранный пресет фильтров должен подставляться в консоль и наоборот. Помимо стандартных команд консоль принимает обычные фразы, например, last five days покажет события за последние пять дней.
В экосистеме продуктов клиента используется единый язык запросов, поэтому нашей задачей было сделать совместимую с ним имплементацию. Это набор логических конструктов, которые трансформируются в запросы к базе данных и позволяют настраивать выборку событий, которые выгружаются из средства защиты. Решение позволяет быстро искать по большому количеству элементов, параметры поиска можно задавать текстово или через UI-компоненты.
Взаимодействие с системой
Система и интерфейс управления могут взаимодействовать синхронно и асинхронно. Чтобы поддерживать высокую нагрузку и абстрагировать жесткие связи между двумя узлами, обычно используют брокер сообщений — очередь, куда система отправляет сообщения, а консоль управления считывает, и наоборот. Это технически нагруженное решение, под которое нужно разворачивать еще один сервис.
Поскольку перед нами стояла задача создать работоспособный продукт с базовым набором функций, мы решили отложить реализацию сложного асинхронного взаимодействия, но подготовить базу для его внедрения. Если клиент примет решение сохранить и развивать продукт, можно будет легко добавить очередь и перейти к более совершенной модели.
Дизайн
На старте у клиента уже был работающий продукт, элементы фирменного стиля и сверстанная дизайн-система, но они не покрывали потребности интерфейса в функциональных компонентах. Многие решения в интерфейсе сложились исторически и требовали визуального упрощения.
От дизайна требовалось упростить сложные конструкции до уровня best practice, поработать с формулировками, гармонизировать отступы и размеры по всем компонентам. При этом важно было сохранить преемственность удачных решений и сценариев. Аудитория продукта пользуются им ежедневно и уже имеет свои сформировавшиеся привычки, которые не должны быть резко изменены при обновлениях. Поэтому мы рассматривали обновление, как один из эволюционных шагов в ряду постоянных улучшений.
Как и у любой аналитической системы, основные функциональные элементы «Вебмониторэкс» это таблицы, графики и формы. Дизайн-команда много лет работает с такими компонентами, и на момент старта проекта обладала внушительной базой наработок. Именно поэтому мы смогли быстро кастомизировать компоненты под нужды клиента и отдать материалы в сборку со всеми состояниями и корнер-кейсами.
Мы помогли клиенту обновить разделы сводки, список подключенных приложений, список нод, настройки, профиль и список событий с фильтрацией. На основе обновленных компонентов можно собирать новые разделы, так решения можно логично переиспользовать.
Результат
Команда Evrone совместно с клиентом разработала систему управления, которая помогает в режиме реального времени контролировать работу средства защиты API, собирать метрики и отображать их в виде таблиц и схем. При этом мы создали кастомный инструмент для сбора метрик, не полагаясь на стандартные решения типа Grafana. Решение умеет строить графики, агрегировать и фильтровать данные. На фронтенде мы тоже сосредоточились на создании уникальных UI-компонентов.
В коде мы придерживались чистой архитектуры. Программное обеспечение разбивается на независимые функциональные компоненты, которые взаимодействуют и обмениваются только необходимыми ресурсами и только определенным способом. Такой подход помогает разделить ответственность компонентов и способствует созданию простой в обслуживании системы, код которой понятно устроен. В дальнейшем для продукта можно будет собрать SDK для работы с серверами и клиентами.
Мы завершили основные работы над проектом, и на момент публикации он готовится к деплою. Запуском клиент будет заниматься самостоятельно.
Evrone разрабатывает сложные и нагруженные проекты обособленной командой и в составе команды клиента. Заполните форму, чтобы обсудить варианты сотрудничества.