使用 css/html 密码保护网页？答案

【问题标题】：password protect a web page using css/html?使用 css/html 密码保护网页？
【发布时间】：2012-03-11 23:52:31
【问题描述】：

我看到了几个关于密码保护页面的问题，但似乎都不是我想要的。 JavaScript 或 Apache 等不是我目前能够考虑的选项。我也没有能力下载或购买产品，因为这不完全适合我，而是适合我老板的网站，所以请不要提出这样的建议。

该网站目前是用 CSS 和 HTML 编写的，不幸的是，这也是我的编码知识范围。我看到一些地方有人使用PHP编码，但每次我尝试都只是一个空白页或者它不能正常工作，或者我输入密码时没有任何反应。也没有任何真正好的关于它的详细说明，所以我永远不知道我应该将 PHP 代码放在哪里（它是放在自己的页面上还是集成在一起？）或者如何将它连接到实际的网页。

说实话，它并不一定很精彩，因为很多会浏览这个网站的人都不是很精通计算机的人，只是一个带有密码字段的简单表单框。如果我可以将代码直接放入页面上的 HTML 中，那将是最好的。如果我必须制作一个单独的 HTML 页面，我也不介意这样做。将为销售人员提供一个密码，以便他们在旅途中通过笔记本电脑或平板电脑访问私人页面。

我看到了一些关于 .htpassword 的内容和另一个我不记得的内容，但是我无法找到任何分步说明或有关它的详细信息（我可以理解的详细含义信息...）。我还看到了有关 password_protect.php 的内容，但我认为这需要一个用户名字段，而我不能真正使用这样的字段。不会有用户名，可悲的是，这要求销售人员记住两件事，呵呵。

无论如何，对于我对这个主题的无知，我深表歉意，并提前感谢任何人的帮助！

【问题讨论】：

你说'没有 javascript'，但这几乎是你能够做你想做的事的唯一方法 - 结果将不会根本安全来自那些有任何 JS 知识的人。
Renoto 扩展您的知识。这应该使用服务器端语言来完成（就像你所说的I saw also the thing about password_protect.php）。当我开始编程时，我也问过那些愚蠢的问题。实际上，它并不需要您想要的任何东西，但您需要先学习语言。
与您的网络主机交谈/查看@他们的常见问题解答以获得 .htaccess/.htpassword 支持，这是执行此操作的最简单方法，并且不需要编写任何代码，例如help.godaddy.com/article/2504
我读到，由于大多数用户关闭了 Javascript，因此将其用作密码保护形式是不明智的。除非那个信息是错误的？
对于 .htaccess/.htpassword 解决方案，请参阅我的答案

标签： html css web passwords

【解决方案1】：

没有。仅使用 HTML 并不安全。

【讨论】：

【解决方案2】：

css 或 html（甚至 javascript）中的任何密码逻辑都将毫无用处，因为所有这些“代码”都已下载到客户端。您需要在服务器端完成密码检查。

【讨论】：

【解决方案3】：

详细阐述 Daniel 的回答，HTML 和 CSS 只能用于创建静态内容，这意味着页面上的内容无法更改。要求输入密码的输入表单，根据某些数据库检查密码以及允许/拒绝访问是相当复杂的动态事情，仅靠这两者是无法实现的。至少需要javascript，即使那样也不是很安全。

【讨论】：

【解决方案4】：

使用 css/html 密码保护网页？

……是不可能的。一种是演示语言，一种是文档标记语言。

我不知道应该将 PHP 代码放在哪里（它是放在自己的页面上还是集成在一起？）或者如何将它连接到实际的网页。

PHP 是一种编程/模板语言。一个典型的用法是在 HTML 文档中嵌入 PHP 代码。

在 WWW 的上下文中，它是一种服务器端编程语言。网络服务器负责通过 PHP 解释器运行 PHP 程序并将输出发送到客户端（而不是发送原始文件）。

我看到了一些关于 .htpassword 的东西

这是用于 Apache 内置密码系统的密码文件的通用文件名。

如果您只想要一个简单的密码系统，那么您应该查看您的网络服务器的手册。

【讨论】：

Mk 这将是一个非常愚蠢的问题，我已经知道了。究竟什么是“阿帕奇”。我知道它是一种服务器，但它是通用的吗？它只是自动包含在所有网页中的东西吗？它像软件吗？我看到到处都提到它，但我不确定它是什么以及它在互联网方面的功能是什么。我试着查了几次，但这让我更加困惑。
Apache 是更多common web servers 之一。 Web 服务器是一种软件，它在网络上侦听来自浏览器的 HTTP 请求（并做出响应）。
啊，谢谢！这实际上比我读过的一些描述要好。很好，切中要害。

【解决方案5】：

您可以创建一个 .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

【讨论】：

这是我开始感到困惑的地方，呵呵。在受保护的 pg（称为 Catapg）上只有一个 PDF 文件的下载按钮。所有页面都在主目录中。根据我收集的信息，我创建了一个 .htpassword 文件并将所有这些代码放入其中，除了最后一部分带有 AuthName 等。然后我制作 .htaccess 页面并将其与主目录中的所有其他文件一起放入，然后链接到它的 .htpassword 文件。但我很好奇，.htaccess 文件如何知道具体保护名为 Catapg 的页面，它如何知道启动？
实际上我只是做了一些研究并尝试这样做，但什么也没发生。我的意思是，每当我尝试将 .htpass/access 文件加载到服务器时，什么都没有出现，但服务器认为它们在那里。我根本看不到这些文件，但是如果我尝试加载它们，它会说它们已经存在。我必须删除其中的任何文件夹才能删除文件本身...不确定这是否是我现在可以实际使用的方法，除非我遗漏了什么
您使用的是什么 FTP 客户端？看来你没有显示隐藏文件……
嗯，信不信由你，我实际上联系了主机站点，他们为我设置了密码保护。我真的很幸运，但是因为您的回答是我最想回答的问题，所以我说您回答了我的问题。

【解决方案6】：

如果您添加 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>

作为参考，如果您想查看可能的实现，我使用显示该想法的 crypto-js 库 (StatiCrypt) 编写了一个简单的 PoC，您可以在其中进行预处理并使用密码提示加密您的页面。

【讨论】：

我写的一个类似的 html 保护工具，它使用密钥派生而不是直接的 AES：PageCrypt