Кейс: менеджер паролей с браузерными расширениями для Firefox, Chrome, Edge и Safari

К нам обратилась американская компания, которая занимается страхованием и инвестициями. У нее была корпоративная программа по хранению паролей на PHP-фреймворке Fat-Free Framework — система заметок со списком категорий, где пользователи сохраняли свои пароли, генерировали QR-коды и делали записи.

Заказчик хотел продавать эту программу как SaaS-решение — облачный сервис, доступ к которому предоставляется по подписке. Для этого ее нужно было доработать до полноценного менеджера паролей. Пользователи смогли бы пользоваться сервисом, оплатив один из тарифов: бизнес-, семейный или личный. А компания получила бы дополнительный источник дохода.

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

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

Команда OrbitSoft состояла из менеджера, fullstack-разработчика, фронтенд-разработчика, DevOps и дизайнера. Сначала мы проанализировали функции исходного сервиса заказчика и создали план работы. В качестве прототипа выбрали менеджер паролей Dashlane.

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

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

Оплата и управление подписками осуществляются через PayPal или Stripe. Какие еще есть сервисы онлайн-оплаты и в чем их особенности, мы рассказали в статье «Какой платежный шлюз самый удобный». Мы сравнили Stripe, CoinPayments, PayPal, Google Play Billing и Apple In-App Purchase, а когда их оказалось мало, предложили заказчику другое решение.

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

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

Как правило, пользователям трудно запоминать такие пароли, поэтому программа не только предлагает случайный набор символов в виде пароля, но и сохраняет его для последующего использования. Также она предлагает сохранить другие часто вводимые данные: номер карты, адрес, ФИО пользователя.

2. При повторном входе на сайт менеджер паролей автоматически подставляет нужный пароль в окно ввода

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

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

3. Все данные сохраняются в зашифрованном виде

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

В OrbitSoft есть готовая команда IT-специалистов под ваши задачи:

• Разработка, вывод на рынок и поддержка Saas-решений.
• Разработка мобильных и веб-приложений, систем и сайтов, плагинов для Firefox, Chrome, Edge, Safari и других браузеров.
• Интеграция онлайн-сервисов с платежными системами и POS-терминалами.

Обсудить разработку

По ТЗ заказчика менеджер паролей должен работать в виде плагина в Google Chrome, Firefox и Safari. Все эти браузеры поддерживают Web Extensions API той или иной версии Manifest — API для браузерных расширений от Google.

Мы вели разработку с учетом обеих версий Manifest:

• Google Chrome и большинство chromium-браузеров уже работают с Manifest V3, а некоторые chromium-браузеры запрещают добавление новых расширений на предыдущей версии Manifest V2.
• Firefox и Safari пока поддерживают Manifest V2 и частично поддерживают Manifest V3.
• В некоторых случаях с версии V2 легко перейти на V3.

Мы начали с расширения для Chrome с использованием Manifest V2, чтобы затем импортировать его в Firefox и Safari. После успешной реализации перенесли на Manifest V3 для Chrome.

В процессе протестировали расширение в Microsoft Edge, так как этот браузер быстро набирает популярность и ставится по умолчанию в операционные системы семейства Windows последних версий. Это несложно, так как Edge тоже основан на chromium. После этого мы отладили код под Firefox.

С браузером Safari было сложнее: разработка требует среды macOS и специфического инструментария. Мы использовали XCode — среду для разработки ПО для Apple. В ней можно не только разработать, но и собрать расширение. Поддержка Manifest V2 в Safari реализована хорошо — импортирование кода для этого браузера не вызвало сложностей.

OrbitSoft разработал браузерные расширения менеджера паролей для Google Chrome, Firefox и Safari. Они автоматически сохраняют и обновляют пароли и другие данные пользователей при регистрации на сайтах.

Создание и хранение паролей

Разработчики продумали путь пользователя после клика на кнопку расширения:

1/5 слайд: Так выглядит окно пользователя после регистрации и авторизации

2/5 слайд: Если пользователь еще не сохранил ни одного пароля, при входе в плагин он видит пустую форму

3/5 слайд: Когда пользователь регистрируется, расширение предлагает начать создавать пароли. Если сохранен только один пароль, система авторизует пользователя на сайте автоматически

4/5 слайд: Если пользователь хочет войти под другими учетными данными, он может заполнить пустую форму и создать новую пару «логин — пароль» или отредактировать прежний вариант. Адрес сайта подставляется автоматически, но его можно изменить

5/5 слайд: Генератор паролей предлагает пользователю случайную комбинацию символов в качестве пароля

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

Двухфакторная аутентификация

Расширение поддерживает как обычную, так и двухфакторную аутентификацию. Для этого есть раздел One-time password — одноразовый пароль. Это набор символов, который пользователь может использовать раз в течение 30 секунд. Это удобно, например, при работе с платежными данными: если злоумышленники получат доступ к одноразовому паролю, они не смогут ввести его повторно.

Полное шифрование данных

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

Готовые продукты и индивидуальная разработка

Системы и платформы:

• POS + система учета складских остатков
• Решения для обработки биг‑даты
• Инструменты для управления рекламой и закупки трафика

Программные продукты:

• Мобильные приложения
• Интернет-магазины
• Видеоплатформы
• Онлайн-сервисы

Развитие и поддержка:

• Системное администрирование
• Разработка высоконагруженных систем на заказ

Консалтинг:

• Аудит работающих программных решений
• Консультации: подберем лучшее техническое решение под задачи и расскажем, как его внедрить

Обсудить или заказать разработку