Как защитить страницу паролем через скрипт JavaScript

Часто бывает необходимость защитить лишь страницу паролем с некоторым секретным содержимым, но не хочется долго разбираться с серверными скриптами, настройками .htaccess и .htpasswd, тогда это можно сделать с помощью языка JavaScript.

Сразу предупреждаю: через этот скрипт JS для защиты паролем нельзя прятать что-то ценное. Особо умный посетитель всегда может узнать пароль через исходный код страницы, например, набрав в браузере CTRL+U и найдя скрипт, как и всё содержимое страницы.

И ещё одна фишка такого скрипта: если введён не верный пароль, он на секунду покажет содержимое, но тут же перекинет или на повторный ввод пароля, или на любую другую страницу, в зависимости от настроек.

То есть, мы как бы показываем: вот искомое, оно совсем рядом, но тут же через секунду «Однако, пароль ввести всё же придётся!».

Области применения

Где может пригодиться такая защита контента:

  • Для авторов e-mail рассылок и инфобизнесменов. Подпишись на рассылку, получи пароль и тогда ларёчек откроется.
  • Для запоминания имени, фамилии автора блога или адреса блога. В качестве пароля просто используется ключ, который и должен запомнить надолго посетитель. А за это тоже какой-то бонус.
  • С небольшими доработками можно тоже выдавать желаемое после лайка, доната, комментария и т.д. Вариантов масса, кто на что горазд.

Пример работы по кнопке ниже (откроется в новом окне). Пароль: 123456

Где работает защита

Работать будет почти везде: от простой HTML-странички до системы управления контентом типа WordPress или Joomla. Да, я знаю, в них и так можно поставить пароль. Например, в WordPress это делается вот так:

Как защитить страницу паролем через скрипт JavaScript

Но эта защита работает несколько иначе, хоть и на уровне сервера, и на много надёжнее, но нет этой «заманухи», вроде «посмотри ещё секунды и мы снова скроем от глаз твоих».

Ну и CMS разных полно, не все настолько же мощны, как WordPress. Наконец, простые сайты на HTML, простеньком PHP и лендинг пейдж никто не отменял!

Как установить и настроить

В любое место страницы вставляем такой код:

<script language="JavaScript">
pass = prompt ('Введите пароль ниже:');
if (pass=='123456') { alert ('Пароль введён верно') } else { alert ('Пароль введён не верно'), top.location.href="https://code66.ru" }</script>

Или скачайте исходный файл.

В целом всё понятно по коду: можно изменить текст окна, пароль (в коде он 123456), ответы при правильном вводе и не правильном вводе пароля. Последняя ссылка — это адрес, на который будет перенаправлен посетитель, если он введёт не верный пароль.

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

Так, если пароль выдаётся после подписки на рассылку, то можно перенаправить на форму подписки.

Важно: обязательно все кавычки одинарные должны остаться, иначе скрипт работать не будет!

При вводе в окнах редактирования разных CMS и программ, нужно для вставки переходить в режим «Текст» или «HTML», «Код» и т.д. В WordPress вставлять нужно только в этой вкладке:

Как защитить страницу паролем через скрипт JavaScript

Иначе редактор автоматически заменит некоторые символы на специальные, чего допустить нельзя!


Подпишись на рассылку и получай свежие кейсы первым:

✔ Нажимая кнопку ниже я даю согласие на обработку персональных данных.

Понравилась статья? Поделиться с друзьями:
Заработок в интернете - блог
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:
Нажимая на кнопку "Отправить комментарий", я даю согласие на обработку персональных данных и принимаю политику конфиденциальности.