Стійкість паролю

21

Від автора: стаття від нашого гостя Pankaj Parashar. Pankaj експерт в області все, що пов’язано з і . Дана стаття буде теж на цю тематику. В цій статті він розповість нам, як створити кращий з семантичної точки зору вимірювач стійкості пароля.

Великі сайти типу Dropbox, Gmail і eBay під час реєстрації використовують спеціальні індикатори стійкості пароля. Дані індикатори наочно показують користувачеві складність його пароля, важко його зламати.

Стійкість паролю

Сама практика вимірювання стійкості пароля не нова, більшість з побачених мною прикладів побудовані на старих тегах div та span. З появою HTML5 став доступний тег meter, який на мою думку більш точно передає зміст і відмінно підходить в даному випадку. Далі в статті будемо називати цей тег «вимірювач стійкості пароля».

А чому не скористатися HTML5 progress?

Як нам підказує назва, HTML5 progress використовується для відображення прогресу завдання або будь-якої активності. А відображення стійкості пароля не схоже на завдання або активність. У нашому випадку немає чіткого прогресу щодо досягнення конкретного значення або завершеності дії. А, отже, можна з упевненістю сказати, що progress нам не підходить.

Як обчислити довжину пароля?

Для обчислення стійкості пароля ми скористаємося Dropbox бібліотекою zxcvbn. Є і схожі бібліотеки, з допомогою яких теж можна розрахувати пароль, однак ми будемо використовувати zxcvbn так як:

Простий API, введений пароль обробляється, і в якості результату на виході ми отримуємо значення від 0 до 4 (0 – слабкий, 4 — сильний). Цей спосіб відмінно працює з meter, який в якості value може приймати заздалегідь заданий діапазон min – max.

Даний спосіб оцінює реальну стійкість пароля шляхом накладення всіх можливих шаблонів і порівняння їх з англійським словником, поширеними паролями, клавіатурними шаблонами і повтореннями.

Бібліотека розроблена Dropbox! В офіційному блозі можна більш детально вивчити технічні особливості алгоритму.

Якщо ви до цього не були знайомі з HTML5 meter, то на сайті CSS-Tricks є відповідна стаття, в якій ви ознайомитеся з основами. Настійно рекомендую прочитати її перед тим, як рухатися далі.

Базова розмітка

Почнемо з базовою розмітки: поле вводу пароля і парний label.

Enter password

Під input’ом необхідно додати meter з тегом параграфа. У параграфі ми будемо показувати і пояснювати поточне значення стійкості. Так як zxcvbn повертає значення від 0 до 4, то мінімально можливе значення це 0, а максимальне 4. Якщо нічого не вказано, то за замовчуванням значення атрибута min 0.

W3C рекомендує вставляти тег параграфа всередину тега meter для підтримки в старих браузерах. Але ми залишимо тег meter порожнім, а трохи пізніше розглянемо можливі способи фолбека.

Стилізуємо індикатор

У цьому розділі ми займемося додаванням стилів тегу meter. Стилізацію інших елементів я залишу на вас. Щоб зрозуміти як додавати стилі до meter, необхідно розібрати принцип роботи тега в браузері. Наприклад, ось так Blink/Webkit і Gecko браузери бачать тег meter:

Стійкість паролю

Бібліотека zxcvbn повертає значення від 0 до 4. Тобто існує 5 можливих значень стійкості пароля. Отримати кожне з них можна з допомогою meter[value=»0″], meter[value=»1″] і т. д. Значення визначає стійкість пароля. Останнє значення означає найвищу захист від злому пароля. Кожне значення ми будемо відображати своїм кольором. Значення value=»0″ можна пропустити, та воно не відображається.

Стилі шкали

meter {
/* скидаємо стилі за замовчуванням */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0 auto 1em;
width: 100%;
height: 0.5 em;
/* тільки для Firefox */
background: none;
background-color: rgba(0, 0, 0, 0.1);
}
meter::-webkit-meter-bar {
background: none;
background-color: rgba(0, 0, 0, 0.1);
}

Стилі значення шкали

