Проектирование и дизайн интерфейса облачного сканера уязвимостей

За 6 месяцев сделали полный редизайн, перепроектировали интерфейс, разработали сценарии и сделали frontend на React. Пока мы готовимся к работам, запланированным на второй релиз, постараемся рассказать, как делать сложные продукты.

Metascan - облачный сканер уязвимостей с экспертным сопровождением. Сервис обеспечивает ежедневный контроль защищенности корпоративных инфраструктур. Проверяет на уязвимости ~150 000 серверов и веб-приложений каждый день.

Сервис позволяет:

• Находить домены, IP-адреса и сети, используемые компанией;
• Регулярно проверять сетевой периметр (0-65535) по протоколам TCP и UDP и контролировать соответствие “белому списку“ портов и сервисов;
• Подбирать пароли для системного ПО по 20+ протоколам;
• С помощью PoC-эксплойтов и скриптов находить уязвимости в системных сервисах и сетевом оборудовании;
• Анализировать сложные веб-приложения написанные на React, Angular и других JS-фреймворках
  
• Находить XSS, RCE, SQLi, DoR и другие OWASP-top-10 уязвимости
• Искать уязвимости в CMS Bitrix, Wordpress и других
• Обнаруживать WAF и многое другое

Метаскан предоставляет не только сканер и доступ в UI, но и человека который еженедельно проведет для вашей компании планёрку по ИБ. Расскажет про то, как были найдены уязвимости и как их устранять, продемонстрирует эксплойт и, если нужно, проконтролирует работу RnD команды для создания модуля проверки под конкретно ваше ПО.

Среди клиентов платформы крупнейшие компании, банки и государственные структуры.

Чтобы лучше погрузиться в логику работы сервиса, разберем небольшой кейс:

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

Сервис уже существовал и активно развивался, команда вела собственные разработки, постоянно развивала проект, проект делался своими силами и на bootstrap, по мере развития компании возникла потребность обновить интерфейс и нам было необходимо:

• Сделать анализ текущего интерфейса
• Спроектировать новый пользовательский опыт
• Учесть текущий опыт клиентов и в критически важных разделах сохранить привычные паттерны
• Сделать UI-дизайн
• Сделать Frontend на React и связать его с Django Api Framework

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

Состав работ кажется стандартным:

• Интервью с командой продукта
• Конкурентный анализ
• Проектирование пользовательского опыта
• Выявление ошибок и ограничений текущего интерфейса

Мы записывали каждую встречу. В итоге у нас получилось более 10 часов записанных интервью и разборов продукта.

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

Очень важным для нас было участие и вовлеченность команды Metascan. Нас подробно консультировали и подсказывали как работает текущий бэкенд, возможны ли изменения или нет, есть какие-то особенности.

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

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

По итогам этапа мы сделали:

• дашборд;
• сайты;
• карточка хоста со всеми подразделами и настройками;
• расписание;
• история проверок;
• настройки.

По итогу нас получилось 37 страниц на этапе прототипа, часть экранов реализовали на этапе дизайна.

И конечно, мы сделали интерактивный прототип, чтобы “пощупать” новый интерфейс и потестировать его. По итогу собрали обратную связь и список улучшений.

Для всех проектов мы собираем UI-Kit. В данном случае мы подошли более обстоятельно и шагнули в сторону дизайн системы. В проекте мы реализовали две темы с автоматической сменой, переход на разные языки и продумали множество состояний и “фишек”.

Все иконки и элементы выносились в Storybook, велась декларация иконок и элементов со всеми состояниями для быстрого использования и подключения на нужных страницах.

В итоге сделали 77 экранов с различными опциями и состояниями.

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

Клиент с первого экрана понимает состояние своего периметра и может сходу понять:

-количество угроз за год в динамике;

-разбивка угроз по уровню (сколько критических угроз, высокого статуса и среднего);

-открытые порты, порты за неделю и недоверенные порты;

-топ недоверенных портов;

-статистика профиля;

-информация о лицензии.

Классной фишкой сделали возможность скачать дашборд для отчетов компаний по ключевым метрикам. Генерируем страницу в PDF и отдаем пользователю.

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

Основные проблемы, выявленные при анализе:

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

Новый интерфейс

В новом интерфейсе мы предусмотрели все необходимые возможности и сделали взаимодействие с экраном более удобным.

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

К управлению добавили быстрые действия: запуск проверки, остановка и скачивание отчетов за период. На релизе команда Metascan расширила действия до скачивания отчетов по хостам, портам и уязвимостям.

