Найти тему
Журнал «Код»

Пишем свой генератор паролей

Оглавление

Готовый код с уникальным алгоритмом шифрования. Возьми и сделай .

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

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

Предупреждение. Алгоритм, который мы используем, уязвим: если злоумышленник знает ваши секретные слова, он сможет восстановить пароль. Не используйте этот алгоритм для защиты критически важных данных.

Как устроен наш алгоритм

Мы будем брать адрес сайта и шифровать его с помощью алгоритма хеширования MD5. Результат шифрования и будет нашим паролем.

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

Слабое место алгоритма только в том, что если зашифровать им один и тот же текст, получится один и тот же результат. То есть алгоритм работает предсказуемо: если зашифровать адрес mail.yandex.ru с помощью алгоритма MD5, всегда получится B81D1C770FD8F323B57CC73ED7B2546E. Это небезопасно.

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

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

Готовим каркас

За основу мы возьмём страницу, которую мы создавали, когда делали свой список задач. Если вы её ещё не читали — почитайте, будет гораздо легче понимать, что тут происходит. В нашем случае каркас будет выглядеть так:

-2

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

Расставляем содержимое

Вот какой минимум информации должен быть на нашей странице с генератором:

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

Разместим всё это на странице в разделе <body> в том же порядке:

-3
-4

Сохраняем под тем же именем смотрим что получилось и не расстраиваемся от внешнего вида. Его мы поправим на следующем шаге.

-5

Настраиваем стили

Стили помогают улучшить внешний вид страницы и установить нужный размер шрифта, его расположение, отступы, да и вообще всё, что мы видим на экране. Добавим стилей в наш генератор в раздел <style>:

-6

Сохраняем, обновляем, смотрим на результат. Уже получше:

-7

Пишем скрипт

Последнее, что нам осталось добавить в нашу страницу — это сам скрипт, который будет брать со страницы все наши данные, собирать их в одну строку и из неё делать пароль. Его мы положим в раздел <script>:

-8

Всё программа готова. Проверяем работу:

-9

Общий код страницы:

-10

-11
-12
-13
-14

Что ещё можно сделать

  • Заменить секретную строку в коде на свою, чтобы пароль стал ещё уникальнее.
  • Запросить секретную строку у пользователя в самом начале работы программы с помощью команды promt().
  • Сделать чередование заглавных и строчных букв в пароле.
  • Сделать генерацию паролей «на лету», то есть с каждым нажатием клавиши. Тогда не нужна будет кнопка «сгенерировать пароли»
  • Сделать опцию «Добавить спецсимволы», которая будет принудительно вставлять в хеш что-то такое: %:*#@%&. Пригодится для сайтов с повышенными требованиями к безопасности.
  • Обрезать пароль на девяти символах и добавлять между тройками символов дефисы или другие спецзнаки. Красиво будет.
  • Шифровать текст дважды, трижды, сколько угодно раз: то есть когда получили результат, снова прогнали его через шифровщик MD5. Можно даже запросить у пользователя, сколько раз он хочет прогнать свой пароль через шифровальщик.

Пожалуй, сделаем это в другой раз.

Подписывайтесь на наш канал, чтобы пароли были в безопасности!

Где храните пароли? Делитесь!