Генератор паролей на JavaScript

Чтобы закрепить пройденный на курсере курс по AngularJS, я переписал свой старый генератор паролей OktoPass заново: переверстал страницу с Bootstrap, избавился от jQuery и переделал сам механизм генерации паролей. Ссылка на сервис: password-generator.axisful.info

Это было занятно, у меня получилось веб-приложение со стильной шёрсткой и адаптивной вёрсткой, а в процессе я написал пару велосипедов для серверного микро-движка и фронтенда, вроде поддержки переводов и работы с URL.

Далее я опишу некоторые ключевые моменты, на которых работает OktoPass.

Раньше приложение полагалось на встроенный в JavaScript Math.random(), который выдаёт не криптографически стойкие случайные числа. Для задач, связанных с безопасностью, такой метод не подходит.

Вместо этого рекомендуется использовать современный интерфейс Web Crypto API, который использует генератор псевдо-случайных чисел с начальным зерном, подробнее на MDN web docs. Технология экспериментальная, и поддерживается не всеми браузерами, поэтому приложение проверяет поддержку Web Crypto API, и если её нет, то выполняет запрос на сервер, где пароль генерируется гарантированно с соблюдением условий безопасности.

JavaScript: генерация случайной строки

В сердце гирлянд из сервисов, компонент и директив находится смысл всего приложения:

PHP: генерация случайной строки

В PHP ситуация проще: в 7-й версии появилась функция random_int, которая выдаёт криптографически безопасное случайное целое число в заданном диапазоне (включительно):

Для PHP 5.6 версии (последняя поддерживаемая ветки 5.x) можно установить полифил random_compat:

Подключить файл библиотеки и код в предыдущем примере будет работать так же (без объявления типов, конечно):

Полифил поставляет функции random_bytes и random_int, больше примеров на гитхабе.

Ссылки

Старая версия генератора описана в этой статье.

Для разработки я использовал:

  • TinyPNG — онлайн-оптимизатор изображений, сжимает лучше, чем пару консольных программ, что у меня были установлены, и существенно лучше, чем GIMP.
  • Responsive Image Breakpoints Generator — на этом ресурсе я разрезал большую картинку для фона на разные размеры под разные разрешения дисплеев.
  • http://caniuse.com/#feat=getrandomvalues — статистика о доступности Web Crypto API в браузерах.
  • Web Crypto API на MDN web docs.
Загрузка...