Разработка плагина надежности пароля с помощью jQuery

Пароли являются наиболее часто используемым механизмом аутентификации. Несмотря на то, что многие сайты переходят на многоэтапную аутентификацию, пароли по-прежнему играют ключевую роль в защите вашей учетной записи. Надежный пароль имеет решающее значение для безопасности учетной записи, и эта статья научит вас, как разработать плагин, который контролирует надежность пароля. Мы собираемся использовать библиотеку zxcvbn и jQuery для создания полнофункционального измерителя надежности пароля для веб-сайтов.

Вступление

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

Измеритель надежности пароля рассчитывает надежность введенного пользователем пароля. Как правило, он отображается в виде уровней силы, таких как очень слабый, слабый, хороший, сильный и т. Д. Счетчик обновляется при каждом вводе пользователем, поэтому расчет должен onkeypressonkeyup<script type="text/javascript" >
var blackList = ["admin"];
var strength = zxcvbn("password", blackList);
</script> Когда пользователь пытается создать новую учетную запись, слабые пароли могут быть обнаружены и отклонены, что повышает общую безопасность сайта.

Расчет надежности пароля

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

• Количество символов
• Использование заглавных букв, цифр и символов.
• Слова в черном списке.

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

zxcvbn

В этом руководстве мы планируем реализовать измеритель надежности пароля с использованием zxcvbn . zxcvbn считается реалистичным измерителем надежности пароля, который использует набор данных общих английских слов, повторяющихся шаблонов, последовательностей и общих английских имен для расчета надежности. Это также позволяет нам занести в черный список некоторые слова при расчете силы. Результат, предоставляемый этой функцией, намного точнее, чем правила расчета прочности вручную. Понимание того, как zxcvbn использует математические функции для расчета прочности, выходит за рамки данного руководства. Те, кто хочет понять логику в zxcvbn, могут посмотреть статью в Dropbox Tech Blog .

Рассмотрим следующий код, который использует функцию zxcvbn. Первый аргумент обязателен для хранения проверяемого пароля. В этом случае пароль — «пароль». Второй аргумент является необязательным и может содержать массив значений для внесения в черный список. Как правило, мы не хотим, чтобы пароль был похож на имя пользователя. Таким образом, мы должны по крайней мере использовать имя пользователя в качестве черного списка для получения надежных паролей.

 console.log

Функция zxcvbn возвращает объект, содержащий следующие свойства.

• сила.энтропия — измеряется в битах.
• force.crack_time — это приблизительное время взлома.
• force.crack_time_display — это также используется, чтобы предоставить время взлома удобным для пользователя способом, используя месяцы, годы, столетия и т. д.
• force.score — это фактическая сила, которую мы будем использовать внутри измерителя прочности пароля. Он варьируется от нуля до четырех, где ноль обозначает слабый пароль, а четыре — надежный пароль. Независимо от того, насколько сложен ваш пароль, он не превысит четырех.
• force.match_sequence — предоставляет список шаблонов, используемых для расчета силы. Это объект с несколькими объектами, содержащими шаблоны, такие как перебор, словарь и т. Д. Вы можете проверить это, вызвав strengthscore
• force.calculation_time — это время, затрачиваемое на расчет надежности пароля. Как правило, это будет несколько миллисекунд.

Есть много параметров, которые мы можем использовать для надежности пароля, но мы не хотим слишком много сложностей в проверке пароля. Поэтому, как правило, мы будем использовать только параметр crack_time_display Если необходимо, мы можем усилить пароли, используя crack_timescorejquery.password.strength.js

Создание пароля Надежность

Мы собираемся создать измеритель надежности пароля многократного использования, используя jQuery, и будем использовать jQuery Plugin Boilerplate для поддержания стандартной структуры. Счетчик может быть разработан во многих отношениях в соответствии с вашими предпочтениями. Некоторые плагины предоставляют виджет фактического пароля, в то время как некоторые плагины предоставляют сообщение о надежности пароля, так что пользователи могут вставлять его в любом месте. Мы сосредоточимся на последнем, поскольку это добавляет больше гибкости при разработке счетчика паролей. Вот требования к нашему счетчику:

• Нам нужны базовые проверки, такие как проверка пустых значений, равенство пароля и подтверждение значений пароля.
• Нам могут потребоваться специальные проверки, такие как минимальное количество символов, блокировка определенных символов и т. Д.
• Фактическая сила сообщается с использованием предварительно определенных уровней, таких как очень слабый, слабый, средний, сильный и т. Д.
• Мы можем использовать время взлома для реализации прочности в пределах каждого из указанных уровней.

Реализация плагин измеритель силы

Во-первых, нам нужно получить копию jQuery Plugin Boilerplate с GitHub. После загрузки поместите файл в папку вашего проекта и переименуйте его в <html>
<head>
<title>jQuery Password Strength Checker</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="zxcvbn.js"></script>
<script type="text/javascript" src="jquery.password.strength.js"></script>
</head>
<body>
</body>
</html> Затем загрузите zxcvbn с GitHub. Включите эти файлы в файл проекта, как показано в следующем коде.

 jquery.password.strength.js