/* Webkit браузери */
meter[value=»1″]::-webkit-meter-optimum-value { background: red; }
meter[value=»2″]::-webkit-meter-optimum-value { background: yellow; }
meter[value=»3″]::-webkit-meter-optimum-value { background: orange; }
meter[value=»4″]::-webkit-meter-optimum-value { background: green; }
/* Gecko браузери */
meter[value=»1″]::-moz-meter-bar { background: red; }
meter[value=»2″]::-moz-meter-bar { background: yellow; }
meter[value=»3″]::-moz-meter-bar { background: orange; }
meter[value=»4″]::-moz-meter-bar { background: green; }

Оновлення шкали

Спочатку давайте через script додамо бібліотеку zxcvbn від cdnjs перед тегом body.

Zxcvbn додає всього одну функцію в глобальний простір імен. На вхід функція приймає один параметр (пароль) і повертає об’єкт з наступними властивостями:

guesses – обчислює кількість спроб для злому пароля

guesses_log10 – логарифмічне значення спроби за основою 10

crack_time_seconds – обчислене дійсно час на злам у секундах

crack_time_display – Час злому в читається форматі, приклад, «3 години» і т. д.

score – ціле число від 0-4 (будемо використовувати шкалою)

feedback.warning – Підказка, якщо з паролем щось не так

feedback.suggestions – Список пропозицій по вибору найменш впізнаваного паролю

sequence – Список шаблонів, які zxcvbn заснувала на обчислених спроби злому

calc_time – час, який потрібно zxcvbn для обчислення відповіді, в мілісекундах

На вихід zxcvbn можна подати додатковий параметр user_inputs – масив рядків, що містить заборонені послідовності символів для пароля, засновані на особистих даних користувача типу імені, email і т. д.

Тепер при будь-якій зміні введеного пароля, пароль буде відправлятися в функцію zxcvbn, а індикатор стійкості буде оновлюватися на основі значення score. Крім атрибута value тега meter ми будемо оновлювати текстове повідомлення, призначене для користувача. Спершу, необхідно перевести значення читається формат:

var strength = {
0: «Worst»,
1: «Bad»,
2: «Weak»,
3: «Good»,
4: «Strong»
}

Потім, додамо до поля введення пароля обробник події, який буде стежити за значенням поля і оновлювати індикатор і текстове повідомлення.

var password = document.getElementById(‘password’);
var meter = document.getElementById(‘password-strength-meter’);
var text = document.getElementById(‘password-strength-text’);
password.addEventListener. (‘input’, function() {
var val = password.value;
var result = zxcvbn(val);
// Оновлюємо індикатор стійкості пароля
meter.value = result.score;
// Оновлюємо текст
if (val !== «») {
text.innerHTML = «Strength:» + strength[result.score];
} else {
text.innerHTML = «»;
}
});

У демо нижче додатково використовуються значення feedback.warnings і feedback.suggestions, підказують як зробити пароль більш стійким.

Фолбэк

На даному етапі наш індикатор досить-таки непогано працює у всіх браузерах, які підтримують HTML5 meter. Гарна новина полягає в тому, що нам немає потреби піклуватися про браузерах, що не підтримують даний тег. Такі браузери будуть просто ігнорувати тег і відображати текст з радою відразу після індикатора. А це вже фолбэк для старих браузерів.

Якщо ж ви хочете, щоб користувачі бачили одну і ту ж картинку, то можете імітувати роботу індикатора з допомогою div і span всередині meter. Браузери, які не розуміють тег meter, будуть просто ігнорувати його і відображати його вміст. У попередній своїй статті на схожу тематику я більш детально розібрав даний фолбэк.

Зручний індикатор стійкості пароля для користувачів?

Дана стаття написана не для того, щоб викликати дискусії щодо того, чи потрібні користувачам індикатори стійкості пароля чи ні. Раціональні та розумні аргументи є і в тієї, і з іншого боку. Тим не менше, основні суперечки точаться навколо того, що індикатор не може реально оцінити стійкість пароля. Я ж вважаю, що Dropbox впоралися зі своїм завданням, і бібліотека zxcvbn пропонує найбільш реалістичну оцінку стійкості пароля на злом.

Чи Будете ви використовувати цей індикатор у своєму дизайні, залежить тільки від вас. Але якщо ж ви все-таки вирішили це зробити, використовуйте HTML5 meter!