Как закрыть веб-страницу паролем с помощью JavaScript

Иногда возникает необходимость быстро ограничить доступ к определённой странице сайта без создания полноценной системы авторизации. Например, для временной защиты раздела с тестовыми материалами, личными заметками или просто чтобы посторонние не увидели содержимое до официального релиза. В таких случаях удобно использовать простой механизм на JavaScript.

В этой статье мы разберём, как за несколько минут добавить на любую HTML-страницу защиту паролем. Весь код будет компактным, лёгким и не потребует подключения библиотек.

Принцип работы

Мы создадим два основных элемента:

• Защищаемое содержимое — блок с контентом, который должен быть скрыт до ввода верного пароля.
• Оверлей (наложение) — полупрозрачный слой с формой ввода пароля, который перекрывает страницу. После успешной аутентификации оверлей убирается, и контент становится видимым.

Вся логика реализуется на чистом JavaScript. Пароль хранится прямо в коде — это значит, что способ подходит только для не слишком критичных ситуаций (защиты от случайных посетителей).

Пошаговая реализация

1. HTML-структура

Разместите внутри <body> два блока: первый с основным содержимым, второй — с формой и затемнением.

<!-- Основной контент, который нужно защитить -->
<div id="content" class="protected-content">
    <h2>Секретный раздел</h2>
    <p>Этот текст виден только после ввода правильного пароля.</p>
</div>

<!-- Экран блокировки с формой ввода пароля -->
<div id="lockScreen" class="lock-overlay">
    <form id="passwordForm" class="password-form">
        <input type="password" id="passwordInput" placeholder="Введите пароль">
        <button type="submit">Открыть</button>
    </form>
</div>

Обратите внимание: в форме убран атрибут action и метод, чтобы страница не перезагружалась.

2. Стилизация (CSS)

Добавьте в <head> или в отдельный файл стилей следующие правила. Они делают оверлей полноэкранным, центрируют форму и задают приятное оформление.

<style>
    .protected-content {
        padding: 20px;
        text-align: center;
        font-family: Arial, sans-serif;
    }

    .lock-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.85); /* тёмное полупрозрачное затемнение */
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 10000;
    }

    .password-form {
        background: white;
        padding: 30px 40px;
        border-radius: 10px;
        box-shadow: 0 0 20px rgba(0,0,0,0.5);
        text-align: center;
    }

    .password-form input[type="password"] {
        display: block;
        width: 100%;
        padding: 10px;
        margin: 20px 0;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 16px;
        box-sizing: border-box;
    }

    .password-form button {
        background: #4CAF50;
        color: white;
        border: none;
        padding: 12px 30px;
        border-radius: 5px;
        font-size: 16px;
        cursor: pointer;
        transition: background 0.3s;
    }

    .password-form button:hover {
        background: #45a049;
    }
</style>

3. JavaScript-логика

Теперь добавим скрипт, который будет проверять введённый пароль. В примере используется пароль 123, вы легко можете изменить его на свой.

<script>
    (function() {
        // Получаем элементы
        const lockScreen = document.getElementById('lockScreen');
        const form = document.getElementById('passwordForm');
        const passwordInput = document.getElementById('passwordInput');

        // Задаём секретный пароль (измените на свой)
        const SECRET_PASSWORD = '123';

        // Обработчик отправки формы
        form.addEventListener('submit', function(event) {
            event.preventDefault(); // Предотвращаем перезагрузку страницы

            if (passwordInput.value === SECRET_PASSWORD) {
                // Пароль верный — убираем оверлей
                lockScreen.style.display = 'none';
            } else {
                // Неверный пароль — показываем предупреждение
                alert('Неверный пароль. Попробуйте ещё раз.');
                passwordInput.value = ''; // Очищаем поле
            }
        });
    })();
</script>

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

Полный рабочий пример

Скопируйте приведённый ниже код в новый HTML-файл и откройте в браузере. При вводе пароля 123 отобразится защищаемый контент.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Страница под паролем</title>
    <style>
        .protected-content {
            padding: 20px;
            text-align: center;
            font-family: Arial, sans-serif;
        }

        .lock-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10000;
        }

        .password-form {
            background: white;
            padding: 30px 40px;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0,0,0,0.5);
            text-align: center;
        }

        .password-form input[type="password"] {
            display: block;
            width: 100%;
            padding: 10px;
            margin: 20px 0;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 16px;
            box-sizing: border-box;
        }

        .password-form button {
            background: #4CAF50;
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.3s;
        }

        .password-form button:hover {
            background: #45a049;
        }
    </style>
</head>
<body>
    <!-- Основной контент -->
    <div id="content" class="protected-content">
        <h2>Добро пожаловать в секретную зону!</h2>
        <p>Вы успешно ввели пароль и теперь видите скрытое содержимое.</p>
    </div>

    <!-- Экран блокировки -->
    <div id="lockScreen" class="lock-overlay">
        <form id="passwordForm" class="password-form">
            <input type="password" id="passwordInput" placeholder="Введите пароль">
            <button type="submit">Открыть страницу</button>
        </form>
    </div>

    <script>
        (function() {
            const lockScreen = document.getElementById('lockScreen');
            const form = document.getElementById('passwordForm');
            const passwordInput = document.getElementById('passwordInput');
            const SECRET_PASSWORD = '123'; // <-- поменяйте здесь

            form.addEventListener('submit', function(event) {
                event.preventDefault();
                if (passwordInput.value === SECRET_PASSWORD) {
                    lockScreen.style.display = 'none';
                } else {
                    alert('Неверный пароль. Попробуйте ещё раз.');
                    passwordInput.value = '';
                }
            });
        })();
    </script>
</body>
</html>

Как изменить пароль

В скрипте найдите строку const SECRET_PASSWORD = '123'; и замените '123' на любую другую комбинацию символов. Например: 'mySecretPass' или '2024'. Пароль чувствителен к регистру.

Важное предупреждение

Этот метод защищает страницу только от самых неискушённых посетителей. Пароль хранится в открытом виде в коде, и любой, кто откроет инструменты разработчика (F12), сможет его увидеть или просто отключить оверлей. Используйте такой подход только для временных задач или в случаях, когда защита носит формальный характер (например, скрыть страницу от индексации или дать доступ ограниченному кругу лиц, которые не будут «копать» код). Для серьёзной аутентификации необходима серверная проверка (PHP, Node.js и т.д.) с сессиями.

Тем не менее, как быстрое и простое решение — описанный способ работает безотказно и не требует ничего, кроме базовых знаний вёрстки.