Теперь откройте файл PasswordStrengthManager Я предполагаю, что вы знакомы с jQuery Plugin Boilerplate. Сначала мы должны обновить имя плагина и раздел параметров по умолчанию, как показано в следующем коде. Здесь мы изменили имя плагина по умолчанию на minChars У нас есть две опции для указания значений пароля и подтверждения полей пароля. У нас также есть массив для определения слов в черном списке. Далее у нас есть две опции, называемые maxCharsadvancedStrengthvar pluginName = "PasswordStrengthManager",
defaults = {
password: "",
confirm_pass : "",
blackList : [],
minChars : "",
maxChars : "",
advancedStrength : false
}; Наконец, у нас есть опция function Plugin(element, options) {
this.element = element;
this.settings = $.extend({}, defaults, options);
this._defaults = defaults;
this._name = pluginName;
this.init();
this.info = "";
}

 init

Далее мы можем перейти в конструктор плагина, как показано в следующем коде. Здесь у нас есть стандартный шаблонный код, кроме информации, которую мы использовали для хранения сообщения, генерируемого измерителем пароля. После того, как плагин используется для любого элемента HTML, будет вызвана эта функция.

 init

Функция инициализации плагина используется для инициализации конкретного кода плагина и запуска процесса. Давайте посмотрим на модифицированную функцию this.settings Сначала мы выполняем обязательные проверки, такие как проверка на наличие пустых паролей и равенство обоих полей паролей. this.info Сообщение для счетчика паролей хранится в init: function() {
if ("" == this.settings.password || "" == this.settings.confirm_pass) {
this.info = "Password fields cannot be empty";
} else if (this.settings.password != this.settings.confirm_pass) {
this.info = "Passwords doesn't match";
}

$(this.element).html(this.info);
}, Наконец, мы устанавливаем сообщение в элемент счетчика паролей, прошедший инициализацию.

 minChars

Далее мы переходим в раздел пользовательских валидаторов. Некоторые сайты предпочитают свои собственные ограничения, такие как диапазон символов для паролей или запрещение определенных символов. Мы собираемся реализовать два валидатора для maxCharsminChars Мы уже определили maxCharsminChars: function() {
if (this.settings.password.length < this.settings.minChars) {
this.info = "Password should have at least " + this.settings.minChars + " characters";
return false;
} else {
return true;
}
},

maxChars: function() {
if (this.settings.password.length > this.settings.maxChars) {
this.info = "Password should have maximum of " + this.settings.maxChars + " characters";
return false;
} else {
return true;
}
}, Эти функции будут выполняться только в том случае, если мы передадим значение при инициализации. Давайте определим функции для этих валидаторов:

 customValidators

Эти две функции проверяют минимальную и максимальную длину символов для данного пароля и возвращают логическое значение. Далее нам нужен способ вызвать эти ручные проверки. Поэтому мы создаем функцию под названием customValidators: function() {
var err = 0;

return err;
}

 err

Здесь мы выполняем все пользовательские валидаторы и увеличиваем значение переменной if Как вы можете видеть, init Таким образом, если мы не передадим параметры при инициализации, эти валидаторы не будут выполнены. Наконец, вызовите эту функцию в качестве первой строки функции init

Расчет силы zxcvbn

Это последняя часть этого плагина, где мы рассчитываем реальную надежность пароля, используя zxcvbn. Обновите функцию init: function() {
var errors = this.customValidators();

$(this.element).html(this.info);
},

 switch

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

Мы используем оператор score Вы можете изменить уровни в соответствии с вашими предпочтениями. Для первых четырех уровней я только что рассмотрел показатель силы. Также мы можем использовать свойство crack_time_display В этом плагине я использовал его только для оценки силы четыре. Вы можете использовать его и для других целей.

Значение crack_time_display Итак, мы разбиваем уровень на два подуровня, используя значение crack_time_display Если пользователь решит не включать расширенную силу, будет использоваться общий уровень, называемый Strong Не стесняйтесь поиграть с этими свойствами, чтобы создать расширенные счетчики паролей.

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

 $.fn[pluginName] = function (options) {
  this.each(function() {
    $.data(this, "plugin_" + pluginName, new Plugin(this, options));
  });
  return this;
};

Сейчас мы завершили реализацию плагина. Давайте посмотрим на это в действии, посмотрев на следующий код.

 <script type="text/javascript" >
  $(function() {
    $("#pass").keyup(function() {
      initializeStrengthMeter();
    });

    $("#confirm_pass").keyup(function() {
      initializeStrengthMeter();
    });
  });

  function initializeStrengthMeter() {
    $("#pass_meter").PasswordStrengthManager({
      password: $("#pass").val(),
      confirm_pass : $("#confirm_pass").val(),
      minChars : "5",
      maxChars : "15",
      blackList : ["efewf"],
      advancedStrength : true
    });
  }
</script>

Мы используем общую функцию initializeStrengthMeter Эта функция будет вызываться для элемента, используемого для счетчика паролей. Итак, определите пустой элемент divid Здесь у нас есть все атрибуты, определенные в плагине. Вы можете добавлять или удалять их по мере необходимости. Наконец, мы должны вызвать это при событиях keyup

Вывод

В этом руководстве мы выявили недостатки обычного измерителя надежности пароля и использовали zxcvbn для реалистичного расчета надежности. Мы разработали плагин jQuery для обработки общих случаев использования для проверки пароля. Вы можете посмотреть демоверсию этого руководства здесь и загрузить исходный код . Не стесняйтесь расширять плагин с вашими собственными требованиями.