Пишем свой генератор паролей
Пишем свой генератор паролей
Прокачиваем собственный генератор паролей Превращаем генератор паролей в настоящую программу

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

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

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

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

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

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

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

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

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

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

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

    
language: HTML
<!DOCTYPE html>

<html>

<!-- служебная часть -->

<head>

 <!-- заголовок страницы -->

 <title>Генератор паролей</title>

 <!-- настраиваем служебную информацию для браузеров, можно пока не вникать -->

 <meta charset="utf-8">

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

 <meta name="viewport" content="width=device-width, initial-scale=1">

 <!-- подключаем функцию, которая хеширует строку -->

 <script src="https://thecode.media/wp-content/uploads/2019/05/js-md5.js"></script>

 <style type="text/css">

 <!-- задаём CSS-стили прямо здесь же, чтобы всё было в одном файле -->

 </style>

<!-- закрываем служебную часть страницы -->

</head>

<body>

 <!-- тут будет наша страница -->

 <script>

 <!-- тут будет пишем скрипт, который генерирует пароль по нажатию кнопки -->

</script>

</body>

<!-- конец всей страницы -->

</html>


Ско­пи­ро­вать код
Код ско­пи­ро­ван

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

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

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

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

    
language: HTML
<!-- ставим всё содержимое в один блок по центру  -->

<div class="container"  margin: auto;">

 

 <!-- заголовок страницы -->

 <h2 class="todo__caption">Генератор паролей</h2>

 

 <!--делаем отступ -->

 <br>

 

 <!-- задаём поле ввода для адреса нужного сайта и настраиваем параметры поля -->

 <input type="text" id="site_url" size="50" placeholder="Вставьте адрес сайта, где вам нужен пароль">

 

 <!--делаем отступ -->

 <br>

 

 <!-- задаём поле ввода для кодового слова и настраиваем параметры поля -->

 <input type="text" id="keyword" size="50" placeholder="Напишите кодовое слово, чтобы сделать пароль сильнее">

 

 <!--делаем двойной отступ -->

 <br>

 <br>

 

 <!-- вставляем кнопку, которая запускает генератор пароля и настраиваем отступы -->

 <button style="font-size: 100%; padding:5px 10px 10px 10px" onclick="generate()">Создать пароль</button>

 

 <!--выводим сгенерированный пароль -->

 <p>Ваш пароль:</p>

 <div id = "pass_text" style="font-weight: bold"></div>  

  

</div>


Ско­пи­ро­вать код
Код ско­пи­ро­ван

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


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

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

    
language: CSS
/*задаём общие параметры для всей страницы: шрифт и отступы*/

body{

 text-align: center;

 margin: 10;

 font-family: Verdana, Arial, sans-serif;

 font-size: 16px;

}

 

/* настраиваем внешний вид полей ввода*/

input{

 display: inline-block;

 margin: 20px auto;

 border: 2px solid #eee;

 padding: 10px 20px;

 font-family: Verdana, Arial, sans-serif;

 font-size: 16px;

}


Ско­пи­ро­вать код
Код ско­пи­ро­ван

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


Пишем скрипт

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

    
language: JavaScript
// задаём переменные, где будем хранить адрес сайта, кодовое слово…

var site, salt;

 

// …исходные текстовые данные для пароля и сам пароль

var text, password;

 

// объявляем функцию, которая создаёт пароль и выводит его на экран

function generate(){

 

 // кладём в соответствующие переменные текстовое значение адреса сайта…

 site = document.getElementById('site_url').value;

 

 // …и кодового слова

 salt = document.getElementById('keyword').value;

 

 // подготавливаем исходную строку для пароля и добавляем в неё наш секретный ингредиент

 text = site + salt + 'Misha Polyanin Molodets';

 

 // на основе этой строки с помощью функции md5, которую мы подключили в самом начале, создаём пароль

 password = md5(text);

 

 // выводим его на экран

 document.getElementById('pass_text').innerHTML=password;

}


