Ч 6 войти с помощью имя required. HTML5 и его атрибуты для проверки формы
В настоящий момент на ваш сайт проводится Brute-force атака. Brute-force атака — это атака по подбору паролей. В данном случае происходит подбор пароля к административной панели вашего сайта.
Чтобы не допустить взлома вашего сайта и повысить его безопасность, нами была установлена дополнительная защита.
Как я теперь могу получить доступ к админ-панели сайтаТеперь при доступе к административной панели вашего сайта (на Joomla или WordPress) будет появляться дополнительное окно ввода логина и пароля с надписью «please use your control panel password». В качестве логина необходимо ввести логин вашей услуги хостинга, он имеет вид «u1234567» . В качестве пароля — текущий пароль к вашей услуге хостинга.
После прохождения базовой HTTP-аутентификации перед вами откроется стандартное поле для авторизация в админ-панели вашего сайта. Теперь уже вам нужно будет ввести логин и пароль администратора сайта.
Как работает базовая HTTP-аутентификация
При вводе логина-пароля в окно базовой аутентификации значение логина и хеша пароля будут сравниваться со значениями в специальном файле ~/etc/users , доступным в панели управления хостингом. Содержимое файла выглядит примерно так: «u1234567:dm48bspxIO3rg» . Где «u1234567» — логин, а «dm48bspxIO3rg» — хеш пароля (обратите внимание: только хеш, а не сам пароль!). Хеш пароля — это результат преобразование пароля по определенному алгоритму.
Таким образом, когда вы вводите логин и пароль в окно базовой аутентификации, от введённого пароля берётся хеш и сравнивается со значением хеша в файле ~/etc/users . Если значения совпадают, вы проходите аутентификацию.
У меня не получается пройти базовую аутентификацию
Вероятно, вы вводите неверный пароль. Установите новый пароль для базовой аутентификации:
Если вы прошли базовую аутентификацию но не можете войти непосредственно в админ-панель сайта Joomla или WordPress, воспользуйтесь справкой:
Для повышения защиты сайта:
- измените логин суперпользователя на более уникальный. Не используйте короткие имена, лучше если вы будете использовать имя вместе с фамилией. В сети Интернет есть множество ресурсов где собраны наиболее популярные логины. Ознакомьтесь с ними и никогда не используйте их;
- установите сложный пароль администратора сайта. Сложный пароль должен содержать буквы верхнего и нижнего регистра, цифры и дополнительные символы, такие как «* — _ # :» и т.д. Длина пароля — никак не меньше 6 символов. Желательно от 10 и выше.
Чтобы убрать форму базовой HTTP-аутентификации:
AuthType Basic AuthName "please use your control panel password" AuthUserFile .../users Require valid-user
Для комментирования строки поставьте символ решётки («#») в начало строки, вот так.
Нам понадобятся следующие страницы:
- Страница регистрации с формой для регистрации
- Страница активации аккаунта
- Страница восстановления пароля
- Страница сброса пароля
Форма входа на сайт будет размещаться на всех страницах сайта (например, в хедере).
Вот такую страницу регистрации мы хотим получить:
Здесь тип учетной записи будет определять, в какую группу мы зарегистрируем пользователя. Так же полем для идентификации (username) будет электронная почта.
Добавим на страницу вызов сниппета Register :
[[!Register? &submitVar=`register-btn` &activationResourceId=`27` &activationEmailTpl=`Email.Activation` &activationEmailSubject=`Вы зарегистрированы на сайте example.com` &placeholderPrefix=`reg.` &successMsg=`Спасибо за регистрацию. На вашу электронную почту [[!+reg.email]] отправлено письмо со ссылкой на активацию аккаунта. Пройдите по этой ссылке, чтобы завершить регистрацию. ` &usernameField=`email` &usergroupsField=`reg_type` &customValidators=`valueIn` &validate=`username:blank, reg_type:valueIn=^Readers;Writers;Idlers ^, fullname:required:minLength=^6^, password:required:minLength=^6^, password_confirm:password_confirm=^password^, email:required:email` ]] [[!+error.message:default=`[[!$Register.Form]]`]]
Обратите внимание, что все теги, касающиеся регистрации нужно обязательно вызывать некешированными. Такие же правила действуют при обработке форм сниппетом FormIt.
Разберем параметры вызова:
&submitVar=`register-btn` - указывает атрибут name тега input . То есть сниппет сработает, только если отправлена форма кнопкой с определенным именем.
&activationResourceId=`42` - забегая вперед, 42 – это идентификатор страницы, на которой мы будет активировать пользователя.
&activationEmailTpl=`Email.Activation` - чанк с письмом активации, о нем позже.
&placeholderPrefix=`reg.` - указывает, что все плейсхолдеры, за редким исключением (об этом дальше), которые создаются в данном сниппете, должны начинаться с «reg.».
&successMsg – сообщение, которое выведется при успешной отправке формы. Заметьте, что в нем можно указывать значения из формы и любые другие теги. Данное сообщение запишется в плейсхолдер [[!+error.message]]. Довольно странное название, да и в документации на данный момент ошибка. Там написано [[!+reg.error.message]], но из кода компонента следует, что это не так.
&usernameField=`email` - указывает, что в качестве имени пользователя будет использоваться поле email.
&usergroupsField=`reg_type` - определяет поле, устанавливающее группу, в которую будет добавлен новый пользователь.
&customValidators=`valueIn` - указывает дополнительные валидаторы, которые нужно создать вручную.
&validate – валидаторы задаются через запятую для каждого поля, а если требуется несколько валидаторов для одного поля, то они еще разделяются двоеточием. Разберем их отдельно:
username:blank – нехитрая ловушка для спама, означает, что поле username должно остаться пустое.
reg_type:valueIn=^Readers;Writers;Idlers^ - ограничиваем возможные группы тремя указанными. В изначальной поставке такого нет и злые хацкеры могут зарегиться, например, под группой Administrator (если вы ее не переименовали).
fullname:required:minLength=^6^ - поле fullname должно быть не пусто и содержать хотя бы 6 символов.
password:required:minLength=^6^ - аналогично для пароля.
password_confirm:password_confirm=^password^ - пароли должны совпадать.
email:required:email – электронная почта должна быть не пуста и являться собственно почтой.
Конструкция [[!+error.message:default=`[[!$Register.Form]]`]] выводит сообщение об успешной отправке формы или чанк формы, если вы только зашли на страницу или заполнили ее неправильно.
Создадим вышеупомянутый валидатор valueIn . Для этого создаем сниппет с названием valueIn и следующим кодом:
$valueIn = explode(";", $param);
return in_array($value, $valueIn);
Теперь требуется создать чанк Register.Form . В данном случае он будет следующим (используется Bootstrap 3):
Выберите тип учетной записи Чукча-Читатель Пейсатель Бездельник Представьтесь: [[!+reg.error.fullname:notempty=`[[!+reg.error.fullname]]`]] Электронная почта: [[!+reg.error.email:notempty=`[[!+reg.error.email]]`]] Пароль: [[!+reg.error.password:notempty=`[[!+reg.error.password]]`]] Повторите пароль: [[!+reg.error.password_confirm:notempty=`[[!+reg.error.password_confirm]]`]]
Все поля обязательны для заполнения
В этой форме замечу несколько вещей, касающихся MODX:
(MAJOR) (MINOR) (PATCH) name; echo "Email: " . $data->email; echo "Message: " . $data->message; // sned an email $to = $data->email; $subject = "Тестовое письмо сайт для тестирования angularjs контактной формы"; $message = $data->message; $headers = "From: " . $data->name .. "\r\n" .. "\r\n" . "X-Mailer: PHP/" . phpversion(); //функция PHP mail для отправки электронной почты на адрес электронной почты mail($to, $subject, $message, $headers); ?>
Для любого web-разработчика пока нет более серьезной проблемы, как полная кроссбраузерность его продукта. Наверное, это одна из основных задач хорошего специалиста: добиться того, чтобы его сайт всегда правильно отображался во всех браузерах.
Параметр required , который иногда используется для input, не работает в древних IE, что просто нельзя так оставить. Пользователи-пенсионеры, которые до сих пор пользуются IE6 должны одинаково легко работать с вашим сайтом, наряду с пользователями Google Chrome последней версии. Кто, кроме web-разработчиков, о них может позаботиться.
О наболевшем, о Internet ExplorerДля нормальных браузеров, к которым можно отнести Firefox, Opera и Google Chrome, эта задача относительно легка. Даже давние версии этих браузеров одинаково хорошо отображают html-код, если в нем конечно же не используются какие-то новые технологии. Но чтобы добиться подобного в браузерах семейства Internet Explorer, требуются просто титанические усилия.
Каждая версия браузера Internet Exlorer обладает своей, уникальной тупостью. Что работает в IE6, может как положено не работать в IE7 и наоборот. Этот зоопарк компании Microsoft не удалось побороть даже в самой последней версии своего браузера.
Понять почему разработчики браузеров не могут просто взять открыть и почитать стандарты W3C для сайтостроения, я не могу.
Поэтому мне, как web-разработчику, приходится выступать некоторой «прослойкой» между капризными браузерами и требующими знаний и зрелищ посетителями сайтов. И замечательно, что web-разработчикам пока это удается.
Дак, как же заставить работать required в старых версиях IE?На помощь нам приходит JS. Раньше я терпеть его не мог, а теперь не вижу дальнейшего пути без него на просторе «правильного» WEB .
Решение приведенное ниже я выдумал не сам, а взял с буржуйского блога. Так как я жадный, а блог буржуйский, я не стану приводить на него ссылку.
За все у нас будет отвечать функция fnCheckFields() . Поместите на вашем сайте JS-код:
function fnCheckFields(form_obj){ var error_msg = "Пожалуйста, заполните все обязательные поля."; var is_error = false; for (var i = 0; form_obj_elem = form_obj.elements[i]; i++) if (form_obj_elem.type "input" || form_obj_elem.type "text") if (form_obj_elem.getAttribute("required") && !form_obj_elem.value) is_error = true; if (is_error) alert(error_msg); return !is_error; }
Обычно рекомендуют размещать его между html-тегами HEAD в начале страницы, но я бы рекомендовал все же размещать его в самом низу страницы до закрывающегося тега BODY . Таким образом JS меньше влияет на скорость загрузки страницы.
Окно ввода, где должен вводиться обязательный параметр, на html-языке должно выглядеть так:
Этот скрипт работает очень просто: после нажатия кнопки Отправить , скрипт проверяет все инпуты на наличие параметра required и если находит его, то соответственно смотрит на введенное значение этого поля. Если в такой инпут ничего не введено, то выводится предупреждающее окно о необходимости ввода. Данные соответственно никуда не отправляются.
Замечательно еще и то, что если у Вас нормальный браузер, который уже научился понимать этот параметр как положено, такого предупреждающего окна не всплывет и будут работать стандартные инструменты обработки параметра required для вашего браузера.
Рассказать в соц. сетях