Как создать надёжные пароли и защищать систему с их помощью
19.11.2020Пароли — это ключи от ваших виртуальных хранилищ данных в интернете — от аккаунта почты, онлайн игры, личной странички в соцсети и т.д. Конечно же, он должен на 100% отвечать такому критерию, как надёжность. То есть он должен быть устойчив к взлому, или подбору. К сожалению, многие пользователи это простое, но обязательное требование к паролям игнорируют. И в итоге, как правило, становятся жертвами злоумышленников. У них пропадают деньги, конфиденциальные данные, геймплейные достижения и пр.
Известно, что 1% пользователей сети то ли из-за лени, то ли из-за халатности при регистрации предпочитают использовать примитивные комбинации, которые можно подобрать с 3-4 попыток. Примеры — «123456», «qwerty», «mypassword». Это, безусловно, является очень большой глупостью. «Лёгкий» ключ для пользователя является «лёгким» и для взломщика.
Эта статья расскажет вам о том, как составлять надёжные пароли и как проверить их на устойчивость к взлому.
Какой пароль можно назвать надёжным?
Хорошие ключи от учётной записи имеют следующие характеристики:
1. Длина не меньше 10-15 символов (самые устойчивые комбинации и того больше — 20-35 символов).
2. Символьный состав: большие и маленькие английские буквы, цифры, спецсимволы.
3. В комбинации отсутствуют словарные слова (parol, kod, vhod), личные данные (номер телефона, имя, e-mail и т.д.), логические последовательности букв и цифр (1234, 246810, abcdefg).
Чем сложнее, надёжнее комбинация, тем труднее сделать её подбор. Чтобы установить придуманную пользователем последовательность из 12 знаков, может понадобиться свыше 1,5 млн. лет.
Как создать надежный пароль
Чтобы защититься от новейших методов взлома, вам нужны сверхнадежные пароли. Если вы хотите узнать, насколько надежен ваш пароль, и повысить его стойкость, мы подготовили несколько вопросов и советов, которые помогут вам:
Типы надежных паролей
Существует два основных подхода к составлению надежных паролей.
Кодовые фразы основаны на сочетании нескольких существующих слов. В прошлом довольно часто использовались редкие слова с подстановкой символов и вставкой случайных символов посередине, например «Tr1Ck» вместо «trick» или «84sk37b4LL» вместо «basketball». Сейчас алгоритмы взлома уже знакомы с этим методом, так что хорошие кодовые фразы обычно представляют собой сочетание распространенных слов, не связанных друг с другом и расположенных в бессмысленном порядке. Или, как вариант, – предложение, которое разбивается на части, и эти части расставляются по правилам, известным только пользователю.
Пример кодовой фразы – «коровА!жгИ%алыЙ?фагоТъ» (здесь использованы слова «корова», «жги», «алый» и «фагот»).
Кодовые фразы работают, потому что:
- их легко запомнить;
- они устойчивы и к словарным, и к брутфорс-алгоритмам подбора.
Цепочки случайных символов – это бессистемные сочетания символов всех видов. В таких паролях задействованы строчные и прописные буквы, символы и числа в случайном порядке. Поскольку расстановка символов не следует никакому определенному методу, угадать такой пароль невероятно трудно. Даже специализированным программам могут понадобиться триллионы лет, чтобы взломать такой пароль.
Пример цепочки случайных символов: «f2a_+Vm3cV*j» (ее можно запомнить, например, с помощью мнемонической фразы: «фрукты два ананаса подчеркнули и добавили VISA музыка 3 цента VISA умножает джинсы»).
Цепочки случайных символов работают, потому что:
- их практически невозможно угадать;
- их очень сложно взломать;
- их можно запомнить с помощью мышечной памяти и мнемотехники.
Примеры надежных паролей
Теперь, когда вы ознакомились с типами надежных паролей и правилами их составления, давайте закрепим эти знания.
Для этого мы возьмем несколько примеров хороших паролей и попробуем сделать их еще лучше.
Пример 1: dAmNmO!nAoBiZPi?
Почему этот пароль считается надежным?
- Он соответствует кодовой фразе: «Дай мне мороженого! на обед из Питера?»
- В нем используется правило: берутся только две первые буквы из каждого слова, каждая вторая буква пароля – прописная.
- Пароль длинный – 16 символов.
- В нем используются специальные символы: «!» и «?».
- В нем используются прописные и строчные буквы.
Как улучшить этот пароль?
- Добавьте символы, чтобы сделать его еще длиннее.
- Добавьте цифры.
- Пример: dAmNmO!7nAoBvPi?6
Пример 2: !HMnrsQ4VaGnJ-kK
Почему этот пароль считается надежным?
- Он сгенерирован случайно с помощью генератора паролей.
- Пароль длинный – 16 символов.
- В нем используются специальные символы: «!» и «-»
- В нем используются прописные и строчные буквы.
Как улучшить этот пароль?
- Придумайте мнемоническую фразу, чтобы его запомнить.
- Пример: «! ХЭВИ МЕТАЛ не решает слушай QUEEN 4 ВЕСЕЛЫХ ананаса ГОЛЬФЫ не ДЖИНСЫ — короче КОРОТКОГО»
Пример 3: яростьуткапростолуна
Почему этот пароль считается надежным?
- Он основан на кодовой фразе, использующей несколько распространенных, но не связанных между собой слов.
- Пароль длинный – 20 символов.
Как улучшить этот пароль?
- Используйте разнообразные символы – строчные и прописные буквы, символы, числа.
- Замените некоторые символы одного типа символами другого.
- Пример: !Рость%Тка?Росто4Уна (использовано следующее правило: вторая буква каждого слова заменяется на строчную, первая – на символ).
Создание сложного ключа
Рядовые пользователи Сети и специалисты по безопасности уже нашли множество правильных ответов-решений на вопрос «Как создать надёжный пароль?». В рамках этой статьи мы познакомимся с тремя наиболее практичными способами.
Способ №1: подмена букв
Не на всех первых мобильных телефонах поддерживался русский язык, и их владельцы отправляли СМС-ки, используя транслитерацию. То есть писали латинскими буквами по-русски, а недостающие литеры заменяли символами. Например: «ч» — «4». Фраза «Что делаешь?», выглядела как «4to delaesh?». Этот же принцип лежит и в основе данного способа составления ключей.
Возьмите какое-нибудь слово или словосочетание, а затем запишите его с использованием «хитрых» обозначений. Вместо пробелов можно использовать в качестве разделителей любые спецсимволы «~», «/», «.» и др. Например, можно придумать такую комбинацию:
«Опасная зона» запишем как «onACHA9I#3OHA».
Как видите, слова мы записали латинскими буквами и вдобавок заменили кое-какие русские литеры. Вместо «п» — «n», «я» — «9I», «з» — «3» (цифра «три»). И поставили разделитель «#» между словами. Вот и получился достаточно сложный вариант. Чтобы разгадать такой тип символьного сочетания, компьютерным злодеям придётся как следует покорпеть.
В помощь таблица символьных обозначений русских букв:
Способ №2: создание «читаемого» ключа в генераторе
1. Откройте в браузере онлайн-сервис — https://genpas.peter23.com/.
2. В опции «Режим работы» клацните радиокнопку «Произносимый пароль… ».
3. Дополнительно включите/отключите символьные наборы для комбинаций ключа и установите его длину.
4. Нажмите кнопку «Генерировать».
5. Выберите наиболее оптимальный вариант из генерированных последовательностей.
6. Разбейте выбранный пароль на фрагменты из 2-3 символов и придайте каждому фрагменту определённый смысл. В такой «логической цепочке» очень легко запомнить самую сложную комбинацию. В качестве примера давайте разберём ключ, созданный в этом генераторе:
Xoh)ohfo1koh
- Xoh) — можно прочитать как «Хох» + «смайлик»;
- oh — «ох»;
- fo1 — пусть это будет какая-то загадочная аббревиатура;
- koh — кох — опять вариация начального слога.
Способ №3: добавка спецсимволов в простые слова
1. Возьмите за основу какое-либо хорошо знакомое вам слово:
space2017
2. Придумайте сочетание спецсимволов из 2 или 3 знаков.
«+_&»
3. Добавьте сочетание в начале и в конце слова в зеркальном отображении.
+_&space2017&_+
4. В итоге вы получите достаточно «крепкий» ключ. Безусловно, его нельзя назвать самым устойчивым, однако он легко запоминается и по своей структуре не является примитивным.
Внимание! Перед составлением пароля обязательно ознакомьтесь с требованиями сервиса, на котором регистрируетесь. К примеру, на портале Майл.ру нельзя использовать кириллицу (русские буквы).
Проверка надёжности пароля с помощью jQuery
Многие веб-сайты, которые требуют учётные данные для логина, соблюдают параметры безопасности, часто называемые «требования комплексного пароля». Эти требования гарантируют, что пароли пользователей достаточно сильны и не могут быть легко взломаны.
Что представляет собой надёжный пароль? Ну, это зависит от того, кого вы спрашиваете. Тем не менее, традиционные факторы, которые способствуют надёжности пароля, включают в себя его длину, сложность и непредсказуемость. Для обеспечения надёжности пароля, многие веб-сайты требуют чтобы пароли пользователей были буквенно-цифровые в дополнение к определённой длине.
В этом уроке мы будем строить форму, которая будет давать пользователю живой фидбэк по поводу достижения их пароля требований комплексности, которую мы будем устанавливать.
Прежде чем мы начнём, давайте взглянем на то, как будет выглядеть наш конечный продукт.
Пожалуйста, обратите внимание, что целью этого урока является демонстрация, как простой скрипт может быть написан с использованием JavaScript и jQuery для соблюдения требований комплексного пароля.
Шаг№1: Стартовый HTML
Сначала нам нужно написать базовый HTML код для формы:
Проверка пароля
Шаг№2: HTML форма
Теперь давайте добавим разметку, которая будет использована для нашей формы. Мы будем заворачивать элементы нашей формы в ul & li списки для лучшей структуры и организации.
- Имя пользователя:
- Пароль:
- Отправить
Вот объяснение кода, который мы использовали:
«span» элементы – они будут использованы для визуального стиля наших элементов ввода (вы увидите это позже в CSS)
type=”password” – это HTML5 атрибут для элементов формы. В поддерживаемых браузерах, символы в этой области будут заменены на чёрные точки, таким образом, скрывая фактический пароль на экране.
Шаг№3: HTML информационное окно о пароле
Теперь давайте добавим HTML, который будет информировать пользователя о том, какие требованиям сложности пароля были выполнены, а какие нет. Это окно будет скрыто по умолчанию и будет появляться только тогда, когда поле “Пароль” находится в фокусе.
Пароль должен соответствовать критериям:
- Минимум одна буква
- Минимум одна заглавная буква
- Минимум одна цифра
- Быть не менее 8 символов
Каждому элементу списка задаётся определённый ID атрибут. Эти идентификаторы будут использоваться для указания каждого комплексного требования, а также показывать пользователю, если требование было выполнено или нет. Кроме того, каждый элемент будет оформлен в стиле “valid”, если пароль пользователя соответствует требованием или “invalid”, если они не соответствует (если поле ввода пустое, то тогда ни одно из требований не было выполнено, поэтому по умолчанию класс “invalid”).
Вот что у нас есть на данный момент:
Шаг№4: Оформление CSS и бэкграунд
Мы собираемся придать элементам нашей страницы основной стиль. Вот краткий обзор того, что мы будем делать в нашем CSS:
Добавить цвет фона – я использовал # EDF1F4 Добавить фоновое изображение с текстурой (созданное в Photoshop) Установить шрифт Удалить / изменить некоторые браузеры по умолчанию
body { background:#edf1f4 url(bg.jpg); font-family: «Segoe UI», Candara, «Bitstream Vera Sans», «DejaVu Sans», «Bitstream Vera Sans», «Trebuchet MS», Verdana, «Verdana Ref», sans serif; font-size:16px; color:#444; } ul, li { margin:0; padding:0; list-style-type:none; }
Шаг№5: Оформляем заголовок
Теперь мы будем стилизовать наш основной контейнер и централизуем его на странице. Мы также применим стиль к нашему H1 тэгу.
#container { width:400px; padding:0px; background:#fefefe; margin:0 auto; border:1px solid #c4cddb; border-top-color:#d3dbde; border-bottom-color:#bfc9dc; box-shadow:0 1px 1px #ccc; border-radius:5px; position:relative; } h1 { margin:0; padding:10px 0; font-size:24px; text-align:center; background:#eff4f7; border-bottom:1px solid #dde0e7; box-shadow:0 -1px 0 #fff inset; border-radius:5px 5px 0 0; /* otherwise we get some uncut corners with container div */ text-shadow:1px 1px 0 #fff; }
Важно отметить, что мы должны дать нашему H1 заголовку границу радиуса на двух верхних углах. Если мы не сделаем этого, цвет H1 фона будет перекрываться закруглёнными углами из его родительского элемента (# container).
Добавление границ радиуса (border-radius) к элементу H1 гарантирует, что наши верхние углы останутся округлёнными.
Шаг№6: CSS стили для формы
Теперь давайте стилизовать различные элементы нашей формы, начиная со списка элементов внутри формы:
form ul li { margin:10px 20px; } form ul li:last-child { text-align:center; margin:20px 0 25px 0;}
Мы использовали :last-child селектор для выбора последнего пункта в списке (кнопка) и дали ему немного дополнительного расстояния. (Обратите внимание, этот селектор не поддерживается в некоторых старых браузерах). Далее, давайте стилизовать элементы ввода:
input { padding:10px 10px; border:1px solid #d5d9da; border-radius:5px; box-shadow: 0 0 5px #e8e9eb inset; width:328px; /* 400 (#container) — 40 (li margins) — 10 (span paddings) — 20 (input paddings) — 2 (input borders) */ font-size:1em; outline:0; /* remove webkit focus styles */ } input:focus { border:1px solid #b9d4e9; border-top-color:#b6d5ea; border-bottom-color:#b8d4ea; box-shadow:0 0 5px #b9d4e9;} label { color:#555; } #container span { background:#f6f6f6; padding:3px 5px; display:block; border-radius:5px; margin-top:5px; }
Шаг№7: Стиль кнопок
Теперь мы собираемся стилизовать наши кнопки. Мы будем использовать несколько стилей CSS3, чтобы пользователи с новыми браузерами получали наилучший визуальный эффект.
button { background: #57a9eb; /* Old browsers */ background: -moz-linear-gradient(top, #57a9eb 0%, #3a76c4 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#57a9eb), color-stop(100%,#3a76c4)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* IE10+ */ background: linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#57a9eb’, endColorstr=’#3a76c4′,GradientType=0 ); /* IE6-9 */ border:1px solid #326fa9; border-top-color:#3e80b1; border-bottom-color:#1e549d; color:#fff; text-shadow:0 1px 0 #1e3c5e; font-size:.875em; padding:8px 15px; width:150px; border-radius:20px; box-shadow:0 1px 0 #bbb, 0 1px 0 #9cccf3 inset; } button:active { background: #3a76c4; /* Old browsers */ background: -moz-linear-gradient(top, #3a76c4 0%, #57a9eb 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a76c4), color-stop(100%,#57a9eb)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* Chrome10+, Safari5.1+ */ background: -o-linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* IE10+ */ background: linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#3a76c4′, endColorstr=’#57a9eb’,GradientType=0 ); /* IE6-9 */ box-shadow:none; text-shadow:0 -1px 0 #1e3c5e; }
Шаг№8: Окно пароля
Теперь мы собираемся стилизовать окно, которое информирует пользователей, если они удовлетворили требования к паролю. Во-первых, мы будем стилизовать содержащий элемент (#pswd_info).
#pswd_info { position:absolute; bottom:-80px; bottom: -115px9; /* IE Specific */ right:55px; width:250px; padding:15px; background:#fefefe; font-size:.875em; border-radius:5px; box-shadow:0 1px 3px #ccc; border:1px solid #ddd; }
Давайте добавим немного стиля к H4 элементу:
#pswd_info h4 { margin:0 0 10px 0; padding:0; font-weight:normal; }
Наконец, мы будем использовать CSS ::before селектор, чтобы добавить “вверх, указывающий треугольник”. Это геометрический символ, который может быть вставлен, используя его соответствующим UNICODE объект. Как правило, в HTML можно использовать HTML объекты (▲). Однако, поскольку мы добавляем его в CSS, мы должны использовать UNICODE значение (25B2) предшествующие косой чертой.
#pswd_info::before { content: «25B2»; position:absolute; top:-12px; left:45%; font-size:14px; line-height:14px; color:#ddd; text-shadow:none; display:block; }
Теперь у нас получилось это:
Шаг№9: Valid and invalid
Давайте добавим немного стиля к нашим требованиям. Если требование было выполнено, мы дадим ему класс “valid”. Если требование не было выполнено, оно получит класса “invalid” (класс по умолчанию). Что касается иконок, я использую две 16 × 16 пикселей иконки из Silk Icon Set.
.invalid { background:url(../images/invalid.png) no-repeat 0 50%; padding-left:22px; line-height:24px; color:#ec3f41; } .valid { background:url(../images/valid.png) no-repeat 0 50%; padding-left:22px; line-height:24px; color:#3a7d34; }
Потому что мы не включили функциональность JavaScript, которая будет динамично менять ” valid” и “invalid” классы, все требования, на данный момент будут отображаться как invalid (мы изменим это позже). Вот что мы имеем на данный момент:
Теперь, когда у нас есть все желаемые стили, мы собираемся скрыть окно пароля. Мы будем переключать его видимость для пользователя с помощью JavaScript. Поэтому давайте добавим следующее правило:
#pswd_info { display:none; }
Шаг№10: Анализ проекта
Вот то, что мы хотим достичь в нашем сценарии:
- Хотя бы одна буква
- Хотя бы одна заглавная буква
- Хотя бы одна цифра
- Минимум восемь символов
Шаг№11: Установка jQuery
Во-первых, мы должны добавить jQuery на нашу страницу. Мы будем использовать хостинговую версию. Нам также нужно привязать наш “script.js” файл, в котором мы будем писать код, необходимый для нашей тестовой проверки пароля. Добавляем следующие строки в ваш тег
:
В нашем “script.js” файле, мы начнём с основного JQuery стартового кода для нашего скрипта:
$(document).ready(function() { //code here });
Шаг№12: Настройка триггеров событий
По существу, у нас есть три события, которые мы будет “слушать”:
“KeyUp” на поле ввода пароля (срабатывает всякий раз, когда пользователь нажимает клавишу на клавиатуре) “Focus” на поле ввода пароля (срабатывает всякий раз, когда поле пароля выбирается пользователем) “Blur” на поле ввода пароля (срабатывает всякий раз, когда поле пароля не выбрано) Как вы видете, все события, которые мы слушаем, находятся на поле ввода пароля. В этом примере мы выберем все поля ввода, где тип равен паролю. JQuery также позволяет нам соединить все эти события, а не вводить каждое из них отдельно. Например, вместо того чтоб набирать следующее:
$(‘input[type=password]’).keyup(function() { // keyup event code here }); $(‘input[type=password]’).focus(function() { // focus code here }); $(‘input[type=password]’).blur(function() { // blur code here });
Мы можем соединить все события и написать это:
$(‘input[type=password]’).keyup(function() { // keyup code here }).focus(function() { // focus code here }).blur(function() { // blur code here });
Итак, с этим знанием, давайте создадим наш код, который будет отображать или скрывать наше информационное окно пароля в зависимости от того, если поле ввода пароля выбирается пользователем или нет:
$(‘input[type=password]’).keyup(function() { // keyup code here }).focus(function() { $(‘#pswd_info’).show(); }).blur(function() { $(‘#pswd_info’).hide(); });
Теперь вы заметите, что, перейдя в поле ввода пароля, поле с информацией о пароле будет видно. Кроме того, щелкнув за пределами поля ввода пароля, в поле пароля информация будет скрыта.
Шаг№13: Проверка сложности правил
Все, что нам нужно сделать, это дать задание скрипту проверять значение в поле пароля каждый раз, когда вводиться новый символ(с помощью события “KeyUp). Таким образом, внутри $ (‘input ’).keyup функции мы добавим следующий код:
// set password variable var pswd = $(this).val();
Это создает переменную с именем “pswd”, что сохраняет текущее значение поля пароль каждый раз, когда происходит событие KeyUp. Мы будем использовать это значение в проверке каждого из наших правил сложности.
Проверка длины
Теперь, внутри функции KeyUp, давайте добавим следующее:
//validate the length if ( pswd.length < 8 ) { $(‘#length’).removeClass(‘valid’).addClass(‘invalid’); } else { $(‘#length’).removeClass(‘invalid’).addClass(‘valid’); }
Это проверяет длинну текущего значение пароля на 8 символов. Если значение меньше 8, оно получит “invalid” класс. Если длина больше, чем 8 символов, она получает “valid” класс.
Проверка с помощью обычных выражений. Как вы видели выше, у нас есть if/else заявление, которое тестирует, чтобы убедиться, что требование сложности было выполнено. Если требование сложности удовлетворены, мы даём его ID в поле пароля класс “valid”. Если оно не выполняется, он получает класс “invalid”. Наши остальные требования потребуют использования обычных выражений для проверки сложности правил. Итак, давайте добавим следующее:
//validate letter if ( pswd.match(/[A-z]/) ) { $(‘#letter’).removeClass(‘invalid’).addClass(‘valid’); } else { $(‘#letter’).removeClass(‘valid’).addClass(‘invalid’); } //validate capital letter if ( pswd.match(/[A-Z]/) ) { $(‘#capital’).removeClass(‘invalid’).addClass(‘valid’); } else { $(‘#capital’).removeClass(‘valid’).addClass(‘invalid’); } //validate number if ( pswd.match(/[0-9]/) ) { $(‘#number’).removeClass(‘invalid’).addClass(‘valid’); } else { $(‘#number’).removeClass(‘valid’).addClass(‘invalid’); }
Вот объяснение трёх if/else заявления, которые мы использовали:
[A-z]
Это выражение проверяет, чтобы убедиться, что по крайней мере одна буква от А до Z (большая) или a до z (маленькая) были введены
[A-Z]
Это выражение проверяет, чтобы убедиться, что по крайней мере одна заглавная буква была введена
[0-9]
Это будет производить проверку на любые цифры от 0 до 9
Шаг№14: Готовый код
Сначала весь HTML и СSS. Для демонстрации я оставил код здесь, но лучше выносить весь CSS в отдельный файл:
Untitled Document body { background:#edf1f4 url(bg.jpg); font-family: «Segoe UI», Candara, «Bitstream Vera Sans», «DejaVu Sans», «Bitstream Vera Sans», «Trebuchet MS», Verdana, «Verdana Ref», sans serif; font-size:16px; color:#444; } ul, li { margin:0; padding:0; list-style-type:none; } #container { width:400px; padding:0px; background:#fefefe; margin:0 auto; border:1px solid #c4cddb; border-top-color:#d3dbde; border-bottom-color:#bfc9dc; box-shadow:0 1px 1px #ccc; border-radius:5px; position:relative; } h1 { margin:0; padding:10px 0; font-size:24px; text-align:center; background:#eff4f7; border-bottom:1px solid #dde0e7; box-shadow:0 -1px 0 #fff inset; border-radius:5px 5px 0 0; /* otherwise we get some uncut corners with container div */ text-shadow:1px 1px 0 #fff; } form ul li { margin:10px 20px; } form ul li:last-child { text-align:center; margin:20px 0 25px 0;} input { padding:10px 10px; border:1px solid #d5d9da; border-radius:5px; box-shadow: 0 0 5px #e8e9eb inset; width:328px; /* 400 (#container) — 40 (li margins) — 10 (span paddings) — 20 (input paddings) — 2 (input borders) */ font-size:1em; outline:0; /* remove webkit focus styles */ } input:focus { border:1px solid #b9d4e9; border-top-color:#b6d5ea; border-bottom-color:#b8d4ea; box-shadow:0 0 5px #b9d4e9;} label { color:#555; } #container span { background:#f6f6f6; padding:3px 5px; display:block; border-radius:5px; margin-top:5px; } button { background: #57a9eb; /* Old browsers */ background: -moz-linear-gradient(top, #57a9eb 0%, #3a76c4 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#57a9eb), color-stop(100%,#3a76c4)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* IE10+ */ background: linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#57a9eb’, endColorstr=’#3a76c4′,GradientType=0 ); /* IE6-9 */ border:1px solid #326fa9; border-top-color:#3e80b1; border-bottom-color:#1e549d; color:#fff; text-shadow:0 1px 0 #1e3c5e; font-size:.875em; padding:8px 15px; width:150px; border-radius:20px; box-shadow:0 1px 0 #bbb, 0 1px 0 #9cccf3 inset; } button:active { background: #3a76c4; /* Old browsers */ background: -moz-linear-gradient(top, #3a76c4 0%, #57a9eb 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a76c4), color-stop(100%,#57a9eb)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* Chrome10+, Safari5.1+ */ background: -o-linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* IE10+ */ background: linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#3a76c4′, endColorstr=’#57a9eb’,GradientType=0 ); /* IE6-9 */ box-shadow:none; text-shadow:0 -1px 0 #1e3c5e; } #pswd_info { position:absolute; bottom:-80px; bottom: -115px9; /* IE Specific */ right:55px; width:250px; padding:15px; background:#fefefe; font-size:.875em; border-radius:5px; box-shadow:0 1px 3px #ccc; border:1px solid #ddd; } #pswd_info h4 { margin:0 0 10px 0; padding:0; font-weight:normal; } #pswd_info::before { content: «25B2»; position:absolute; top:-12px; left:45%; font-size:14px; line-height:14px; color:#ddd; text-shadow: none; display:block; } .invalid { background:url(../images/invalid.png) no-repeat 0 50%; padding-left:22px; line-height:24px; color:#ec3f41; } .valid { background:url(../images/valid.png) no-repeat 0 50%; padding-left:22px; line-height:24px; color:#3a7d34; } #pswd_info { display:none; }
- Имя пользователя:
- Пароль:
- Отправить
Пароль должен соответствовать критериям:
- Минимум одна буква
- Минимум одна заглавная буква
- Минимум одна цифра
- Быть не менее 8 символов
А вот и наш jquerypasswordscript.js:
$(document).ready(function() { $(‘input[type=password]’).keyup(function() { // set password variable var pswd = $(this).val(); //validate the length if ( pswd.length < 8 ) { $(‘#length’).removeClass(‘valid’).addClass(‘invalid’); } else { $(‘#length’).removeClass(‘invalid’).addClass(‘valid’); } //validate letter if ( pswd.match(/[A-z]/) ) { $(‘#letter’).removeClass(‘invalid’).addClass(‘valid’); } else { $(‘#letter’).removeClass(‘valid’).addClass(‘invalid’); } //validate capital letter if ( pswd.match(/[A-Z]/) ) { $(‘#capital’).removeClass(‘invalid’).addClass(‘valid’); } else { $(‘#capital’).removeClass(‘valid’).addClass(‘invalid’); } //validate number if ( pswd.match(/[0-9]/) ) { $(‘#number’).removeClass(‘invalid’).addClass(‘valid’); } else { $(‘#number’).removeClass(‘valid’).addClass(‘invalid’); } }).focus(function() { $(‘#pswd_info’).show(); }).blur(function() { $(‘#pswd_info’).hide(); }); });
Шаг№14: Тестирование
Вот и все, что нужно сделать! Вы можете добавить больше элментов комплексности для проверки, если желаете, но этот минимальный набор уже достаточен для использования на вашем сайте! Напишите в комментариях, если вы использовали это на своем сайте и какой был результат.
Высоких конверсий!
11-03-2016
Правильно генерируем пароль
С теоретической частью мы разобрались, теперь перейдём непосредственно к генерации стойкого и надёжного пароля. При создании сложного и стойкого пароля существенную роль играет человеческий фактор. Трудности возникают на самом начальном этапе – придумывании сложного пароля, а после – его запоминания. Ведь комбинация разрозненных символов едва ли предрасполагает к скорому запоминанию. С проблемой генерации стойкого пароля нам помогут он-лайн сервисы. Их довольно много, из популярных русскоязычных сервисов можно отметить: Passwordist.com Online-Generators.ru PassGen.ru Работают представленные сервисы по одному принципу, от вас лишь требуется указать какие символы необходимо использовать и выбрать длину генерируемого пароля. Отдельной особенностью сервиса Passwordist.com можно отметить возможность задать количество создаваемых паролей и генерировать варианты с лучшей читабельностью за счёт исключения похожих символов, к примеру, B и 8.
Проверка стойкости паролей
Если вы желаете проверить уже имеющиеся или вновь сгенерированные пароли на стойкость к взлому, то для этого существуют несколько он-лайн сервисов:
1) How Secure Is My Password? После того, как вы введёте пароль в соответствую форму на сайте, вы увидите сколько времени понадобится на взлом методом перебора. Срок в несколько миллионов лет можно считать превосходным.
2) Kaspersky Lab: Secure Password Check Данный сервис создан отечественным разработчиком популярного антивирусного решения. Он также демонстрирует примерное время, которое необходимо на взлом пароля методом перебора.
3) 2IP: Стойкость пароля Сервис категорично выносит вердикт для проверяемого пароля – он может быть либо надёжным, либо нет.
Проверяя ваши пароли не стойкость, не забывайте, что отображаемые там результаты стойкости весьма условны. Они рассчитываются исходя из средней производительности домашнего компьютера, и едва ли будут аналогичными для мощного лабораторного суперкомпьютера. Одно успокаивает – людям, имеющим доступ к такому оборудованию, едва ли будет интересен ваш пароль от сервиса электронной почты или мессенджера.
Атаки полного перебора
Почему требования именно такие? Причина в том, что они важны при оценке устойчивости пароля к атакам полного перебора. Допустим, мы используем в качестве пароля слово «admin». Возможный алфавит для такого пароля состоит только из букв нижнего регистра, которых в алфавите 26. Длина самого пароля составляет 5 символов, поэтому число возможных комбинаций пароля составляет 11881376 (26^5).
Кроме того, существует такое понятие, как энтропия пароля. Согласно википедии, информационная энтропия — мера неопределённости некоторой системы в статистической физике или теории информации. В нашем случае — это непредсказуемость появления какого-либо символа первичного алфавита. Для безопасности пароля учитывается т.н. «число бит энтропии» в пароле. Для «случайного пароля» — такого пароля, источником энтропии для которого служит генератор случайных чисел — число бит энтропии рассчитывается по формуле:
Где
- H – получаемая энтропия
- R – длина набора символов, используемая в качестве пароля (т.н. «алфавит» для пароля)
- L – число символов в пароле
- R^L – общее число возможных комбинаций пароля
Соответственно, возможно рассчитать ту длину пароля, которая будет при определённом значении энтропии:
Рассмотрим это на примере. Допустим, мы используем в качестве пароля слово «admin». Возможный алфавит для такого пароля состоит только из букв нижнего регистра, которых в алфавите 26. Длина самого пароля составляет 5 символов, поэтому энтропия для такого пароля будет составлять:
Таким образом, энтропия пароля «admin» составляет примерно 24 бит. А число возможных комбинаций для пароля длиной 5 символов из алфавита длиной 26 символов, как мы уже подсчитали, равно 11881376.
Тут надо понимать, что злоумышленнику не нужно подбирать все 11881376 вариантов. Пароль может подойти уже на второй, третьей попытке или не подойти вовсе (если начать перебор с середины возможных комбинаций). Именно поэтому для оценки сложности паролей оперируют понятием энтропии.
Энтропия при этом анализируется следующим образом: чтобы методом полного перебора найти пароль с энтропией в 24 бита, необходимо создать 2^24 паролей и попытаться использовать их при брутфорсе — один из 2^24 паролей окажется правильным.
Теперь рассмотрим обратный пример. Какая длина пароля обеспечит нам энтропию в 24 бит при использовании символов английского алфавита в нижнем регистре (длина алфавита – 26 символов)?
Если бы всё зависело только от энтропии… но при работе с паролями приходится учитывать ещё целый ряд дополнительных факторов.
Хранение паролей
Надёжные пароли сгенерированы, но это ещё полдела. Пароли необходимо правильно хранить, дабы никто посторонний не получил к ним доступ. В этой связи варианты с записью в текстовый файл или на стикер с последующим прикреплением к монитору сразу отпадают. Лучше и правильнее доверить конфиденциальную информацию менеджеру паролей.
Среди популярных решений можно отметить программу KeePass. Данная программа бесплатна и в тоже время весьма функциональна. Помимо прочего в ней присутствует генератор паролей, благодаря которому отпадает необходимость в использовании он-лайн генератора. Для доступа к базе сохранённых паролей необходимо будет установить мастер-пароль. Для его создания можно, к примеру, воспользоваться методикой набора слов в другой раскладке, дабы создать сложный пароль, но при этом самому не забыть его. Локальная база с паролями на вашем компьютере априори будет менее подвержена взлому, нежели общедоступные сервисы в интернет, так что здесь со сложностью перебарщивать не стоит.
Содержание:
- Принципы, используемые при создании пароля
- Правильно генерируем пароль
- Хранение паролей
- Проверка стойкости паролей
- Краткий итог
Пароль превратился в обыденность и используется для доступа к устройствам и интернет сервисам. И со временем их становится только больше. Сложившаяся ситуация, в конечном итоге, приводит к тому, что пользователи начинают использовать один и тот же пароль на используемых устройствах и сервисах. Данный подход очень опасен и грозит серьёзными последствиями. Несомненно, скомпрометированный пароль от социальной сети не несёт таких последствий, как пароль от платёжной системы. Но если они будут идентичны, то вероятность того, что доступ будет получен и к остальным используемым сервисам очень высок. Чтобы этого не произошло, пароли должны быть сложными (стойкими к перебору) и разными.