Ско­пи­ро­вать код
Код ско­пи­ро­ван

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


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

    
language: HTML
<!DOCTYPE html>

<html>

<!-- служебная часть -->

<head>

 <!-- заголовок страницы -->

 <title>Генератор паролей</title>

 

 <!-- настраиваем служебную информацию для браузеров -->

 <meta charset="utf-8">

 <meta http-equiv="X-UA-Compatible" content="IE=edge">

 <meta name="viewport" content="width=device-width, initial-scale=1">

 

 <!-- подключаем функцию, которая хеширует строку -->

 <script src="https://thecode.media/wp-content/uploads/2019/05/js-md5.js"></script>

 

 <!-- задаём CSS-стили прямо здесь же, чтобы всё было в одном файле -->

 <style type="text/css">

 

   /*задаём общие параметры для всей страницы: шрифт и отступы*/

   body{

     text-align: center;

     margin: 10;

     font-family: Verdana, Arial, sans-serif;

     font-size: 16px;

   }

   /* настраиваем внешний вид полей ввода*/

   input{

     display: inline-block;

     margin: 20px auto;

     border: 2px solid #eee;

     padding: 10px 20px;

     font-family: Verdana, Arial, sans-serif;

     font-size: 16px;

   }

 

 /*закончили со стилями*/

 </style>

 

<!-- закрываем служебную часть страницы -->

</head>

 

<body>

 

 <!-- началась визуальная часть -->

 <!-- ставим всё содержимое в один блок по центру  -->

 <div class="container"  margin: auto;">

 

   <!-- заголовок страницы -->

   <h2 class="todo__caption">Генератор паролей</h2>

   

   <!--делаем отступ -->

   <br>

 

   <!-- задаём поле ввода для адреса нужного сайта и настраиваем параметры поля -->

   <input type="text" id="site_url" size="50" placeholder="Вставьте адрес сайта, где вам нужен пароль">

 

   <!--делаем отступ -->

   <br>

 

   <!-- задаём поле ввода для кодового слова и настраиваем параметры поля -->

   <input type="text" id="keyword" size="50" placeholder="Напишите кодовое слово, чтобы сделать пароль сильнее">

 

   <!--делаем двойной отступ -->

   <br>

   <br>

 

   <!-- вставляем кнопку, которая запускает генератор пароля и настраиваем отступы -->

   <button style="font-size: 100%; padding:5px 10px 10px 10px" onclick="generate()">Создать пароль</button>

 

   <!--выводим сгенерированный пароль -->

   <p>Ваш пароль:</p>

   <div id = "pass_text" style="font-weight: bold"></div>  

    

 </div>

 <!-- закончилась видимая часть -->

 

 <!-- пишем скрипт, который будет генерировать пароль по нажатию кнопки -->

 <script>

   

   // задаём переменные, где будем хранить адрес сайта, кодовое слово…

   var site, salt;

 

   // …исходные текстовые данные для пароля и сам пароль

   var text, password;

 

   // объявляем функцию, которая создаёт пароль и выводит его на экран

   function generate(){

 

     // кладём в соответствующие переменные текстовое значение адреса сайта…

     site = document.getElementById('site_url').value;

 

     // …и кодового слова

     salt = document.getElementById('keyword').value;

 

     // подготавливаем исходную строку для пароля и добавляем в неё наш секретный ингредиент

     text = site + salt + 'Misha Polyanin molodets';

 

     // на основе этой строки с помощью функции md5, которую мы подключили в самом начале, создаём пароль

     password = md5(text);

 

     // выводим его на экран

     document.getElementById('pass_text').innerHTML=password;

 

   }

 

 // закончилась скриптовая часть

 </script>

</body>

<!-- конец всей страницы -->

</html>


Ско­пи­ро­вать код
Код ско­пи­ро­ван

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

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