Строим личный кабинет для SaaS-сервиса по безопасности

image

В эпоху бурного развития SaaS отсутствие личного кабинета для облачного сервиса уже считается просто неприличным. Но для сервисов защиты от ботов и других киберугроз есть еще одна важная причина: они не похожи на такие популярные сервисы, как облачные хранилища (типа Azure, AWS), аренда виртуальных серверов (DigitalOcean) или система контроля версий (GitHub, Gitlab) по той причине, что клиентам здесь часто трудно понять, за что именно они платят деньги. Только продвинутая статистика и наглядные графики могут четко ответить на этот вопрос. Поэтому у процесса создания личного кабинета в Variti были свои особенности.
Зачем нужен личный кабинет пользователю анти-бот решения?

Прозрачность работы


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

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

Разгрузка техподдержки


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

Некоторые простые настройки можно переключить обычным On/Off тумблером, например, автоматическое перенаправление с «www-поддомена» на основной домен (www.example.com → example.com). Некоторые — с помощью нашего Telegram-бота, о котором мы недавно писали. Но вот более сложные настройки требует больше действий от клиента и помощи техподдержки. Например, у нас есть Bot Mitigation — опция постоянной фильтрации, которая постоянно блокирует всех ботов, которые будут стучаться к защищаемому ресурсу. Но здесь есть и свои нюансы, ведь не все боты плохие. Например, у клиентов могут быть свои «белые» боты (для синхронизации баз данных, настройки с Telegram Bot, поисковые роботы и т.д.) Все подобные сценарии необходимо обсудить с клиентом, чтобы ненароком не нарушить бизнес-процессы.

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

Например, представьте, что хакеры запустили Botnet-атаку с целью парсинга. Клиенты видят на графиках рост запросов и в этот момент просят включить защиту от ботов (Bot Mitigation). Выше мы описали почему это опция может занимать много времени. А в это время другому клиенту понадобилось включить простую настройку или получить статистику по запросам на какой-то период.

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

Основные вкладки


Итак, вот что у нас есть в личном кабинете.

1. Информационная панель


image

Здесь находится список ресурсов клиента. По каждому из них доступно 7 вкладок с подробной статистикой. Вот самые популярные из них:

Request Analytics — подробная информация по запросам к ресурсу. Отображает участников потока запросов:

  • humans — запросы от пользователей;
  • good bots — запросы от поисковых систем или мессенджеров;
  • bad bots — заблокированные ботовые запросы;
  • запросы из «белого списка» — запросы с проверенных ресурсов, которые самостоятельно добавляет клиент.


BandWidth — содержит информацию о трафике, который уже прошел наши кластеры и отфильтрован. Ключевой показатель — 95-процентиль использования ширины пакетного канала, и он же — основание расчета тарификации. Без дополнительной стоимости пользователь может превысить полосу пропускания на 5% от установленной тарифом (на период всего времени пользования каналом). Например, если были редкие всплески трафика, то они таким образом сглаживаются, и можно увидеть более реальную картину использования трафика. В течение месяца используемая полоса пропускания измеряется в определенный интервал, например один раз в 1 минуту. Затем, в конце месяца вычитаем 5% максимальных значений, то есть всплесков трафика. Из оставшихся 95% выбирается максимальное число, которое используется для расчета оплаты.

Responses Times and Responses Codes — эти показатели демонстрируют распределение времени и распределение кодов ответа сервера ресурса клиента. Эту информацию используют для определения момента «деградации» производительности сайта.

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

2. Сервисы


image

В этом разделе можно самостоятельно настроить сервисы.

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

  • Bot Mitigation  — постоянная фильтрация нелегитимных автоматизированных запросов к ресурсу
  • Web Application Firewall — сервис защиты от целевых атак, таких как XSS или SQL-инъекции
  • Global Whitelist — разрешение доступа к сайту для ботов поисковых систем и систем для превью сайта


Вкладка Aliases позволяет добавить алиасы для вашего ресурса, например, domen.example.com или example.net. Во вкладке Origins можно настроить список IP-адресов, на которые нужно отправлять отфильтрованный трафик.

WhiteList и BlackList содержат список IP-адресов. Запросы от «белого списка» необходимо всегда пропускать на сайт, а от «черного списка» — всегда нельзя. Может использоваться для ресурсов, в которых вы точно уверены, что они ваши или точно принадлежат вашим конкурентам.

3. Разметка трафика


image

При разметке трафика используется технология Active Bot Protection. Она проверяет трафик на »качество» по заранее размеченным URL-адресам. Например, вам предлагают разместить рекламный баннер и обещают по вашей ссылке пригнать трафик. Если вам попался мошенник, который вместо реальных людей просто нагонит туда нужное количество ботового трафика и со статистикой отчитается о достижении результата, то в этой вкладке можно посмотреть, кто к вам приходил: боты или люди. Также эту информацию можно посмотреть и в разрезе одного дня.

4. Техподдержка и Help Center


image

Помимо телефона, электронной почты и Telegram с техподдержкой можно связаться в разделе Support: создать новый запрос, пообщаться со специалистами и отследить статус предыдущих запросов. Help Center переводит на страницу FAQ с ответами на частые вопросы.

Делаем личный кабинет удобнее


Личный кабинет SaaS-сервиса в 2020 году должен быть быстрым, удобным и легко масштабируемым веб-приложением. Никаких компромиссов, ведь все инструменты для этого доступны. Исходя из этих соображений, в 2019 году мы переписали сервис личного кабинета на современный фреймворк Angular.

Это один из топовых инструментов для создания SPA-приложений (Single Page Application). SPA — это архитектура, которая позволяет обновлять и добавлять информацию «незаметно» для пользователя: ему не нужно обновлять страницу, чтобы увидеть, например, новый статус или подключение новой услуги. С технической точки зрения, страница загружается один раз, а затем динамически обновляет контент в зависимости от действий пользователей или скриптов. Например, на вкладке Dashboard график и статистика по запросам обновляются в режиме реального времени без перезагрузки страницы. То же самое происходит и при переходе на другие страницы сайта: обновляется только необходимая часть страницы. Такой подход помогает быстрее получить данные и снизить нагрузку на сервер.

В этом году мы запланировали несколько крупных обновлений в личном кабинете. Все обновления ведут к одному: прозрачное и гибкое управление сервисом фильтрации трафика. Прозрачное означает получение максимума деталей по отчётам, вплоть до единичных запросов. Гибкое управление — чтобы настроить любые условия по трафику, например, исключить конкретные URL-адреса или разрешить запросы на origin трафик до определенного лимита.

Выводы


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

Второе — современные UI-фреймворки (React, Angular, Vie) можно легко внедрить и масштабировать. На старте, скорее всего, будет некий MVP для получения обратной связи от первых клиентов. Важно, что как только будет виден план развития, нужно сразу же сделать всё «по уму» с чистого листа.

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

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

© Habrahabr.ru