Стойкость пароля

Дата публикации: 2015-12-15

Стойкость пароля

От автора: статья от нашего гостя Pankaj Parashar. Pankaj эксперт в области всего, что связано с <progress> и <meter>. Данная статья будет тоже на эту тематику. В этой статье он расскажет нам, как создать лучший с семантической точки зрения измеритель стойкости пароля.

Крупные сайты типа 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 есть подходящая статья, в которой вы ознакомитесь с основами. Настоятельно рекомендую прочесть ее перед тем, как двигаться дальше.

Базовая разметка

Начнем с базовой разметки: поле input для пароля и парный label.

<label for="password">Enter password</label>
<input type="password" id="password" required>

1 2	<label for="password">Enter password</label> <input type="password" id="password" required>

Под input’ом необходимо добавить meter с тегом параграфа. В параграфе мы будем показывать и объяснять текущее значение стойкости. Так как zxcvbn возвращает значения от 0 до 4, то минимально возможное значение это 0, а максимальное 4. Если ничего не указано, то по умолчанию значение атрибута min равно 0.

<meter max="4" id="password-strength-meter"></meter>
<p id="password-strength-text"></p>

1 2	<meter max="4" id="password-strength-meter"></meter> <p id="password-strength-text"></p>

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.5em;

  /* только для 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);
}

meter {

/* сбрасываем стили по умолчанию */

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

margin: 0 auto 1em;

width: 100%;

height: 0.5em;

/* только для 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; }

/* 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.

<script src="//cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.2.0/zxcvbn.js"></script>

1	<script src="//cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.2.0/zxcvbn.js"></script>

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 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 = "";
  }
});

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!

Автор: Pankaj Parashar

Источник: //css-tricks.com/

Редакция: Команда webformyself.

Метки: css