使用 css/html 密码保护网页？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9381479/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
password protect a web page using css/html?
提问by Renoto
I've seen several questions about password protecting pages, but none of them seem to be exactly what I'm looking for. JavaScript, or Apache, and such aren't options that I'm able to consider currently. I also don't have the ability to download a product or buy one since this isn't exactly for me but its for my boss' website, so please refrain from suggestions like that.
我看过几个关于密码保护页面的问题，但似乎没有一个正是我正在寻找的。JavaScript 或 Apache 等不是我目前能够考虑的选项。我也没有能力下载或购买产品，因为这不完全适合我，而是适合我老板的网站，所以请不要提出这样的建议。
The site is currently written in CSS and HTML, and that's also the extent of my coding knowledge unfortunately. I saw a few places where people used PHP coding, but every time I tried I just got a blank page or it didn't work out properly, or nothing would happen when I entered the password.There also haven't been any really good detailed instructions on it, so I never know where I'm supposed to put the PHP code (does it go on its own page or is it integrated?) or how to connect it to the actual web page.
该网站目前是用 CSS 和 HTML 编写的，不幸的是，这也是我编码知识的范围。我看到了一些人们使用 PHP 编码的地方，但每次我尝试时，我都会得到一个空白页面，或者无法正常工作，或者输入密码时什么也没有发生。也没有任何真正的好关于它的详细说明，所以我永远不知道我应该把 PHP 代码放在哪里（它是放在自己的页面上还是集成了？）或如何将它连接到实际网页。
Truthfully it doesn't have to be anything fantastic, because a lot of the people who will be looking at this site are people who aren't very computer savvy, just a simple form box with a password field. It would be best if there was a code I could put right into the HTML on the page. If I have to make a separate HTML page I don't mind doing that either. There's going to be one password given to the Salesmen so they can access the private pages while on the road from their laptops or tablets.
说实话，它不一定是什么了不起的东西，因为很多浏览这个网站的人都不是很懂计算机，只是一个带有密码字段的简单表单框。如果有一个代码可以直接放入页面上的 HTML 中，那将是最好的。如果我必须制作一个单独的 HTML 页面，我也不介意这样做。将为销售人员提供一个密码，以便他们在旅途中通过笔记本电脑或平板电脑访问私人页面。
I saw something about .htpassword and another one I cant remember, but I haven't been able to find any step by step instructions or detailed information about it (detailed meaning info I can understand...). I saw also the thing about password_protect.php, but that requires a username field I think, and I cant really use one like that. There wont be a username, and sadly that's asking too much of the salesmen to remember two things heh.
我看到了一些关于 .htpassword 的内容和另一个我不记得的内容，但我无法找到任何分步说明或有关它的详细信息（我能理解的详细含义信息......）。我也看到了关于 password_protect.php 的东西，但我认为这需要一个用户名字段，我不能真正使用这样的字段。不会有用户名，可悲的是，这要求太多的销售人员记住两件事，呵呵。
Anyways, I apologize for my ignorance on the subject, and thank anyone for their help in advance!
无论如何，我为我对这个主题的无知道歉，并提前感谢任何人的帮助！
回答by carny666
Any password logic in css or html (or even javascript) would be useless as all of this 'code' is downloaded to the client. You need to have the password check done on the server-side.
css 或 html（甚至 javascript）中的任何密码逻辑都将毫无用处，因为所有这些“代码”都已下载到客户端。您需要在服务器端完成密码检查。
回答by Quentin
password protect a web page using css/html?
使用 css/html 密码保护网页？
… is impossible. One is a presentation language and one is a document markup language.
… 是不可能的。一种是表示语言，一种是文档标记语言。
I never know where I'm supposed to put the PHP code (does it go on its own page or is it integrated?) or how to connect it to the actual web page.
我永远不知道我应该把 PHP 代码放在哪里（它是放在自己的页面上还是集成在一起？）或者如何将它连接到实际的网页。
PHP is a programming / template language. A typical usage would be to embed PHP code in an HTML document.
PHP 是一种编程/模板语言。一个典型的用法是在 HTML 文档中嵌入 PHP 代码。
In the context of the WWW, it is a server side programming language. A webserver is responsible for running the PHP program through a PHP interpretor and sending the output to the client (instead of sending the original file).
在 WWW 的上下文中，它是一种服务器端编程语言。网络服务器负责通过 PHP 解释器运行 PHP 程序并将输出发送到客户端（而不是发送原始文件）。
I saw something about .htpassword
我看到了一些关于 .htpassword 的信息
This is a common file name for a password file used with Apache's built in password system.
这是与 Apache 的内置密码系统一起使用的密码文件的通用文件名。
If you just want a simple password system, then you should look at the manual for your web server.
如果您只想要一个简单的密码系统，那么您应该查看 Web 服务器的手册。
回答by Hymantheripper
You can create a .htpassword file and upload it to the non-public part of your server. Its contents should look something like this:
您可以创建一个 .htpassword 文件并将其上传到服务器的非公开部分。它的内容应该是这样的：
user1:password
user2:secondpassword
user3:thirdpassword
You can create these encrypted passwords with the simple script below.
您可以使用下面的简单脚本创建这些加密密码。
<?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>";
?>
An example of encrypted passwords can be seen here (please note, the fullstops are part of the encryption, the line breaks separate the users):
可以在此处看到加密密码的示例（请注意，句号是加密的一部分，换行符将用户分开）：
user1:$XrC3d0Bq$.fiItuFi.cWvCZamQi2x8.
user2:AKaALkWWNz7zDKveBuAy.6ORFi5.
user3:HttySKH$MktpH3lQ0OkeUclHfuBKF1
Then in the directory you want to protect, in the .htaccess file include the following code and the link on your server to the .htpassword file
然后在您要保护的目录中，在 .htaccess 文件中包含以下代码和服务器上指向 .htpassword 文件的链接
AuthName "Restricted Area"
AuthType Basic
AuthUserFile /pathtofileonyourserver/.htpasswd
AuthGroupFile /dev/null
require valid-user
回答by Robin
If you add javascript, with a bit of pre-processing it ispossible to securely password protect a page, no server-side validation needed.
如果添加的JavaScript，带着几分的预处理它是能够可靠地密码保护网页，不需要服务器端验证。
Encrypt your content with a symmetric key algo like AES (that's the pre-processing), put it online and use javascript to decrypt that content with a user provided password.
使用对称密钥算法（如 AES）加密您的内容（这是预处理），将其放在网上并使用 javascript 使用用户提供的密码解密该内容。
Everything can then happen client-side in the browser. It doesn't matter if the code is open for everyone to see.
然后一切都可以在浏览器的客户端发生。代码是否公开给所有人看都没有关系。
Pseudo-code:
伪代码：
<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>
For reference if you want to see a possible implementation I wrote a simple PoC using the crypto-js library showing that idea (StatiCrypt), where you can do the pre-processing and encrypt your page with a password prompt.
作为参考，如果您想查看可能的实现，我使用 crypto-js 库编写了一个简单的 PoC，显示了该想法 ( StatiCrypt)，您可以在其中进行预处理并使用密码提示加密您的页面。
回答by Daniel A. White
No. It would not be secure with just HTML.
不。仅使用 HTML 是不安全的。
回答by Abhranil Das
Elaborating on Daniel's answer, HTML and CSS can be used only to create staticcontent, meaning that the content on the page cannot change. Input forms asking for passwords, checking it against some database and allowing/denying access are pretty involved dynamic things that cannot be achieved solely with these two. At least javascript is required, and even then it will not be very secure.
详细说明 Daniel 的回答，HTML 和 CSS 只能用于创建静态内容，这意味着页面上的内容不能更改。输入表单要求输入密码、根据某个数据库检查它以及允许/拒绝访问是非常复杂的动态事情，仅靠这两者是无法实现的。至少需要 javascript，即使这样它也不会很安全。
