защитить паролем веб-страницу с помощью CSS / HTML?

Question

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

Сайт в настоящее время написан на CSS и HTML, и это, к сожалению, также мой уровень программирования.Я видел несколько мест, где люди использовали PHP-кодирование, но каждый раз, когда я пытался, я просто получал пустую страницу, или она не работала должным образом, или ничего не происходило, когда я вводил пароль. Там тоже не было ничего хорошегоподробные инструкции, так что я никогда не знаю, куда я должен поместить код PHP (он идет на своей странице или он интегрирован?) или как подключить его к реальной веб-странице.

По правде говоря, это не должно быть что-то фантастическое, потому что многие люди, которые будут смотреть на этот сайт, - это люди, которые не очень разбираются в компьютерах, это просто поле формы с паролем.Было бы лучше, если бы был код, который я мог бы поместить прямо в HTML на странице.Если мне нужно создать отдельную HTML-страницу, я тоже не против.Продавцам будет предоставлен один пароль, чтобы они могли получить доступ к личным страницам, находясь в дороге со своих ноутбуков или планшетов.

Я видел кое-что о .htpassword и еще одно, которое не могу вспомнить, но мне не удалось найти пошаговые инструкции или подробную информацию об этом (подробную информацию о значении, которую я могу понять ...).Я видел также кое-что о password_protect.php, но это требует поля имени пользователя, я думаю, и я не могу действительно использовать такое.Там не будет имя пользователя, и, к сожалению, это требует слишком много продавцов, чтобы вспомнить две вещи хе.

В любом случае, я прошу прощения за свое невежество по этому вопросу, и заранее благодарю всех за помощь!

Answer 1

защитить паролем веб-страницу с помощью css / html?

… невозможно.Один - это язык презентации, а другой - язык разметки документов.

Я никогда не знаю, куда мне положен код PHP (идет ли он на своей собственной странице или он интегрирован?) Иликак подключить его к реальной веб-странице.

PHP - язык программирования / шаблонов.Типичное использование - встраивание кода PHP в документ HTML.

В контексте WWW это серверный язык программирования.Веб-сервер отвечает за запуск программы PHP через интерпретатор PHP и отправку вывода клиенту (вместо отправки исходного файла).

Я видел кое-что о .htpassword

Это общее имя файла пароля, используемого со встроенной системой паролей Apache.

Если вам нужна простая система паролей, вам следует обратиться к руководству по вашему веб-серверу.

Answer 2

Любая логика пароля в css или html (или даже в javascript) будет бесполезной, так как весь этот «код» загружается на клиент. Вы должны сделать проверку пароля на стороне сервера.

Answer 3

Если вы добавляете javascript с небольшой долей предварительной обработки , то позволяет безопасно защитить паролем страницу, проверка на стороне сервера не требуется.

Зашифруйте ваш контент с помощью симметричного ключа-алгоритма, такого как AES (это предварительная обработка), поместите его в оперативный режим и используйте javascript для расшифровки этого контента с помощью предоставленного пользователем пароля.

Тогда все может происходить на стороне клиента в браузере. Не имеет значения, открыт ли код для всеобщего обозрения.

Псевдо-код:

<input type="password" id="password">
<button class="decrypt">Decrypt</button>
<script>
    var myEncryptedPage = '<html-string-pre-encrypted-with-your-password>';
    $('.decrypt').click(function(){
        var password = $('#password').val();
        // 'decrypt' tries to decrypt your string with the user provided password
        document.write(decrypt(myEncryptedPage, password));
    });
</script>

Для справки: если вы хотите увидеть возможную реализацию, я написал простой PoC с использованием библиотеки crypto-js, демонстрирующей эту идею ( StatiCrypt ), где вы можете выполнить предварительную обработку и зашифровать свою страницу с помощью запрос пароля.

Answer 4

Вы можете создать файл .htpassword и загрузить его в закрытую часть вашего сервера. Его содержимое должно выглядеть примерно так:

user1:password
user2:secondpassword
user3:thirdpassword

Вы можете создать эти зашифрованные пароли с помощью простого скрипта ниже.

<?php
if (!empty($_POST[password]) AND !empty($_POST[user])) {
  $user = $_POST[user]; 
  $password = $_POST[password]; 
  $encryptedPassword = crypt($password);
}
$script = $_SERVER['SCRIPT_NAME'];
echo "<html><head><title>Password Encryption</title></head><body>
<form method=post action='$script'>
<font size=5><b>.htpasswd File Password Encryption</b></font>
<br><br>Enter Username<br>
<input name=user value='$user' size=20>
<br><br>Enter Password<br>
<input name=password value='$password' size=20>
<br><br><input type=submit name=submit value='Encrypt Now'>
";
if (!empty($user) AND !empty($encryptedPassword)) {
  echo "<br><br>.htpasswd File Code<br>$user:$encryptedPassword<br>
}
echo "</form></body></html>";
?>

Пример зашифрованных паролей можно увидеть здесь (обратите внимание, что полные остановки являются частью шифрования, разрывы строк разделяют пользователей):

user1:$1$XrC3d0Bq$.fiItuFi.cWvCZamQi2x8.
user2:$1$4AKaALkW$6WNz7zDKveBuAy.6ORFi5.
user3:$1$5HttySKH$MktpH3lQ0OkeUclHfuBKF1

Затем в каталоге, который вы хотите защитить, в файле .htaccess включите следующий код и ссылку на вашем сервере на файл .htpassword

AuthName "Restricted Area" 
AuthType Basic 
AuthUserFile /pathtofileonyourserver/.htpasswd 
AuthGroupFile /dev/null 
require valid-user

Answer 5

Нет.Это не будет безопасно только с HTML.

Answer 6

Обрабатывая ответ Даниэля, HTML и CSS можно использовать только для создания статического контента, что означает, что контент на странице не может измениться.Формы ввода, запрашивающие пароли, сравнивающие их с какой-либо базой данных и разрешающие / запрещающие доступ, являются довольно сложными динамическими вещами, которые не могут быть достигнуты только с этими двумя.По крайней мере, требуется JavaScript, и даже тогда он не будет очень безопасным.