Как сделать пароль в html
Обновлено: 07.07.2024
Данная статья не претендует на какие-то откровения, все эти вещи достаточно очевидны и широко известны. Но получив за последнее время несколько вопросов об ограничении доступа к web-страницам, я решил свести ответы на них вместе.
Итак, наша задача - установить пароль на доступ к некоторой странице. Начнем с самого примитивного способа, если можно так сказать, защиты - нескольких строчек на JavaScript'е. Код - что-то вроде
Результат можно наблюдать, к примеру, здесь. Ухищрения наподобие скрытия скрипта в отдельном файле с помощью конструкции принципиально ничего не меняют.
Уровнем повыше расположена аналогичная система, реализованная на Java.
Ниже приведен упрощенный исходный код.
Включив этот апплет в страницу, можно получить нечто такое:
Его можно сделать поумнее, завести для каждого пользователя отдельную страницу, заставить считывать данные из файла и т.д. Принципиальный недостаток - после того как человек попал на искомую страницу, никто не в силах запретить ему запомнить этот URL, так что средство это одноразовое. Конечно, можно запрятать страницу внутрь фрейма, чтобы URL не светился в строке адреса, но сами понимаете, от кого эта защита. Опять же, апплет полностью уходит к клиенту и в принципе полностью доступен для исследования.
Последнего недостатка лишено решение, основанное на использовании CGI. Простенький скрипт на Perl'е выглядит примерно так:
Как видно, URL файла уже не светится, правда ценой SSI, если что-то подобное присутствовало (впрочем, это как раз можно отлавливать при выводе и обрабатывать вручную). Но и здесь остается теоретическая возможность угадывания URL, при этом не надо забывать, что медвежью услугу могут сослужить всевозможные картинки, включаемые в страницы - при использовании относительных путей, конечно.
Наконец, наиболее надежный способ установки пароля на доступ - это воспользоваться средствами сервера - не зря ж их люди делали, в конце концов. Остановлюсь на двух - Апаче как самом популярном и IIS как тоже популярном :)
С IIS все совсем просто - защита осуществляется средствами NTFS, что, конечно, несколько ограничивает возможности не-администраторов сервера. Идея следующая: у пользователя IUSR_xxxx, под аккаунтом которого по умолчанию работают все посетители узла, отбирается доступ к желаемому файлу/каталогу. После чего доступ к этим файлам будут иметь только те пользователи, для которых это явно указано в Properties->Security. Понятно, что их гораздо удобнее объединять в группы. Здесь есть пара тонкостей. Во-первых, указанным пользователям должно быть дано право Logon locally (Policies->User Rights в User Manager'е). Во-вторых, если не выбрать в настройках WWW service Basic authentication (Clear Text), внутрь будут пропущены только пользователи Internet Explorer'а.
В Apache все делается несколько иначе. Защита ставится на уровне каталогов. Соответствующие директивы могут быть помещены как в в общий конфигурационный файл (в разделе ), так и в файлы .htaccess. Набор директив в обоих случаях одинаков, а для большинства людей, арендующих место под сайт/страницу на чужом сервере, гораздо актуальнее второй способ. Итак, вы создаете в каталоге, доступ к которому планируется ограничить, файл .htaccess, после чего вставляете в него следующие директивы (привожу основные):
AuthType тип контроля - обычно используется Basic.
AuthName имя - задает имя области, в которой действительны имена и пароли пользователей. Это то самое имя, которое броузер показывает в диалоге ввода пароля. Задав одно такое имя для разных каталогов, можете сэкономить пользователям время по вводу лишнего пароля.
AuthGroupFile имя - задает имя файла, в котором хранятся имена групп и их членов. Его формат:
AuthUserFile имя - задает имя файла с паролями. По большому счету для его формирования надо воспользоваться утилитой htpasswd из поставки Apache. Но по крайней мере для некоторых версий сервера этот формат такой:
Passwordhash вполне можно получить стандартной функцией Perl'а:
где $pass - пароль, $salt - строка из двух символов, участвующая в формировании хэша.
Так что вполне можно автоматизировать процесс добавления новых пользователей, смену паролей через html-формы и т.д.
require user user1 user2 и require group user1 user2 позволяют указать, какие пользователи и группы получат доступ к данному каталогу.
require valid-user разрешает доступ всем пользователям, указанным в файле паролей системы.
Еще пара полезных директив - deny и allow - соответственно запрещения и разрешения доступа. Применяются примерно так:
По умолчанию сначала выполняются все deny, потом все allow, так что allow from all разрешит доступ всем пользователям, невзирая ни на какие deny. Порядок можно изменить директивой order: order allow, deny.
deny from all отлично сочетается со вторым способом защиты страниц через CGI, именно этой директивой лучше всего прикрывать всякие пароли к гостевым книгам и т.д. При попытке обращения к страницам из этого каталога пользователь получит нечто такое.
Кстати, тут между делом демонстрируется самостоятельная обработка ошибок: в данном случае - код 403, Forbidden. Аналогично обрабатывается и всеми любимая 404, Not Found, и 401, Unauthorized. Для этого достаточно добавить в .htaccess директиву ErrorDocument код url:
Для заключительного примера используем файл .htaccess со следующим содержимым:
В файле tgroup всего одна строчка - test: login test, в файле tuser - зашифрованные пароли для login (password) и test (test). Результат можете оценить здесь. Обратите внимание, при повторном обращении к этой странице броузер понимает, что только что обращался к этой области, и не утруждает пользователя лишним запросом пароля.
Таков вкратце минимальный набор сведений, необходимых для защиты web-страниц. Как показывает практика, более-менее доверять стоит лишь решениям, основанным на средствах, предоставляемых сервером (и то до тех пор, пока в сервере не обнаружится очередная дырка), так что если есть возможность, лучше выбирать именно их.
Допустим, есть html-страница, на которой одно единственное поле для ввода пароля. При успешном вводе пароля человека перекидывает на нужную страницу.
Пароль хранится не в базе, а в каком либо файле, или в коде этой же страницы.
Как организовать доступ по паролю, чтобы при неверном вводе пароля под инпутом сразу же появлялся див с заданным текстом типа "Вы ошиблись".
Хранить пароль в коде страницы - моветон и грубое нарушение правил безопасности. Для хранения пароля используйте какую-нибудь хеш-функцию, например md5
@Johny, сколько бы раз вы там не хешировали-перехешировали ключевую строку, толку от этого больше не станет. Так или иначе эта строка будет частью того же AJAX запроса, который для сервера будет верным, а, следовательно, злоумышленник( или школьник ) сумеет его вытащить без всяких проблем.
Чтобы включить отображение пароля в поле password нужно заменить атрибут type="password" на type="text" , сделать это можно на jQuery или чистом JS.
Показать пароль по чекбоксу
Результат:
Показать пароль по ссылке
Результат:
Показать пароль по иконке
Результат:
Без jQuery
Результат:
Комментарии
Другие публикации
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а.
По спецификации HTML в option нельзя вставить ссылку, если все-таки её туда вставить, то работать она не будет. В таких случаях можно сделать перенаправление браузера по клику на JS или имитацию.
Часто бывает необходимость защитить лишь страницу паролем с некоторым секретным содержимым, но не хочется долго разбираться с серверными скриптами, настройками .htaccess и .htpasswd, тогда это можно сделать с помощью языка JavaScript.
Сразу предупреждаю: через этот скрипт JS для защиты паролем нельзя прятать что-то ценное. Особо умный посетитель всегда может узнать пароль через исходный код страницы, например, набрав в браузере CTRL+U и найдя скрипт, как и всё содержимое страницы.
И ещё одна фишка такого скрипта: если введён не верный пароль, он на секунду покажет содержимое, но тут же перекинет или на повторный ввод пароля, или на любую другую страницу, в зависимости от настроек.
То есть, мы как бы показываем: вот искомое, оно совсем рядом, но тут же через секунду “Однако, пароль ввести всё же придётся!”.
Области применения
Где может пригодиться такая защита контента:
- Для авторов e-mail рассылок и инфобизнесменов. Подпишись на рассылку, получи пароль и тогда ларёчек откроется.
- Для запоминания имени, фамилии автора блога или адреса блога. В качестве пароля просто используется ключ, который и должен запомнить надолго посетитель. А за это тоже какой-то бонус.
- С небольшими доработками можно тоже выдавать желаемое после лайка, доната, комментария и т.д. Вариантов масса, кто на что горазд.
Пример работы по кнопке ниже (откроется в новом окне). Пароль: 123456
Где работает защита
Работать будет почти везде: от простой HTML-странички до системы управления контентом типа WordPress или Joomla. Да, я знаю, в них и так можно поставить пароль. Например, в WordPress это делается вот так:
Но эта защита работает несколько иначе, хоть и на уровне сервера, и на много надёжнее, но нет этой “заманухи”, вроде “посмотри ещё секунды и мы снова скроем от глаз твоих”.
Ну и CMS разных полно, не все настолько же мощны, как WordPress. Наконец, простые сайты на HTML, простеньком PHP и лендинг пейдж никто не отменял!
Как установить и настроить
В любое место страницы вставляем такой код:
В целом всё понятно по коду: можно изменить текст окна, пароль (в коде он 123456 ), ответы при правильном вводе и не правильном вводе пароля. Последняя ссылка – это адрес, на который будет перенаправлен посетитель, если он введёт не верный пароль.
Важно: обязательно все кавычки одинарные должны остаться, иначе скрипт работать не будет!
При вводе в окнах редактирования разных CMS и программ, нужно для вставки переходить в режим “Текст” или “HTML”, “Код” и т.д. В WordPress вставлять нужно только в этой вкладке:
Иначе редактор автоматически заменит некоторые символы на специальные, чего допустить нельзя!
От автора: на большинстве веб-сайтов при заполнении пароля в форме либо для регистрации, либо для входа в систему вы часто увидите кнопку (или флажок), с помощью которой можно задать отображение паролей. Это часто бывает полезно для пользователей, и пользователь, если не уверен, может проверить, не сделали ли они ошибку.
В этом уроке мы создадим аналогичный проект, в котором мы можем ввести наш пароль в форме и установить флажок, чтобы отображать или скрывать его. Давайте начнем. Требования:
Прежде чем мы начнем, сначала нужно иметь несколько вещей. Некоторые из требований заключаются в следующем: HTML, CSS, Основные знания JavaScript (ES6), DOM.
Основное понимание вышеперечисленных навыков достаточно для того, чтобы вы могли следовать и понимать код в уроке. Для контекста это образец того, что мы будем строить. В конце этого урока мы будем иметь что-то вроде этого:
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Окончательный фрагмент кода будет предоставлен в ссылке Codepen в конце статьи.
Настройка нашей среды
Откройте редактор кода. Я использую Visual Studio Code. Вы можете использовать то, с чем вам больше всего нравится.
Внутри редактора создайте каталог с именем password-toggle (используйте любое имя, которое хотите, это просто для описательных целей)
Читайте также: