О проекте
За 6 месяцев сделали полный редизайн, перепроектировали интерфейс, разработали сценарии и сделали frontend на React. Пока мы готовимся к работам, запланированным на второй релиз, постараемся рассказать, как делать сложные продукты.
Что такое Metascan
Metascan — облачный сканер уязвимостей с экспертным сопровождением. Сервис обеспечивает ежедневный контроль защищенности корпоративных инфраструктур. Проверяет на уязвимости ~150 000 серверов и веб-приложений каждый день.
Метаскан предоставляет не только сканер и доступ в UI, но и человека который еженедельно проведет для вашей компании планёрку по ИБ. Расскажет про то, как были найдены уязвимости и как их устранять, продемонстрирует эксплойт и, если нужно, проконтролирует работу RnD команды для создания модуля проверки под конкретно ваше ПО.
Сервис позволяет:
- Находить домены, IP-адреса и сети, используемые компанией;
- Регулярно проверять сетевой периметр (0-65535) по протоколам TCP и UDP и контролировать соответствие “белому списку“ портов и сервисов;
- Подбирать пароли для системного ПО по 20+ протоколам;
- С помощью PoC-эксплойтов и скриптов находить уязвимости в системных сервисах и сетевом оборудовании;
- Подбирать пароли для системного ПО по 20+ протоколам;
- Анализировать сложные веб-приложения написанные на React, Angular и других JS-фреймворках
- Находить XSS, RCE, SQLi, DoR и другие OWASP-top-10 уязвимости
- Искать уязвимости в CMS Bitrix, WordPress и других
- Обнаруживать WAF и многое другое
Задача
Первое знакомство с сервисом произошло, когда мы обновляли ему лендинг. На тот момент мы даже представить не могли, что нас ждет удивительное приключение, длительностью в 6 месяцев.
Сервис уже существовал и активно развивался, команда вела собственные разработки, постоянно улучшала проект. Сервис делался своими силами и на bootstrap. По мере развития компании возникла потребность обновить интерфейс и нам было необходимо:
- сделать анализ текущего интерфейса;
- спроектировать новый пользовательский опыт;
- учесть текущий опыт клиентов и в критически важных разделах
- сохранить привычные паттерны;
- сделать UI-дизайн;
- сделать Frontend на React и связать его с Django Api Framework.
Часть 1. Погружение
Первый месяц мы погружались в проект, так как невозможно сделать качественный продукт, не разбираясь в предметной области .
Состав работ кажется стандартным:
- интервью с командой продукта;
- конкурентный анализ;
- выявление ошибок и ограничений текущего интерфейса;
- проектирование пользовательского опыта.
Мы записывали каждую встречу. В итоге у нас получилось более 10 часов записанных интервью и разборов продукта.
Каждый записанный час требовал около четырех часов на разбор и анализ информации, так как уже существовал бэкенд, параллельно реализовывался новый функционал и не все предлагаемые нами изменения было возможно реализовать.
Очень важным для нас было участие и вовлеченность команды Metascan. Нас подробно консультировали и подсказывали как работает текущий бэкенд, возможны ли изменения или нет, есть какие-то особенности.
Был план по реализации нового функционала, который необходимо было учесть, выявлялись элементы, требующие улучшений.
Часть 2. Прототип
Сложные продукты требуют детализированного проектирования, так как могут происходить изменения каждую неделю. Мы сделали интерактивный прототип сервиса, чтобы можно было протестировать и понять, где и какие улучшения или изменения потребуются.
По итогам этапа мы сделали:
- дашборд;
- сайты;
- карточка хоста со всеми подразделами и настройками;
- расписание;
- история проверок;
- настройки.
По итогу нас получилось 37 страниц на этапе прототипа, часть экранов реализовали на этапе дизайна.
И конечно, мы сделали интерактивный прототип, чтобы “пощупать” новый интерфейс и потестировать его. По итогу собрали обратную связь и список улучшений.
Часть 3. Дизайн и функционал
Для всех проектов мы собираем UI-Kit. В данном случае мы подошли более обстоятельно и шагнули в сторону дизайн системы. В проекте мы реализовали две темы с автоматической сменой, переход на разные языки и продумали множество состояний и “фишек”.
Все иконки и элементы выносились в Storybook, велась декларация иконок и элементов со всеми состояниями для быстрого использования и подключения на нужных страницах.
Сделали 77 экранов с различными опциями и состояниями.
Дашборд
Главной страницей мы сделали дашборд. Нам было необходимо понять, какую ключевую информацию на нем выводить и сделать страницу максимально полезной.
Клиент с первого экрана понимает состояние своего периметра и может сходу понять:
- количество угроз за год в динамике;
- разбивка угроз по уровню (сколько критических угроз, высокого статуса и среднего);
- открытые порты, порты за неделю и недоверенные порты;
- топ недоверенных портов;
- статистика профиля;
- информация о лицензии.
Классной фишкой сделали возможность скачать дашборд для отчетов компаний по ключевым метрикам. Генерируем страницу в PDF и отдаем пользователю.
Мои сайты
В разделе мои сайты мы можем создавать группы, добавлять хосты и получать по ним всю ключевую информацию.
Cкриншот старого интерфейса
Основные проблемы, выявленные при анализе:
Сложное управление действиями, группы идут в листинге друг за другом и нет фильтрации, отсутствует поиск нужного хоста, не реализованы все необходимые действия с хостом или группой.
Новый интерфейс
В новом интерфейсе мы предусмотрели все необходимые возможности и сделали взаимодействие с экраном более удобным.
В самом верху расположили поиск и управление группами, далее идут группы с возможностью быстрого создания. В группах мы видим информацию по угрозам и количество хостов в группах. Ниже расположился листинг всех хостов, разделенный по группам, по каждому хосту показывается статус угрозы. При нажатии на группу происходит быстрая фильтрация и мы видим хосты только определенной группы.
К управлению добавили быстрые действия: запуск проверки, остановка и скачивание отчетов за период. На релизе команда Metascan расширила действия до скачивания отчетов по хостам, портам и уязвимостям.
Из раздела мы не только можем управлять инфраструктурой, а еще и провалиться в карточку хоста.
Для угроз продолжили историю с цветовым кодированием, чтобы сохранить привычные паттерны для клиентов сервиса.
Карточка хоста
Карточка хоста один из ключевых инструментов в работе с сервисом. В этом разделе отображаются уязвимости и ключевые действия.
На самом верху расположились ТАБы:
- Информация о хосте — имя, IP адрес, последнее обновление, успешное окончание проверки, было выявлено угроз, быстрые действия (Запустить проверку, перейти к комментарию, скачать отчет, удалить хост) и открытые порты;
- Уязвимости системы — Уязвимости обнаружены в результате проверки версий ПО по сетевым баннерам. Во вкладке располагаются карточки угроз, каждую из которых мы можем открыть и получить детальную информацию;
- Уязвимости сайтов — Показывает количество угроз, листинг угроз, выстроенный по приоритету от критических до замечаний;
- Слабые пароли. Сервис проверяет пароли по доступным логинам и в случае обнаружения угрозы оповестит о необходимости сменить его;
- CMS. На вкладке располагаются все угрозы обнаруженные внутри CMS;
- Настройки. Новая вкладка, на которой пользователь может задать необходимую конфигурацию ресурса.
Карточка угрозы
Каждая карточка угрозы раскрывается аккордеоном и содержит всю ключевую информацию: Порт, Уровень угрозы, Тип уязвимости, Полное описание, Ссылки и Действия для команды ИБ (Исправлено/ложное срабатывание)
Внедрили Highlight.js — это подсветка синтаксиса, написанная на JavaScript
В рамках работы с карточкой угрозы сервис формирует вставку кода в блоки с запросом и ответом. Для удобства восприятия мы внедрили синтаксическую подсветку.
Очень круто, когда мы делаем еще frontend проекта, и разработчик так же вовлечен в интерфейсы и консультирует команду дизайна по возможностям и реалистичности идей.
Несмотря на схожесть карточки, угрозы и их наполнения отличаются в каждой вкладке.
Очень круто, когда мы делаем еще frontend проекта, и разработчик так же вовлечен в интерфейсы и консультирует команду дизайна по возможностям и реалистичности идей.
Профили сканера
Классное преимущества сервиса — это гибкая настройка профилей сканера. Профиль позволяет определять что и как мы проверяем.
В мини-карточку профиля выводится ключевая информация по настройкам для быстрой идентификации параметров.
По клику открывается большая карточка в том же окне, которая позволяет управлять настройками.
В дальнейшем при запуске проверок мы можем выбрать нужный нам профиль и получить необходимый результат.
Работа с запуском проверок
Для удобства пользователя мы сделали управление проверок сквозным как для одного хоста, так и для целой группы.
Для запуска проверки у нас есть два ключевых сценария:
Запуск проверки конкретного хоста из карточки хосткаЗапуск проверки по группе, определенным хостам и одному, из раздела “Мои сайты”
Расписание
Ранее на платформе уже был подобный функционал, который позволял управлять запуском проверок и формировать собственное расписание, только реализация была исключительно через CRON.
сли кто не знает, это такой формат времени, например:
“Пример: 50 17 * * 5 = в 17:50 UTC | каждый день | каждый месяц | 5-го дня(пятница) недели”
Темная тема и смена языка
Мы разработали правило для смены темы на темную, и это сильно преобразило сервис, ведь определенной категории удобнее использовать темный интерфейс (даже наш разработчик использовал в основном темную тему).
Часть 4. Frontend
Стек технологий:
Работа с API клиента
Frontend разрабатывался в плотной связке с backend клиента. Спасибо за декларацию по API. При разработке уровень общения и созвонов был так же очень высок, так как разработчик погружался не только в логику продукта, но и “под капот”.
Так как разработка тянет на полноценную статью, и мы ее обязательно напишем, пока делимся классной фишкой:
Скрытие ключа API
День X
Пошел 7-й месяц нашей разработки. Дизайн готов, фронтенд готов, предварительно протестирован и сдан команде Metascan, начались две недели ожидания. И в один день открыв боевой сервис мы видим заветный текст:
Отзыв
Как стартап мы развивались с 2018 года и к моменту работы с командой Verno уже имели некоторую историю. Но переломным стал момент, когда клиент стал видеть в нас не стартап со сделанным “на коленке” UI, а решение подходящее для крупной корпорации. Для многих заказчиков удобство и красота UI являются не менее важным фактором, чем возможности движка проверок. Результат работы с командой Verno, это не только красивый UI, но и прямое влияние на первое впечатление от продукта (особенно у крупных клиентов) и продажи.
Давид Ордян
Генеральный директор ООО "Метаскан"
Команда
Ключевые лица со стороны Verno:
Виктор Живилков — Руководитель проекта
Ульяна Рожнова — Team Lead UX/UI-дизайнер
Попов Сергей — Team Lead Frontend-developer
Оставьте заявку
У вас есть задача?
Оставьте заявку и мы свяжемся с вами в ближайшее время для обсуждения проекта.