Из раздела мы не только можем управлять инфраструктурой, а еще и провалиться в карточку хоста.

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

Карточка хоста один из ключевых инструментов в работе с сервисом. В этом разделе отображаются уязвимости и ключевые действия.

На самом верху расположились ТАБы:

• Информация о хосте - имя, IP адрес, последнее обновление, успешное окончание проверки, было выявлено угроз, быстрые действия (Запустить проверку, перейти к комментарию, скачать отчет, удалить хост) и открытые порты;
• Уязвимости системы - Уязвимости обнаружены в результате проверки версий ПО по сетевым баннерам. Во вкладке располагаются карточки угроз, каждую из которых мы можем открыть и получить детальную информацию;
• Уязвимости сайтов - Показывает количество угроз, листинг угроз, выстроенный по приоритету от критических до замечаний;
• Слабые пароли. Сервис проверяет пароли по доступным логинам и в случае обнаружения угрозы оповестит о необходимости сменить его;
• CMS. На вкладке располагаются все угрозы обнаруженные внутри CMS;
• Настройки. Новая вкладка, на которой пользователь может задать необходимую конфигурацию ресурса.

Каждая карточка угрозы раскрывается аккордеоном и содержит всю ключевую информацию: Порт, Уровень угрозы, Тип уязвимости, Полное описание, Ссылки и Действия для команды ИБ (Исправлено/ложное срабатывание)

Внедрили Highlight.js — это подсветка синтаксиса, написанная на JavaScript

В рамках работы с карточкой угрозы сервис формирует вставку кода в блоки с запросом и ответом. Для удобства восприятия мы внедрили синтаксическую подсветку.

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

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

Классное преимущества сервиса - это гибкая настройка профилей сканера. Профиль позволяет определять что и как мы проверяем.

В мини-карточку профиля выводится ключевая информация по настройкам для быстрой идентификации параметров.

По клику открывается большая карточка в том же окне, которая позволяет управлять настройками.

В дальнейшем при запуске проверок мы можем выбрать нужный нам профиль и получить необходимый результат.

Для удобства пользователя мы сделали управление проверок сквозным как для одного хоста, так и для целой группы.

Для запуска проверки у нас есть два ключевых сценария:

Запуск проверки конкретного хоста из карточки хосткаЗапуск проверки по группе, определенным хостам и одному, из раздела “Мои сайты”

Ранее на платформе уже был подобный функционал, который позволял управлять запуском проверок и формировать собственное расписание, только реализация была исключительно через CRON. Если кто не знает, это такой формат времени, например:

Изначально мы допустили небольшую ошибку и переделали расписание на простой календарь, но не учли сценарии, когда пользователь выбирает нестандартную постановку расписания. Тогда мы вернули и CRON, таким образом создав два сценария создания расписания для продвинутых пользователей и упрощенную с календарем.

Управление всем расписанием происходит на отдельной вкладке, где можно редактировать и добавлять задачи, как для сканирования, так и для отправки отчетов.

Для каждой страницы мы разработали и прописали сообщения об успешном и не успешном состоянии для улучшения понимания работы сервиса пользователем.

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

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

Дополнительно пользователь может использовать автоматическую смену темы, которая привязана ко времени суток.

За счет использования на фронте React, смена темы и языка происходит молниеносно.

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

Стек технологий:

Работа с API клиента:

Frontend разрабатывался в плотной связке с backend клиента. Спасибо за декларацию по API. При разработке уровень общения и созвонов был так же очень высок, так как разработчик погружался не только в логику продукта, но и “под капот”.

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

Так как разработка тянет на полноценную статью, и мы ее обязательно напишем, пока делимся классной фишкой:

Скрытие ключа API

Мы вдохновились скрытием картинок в Телеграм и воспроизвели что-то похожее: при наведении появляется ключ и нажатием пользователь может его скопировать.

Пошел 7-й месяц нашей разработки. Дизайн готов, фронтенд готов, предварительно протестирован и сдан команде Metascan, начались две недели ожидания. И в один день открыв боевой сервис мы видим заветный текст:

На следующий день последовал релиз. Конечно после выпуска в бой последовали еще правки, так как объем тестовой информации и боевой сильно отличается.

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

Ключевые лица со стороны Verno:

Виктор Живилков - Руководитель проекта

Ульяна Рожнова - Team Lead UX/UI-дизайнер

Попов Сергей - Team Lead Frontend-developer

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

Необходимо разработать сервис или ПО - будем рады помочь!

А осенью выйдет еще один кейс с крутым внутренним сервисом. Подписывайтесь и следите за обновлениями!