Fatal编程技术网

Javascript js密码保护目录

javascript

Javascript js密码保护目录,javascript,password-protection,Javascript,Password Protection,是否可以对服务器上的某些目录（网站用户）进行密码保护？它不必是安全的，因为它只是为了防止学习者下载/访问其他课程的材料。学习者不是很精通技术，所以这没什么大不了的 假设我有3门课程的目录： /课程1 /课程2 /课程3 我希望每个目录都有自己的密码，这样我就可以给参加课程1的学习者发送电子邮件，发送url和密码。 我该怎么做？我对服务器的访问非常有限，因此客户端是唯一的选择。如果您不关心安全性，可以通过几种方法来实现。这里有一个粗略的例子，让你思考一下你可能需要的逻辑 考虑以下代码： var密

是否可以对服务器上的某些目录（网站用户）进行密码保护？它不必是安全的，因为它只是为了防止学习者下载/访问其他课程的材料。学习者不是很精通技术，所以这没什么大不了的

假设我有3门课程的目录： /课程1 /课程2 /课程3

我希望每个目录都有自己的密码，这样我就可以给参加课程1的学习者发送电子邮件，发送url和密码。
我该怎么做？我对服务器的访问非常有限，因此客户端是唯一的选择。

如果您不关心安全性，可以通过几种方法来实现。这里有一个粗略的例子，让你思考一下你可能需要的逻辑

考虑以下代码：

var密码='12345678'；
函数showBody（）{
//密码匹配？
if（document.getElementById（'code'）。值==密码）{
//显示秘密内容并隐藏密码框
document.getElementById（'container'）.style.display='block'；
document.getElementById（'code'）.style.display='none'；
}
}
document.body.onload=函数（）{
//隐藏秘密
document.getElementById（'container'）.style.display='none'；
//创建密码框
var input=document.createElement（'input'）；
setAttribute（'type'，'password'）；
setAttribute（'id'，'code'）；
//附加密码框
document.body.appendChild（输入）；
//监听密码
文件。添加的文件列表（'keyup'，showBody，false）；
}

我被隐藏了

考虑到Maximillian Laumeister的想法，我想到了这个。这可能不是一个完美的解决方案，但应该有效

您可以将服务器上的所有资源加密存储在纯文本文件中，编码为base64。用逗号分隔，可以在所需mime类型前面加上前缀。例如

  • main
    ：（
    CryptoJS.AES.encrypt（“”，“hello”）.toString（）；
    ）

  • more
    ：（
    CryptoJS.AES.encrypt（'moreLorem ipsum dolor sit
    ，“hello”）.toString（）；
    ）

在超链接中，您必须在URL（
\uu/
）中放置一些内容，从而导致404，该404可在以后删除，并且您必须指定包括服务器在内的协议。这是脚本拦截请求、停止请求、请求正确URL并解码响应的唯一方法。（之所以需要404，是因为浏览器将直接下载指定的文件，而不会调用
load
事件处理程序。）

然后创建一个
index.html
页面，该页面包含一个iframe，并请求用户输入密码，然后将密码保存在某个范围内，以便XSS攻击无法检索该值

<html>
    <head>
        <meta charset="utf8">
    </head>
    <body>
        <iframe id="theIframe"></iframe>
        <script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/aes.js"></script>
        <script src="script.js"></script>
    </body>
</html>
上面的示例使用并且可能无法跨浏览器工作

这段代码确实有效

一个想法是使用JavaScript和唯一密码加密每个目录中的
index.html
页面。然后可以从索引页链接到目录中的每个资源。请查看我的答案以了解详细信息。@MaximillianLaumeister虽然这对于单页来说是个很酷的主意，但我不知道如何使用此技术保护整个目录，而不必一直重新输入密码。（您当然可以将密码存储在本地存储器中，但是…@id表示您是正确的，它不会保护整个目录，只保护URL，这意味着安全性不高。这不能在客户端完成。您必须将服务器配置为要求对特定目录进行身份验证。@MaximillianLaumeister我进一步考虑了您的想法。如果你有兴趣，请看我下面的回答。这个问题是关于保护的，所以任何以“如果你不关心安全性”开头的回答都是离题的。这个问题本质上是含糊不清的，因为下一行说“它不必是安全的”，所以永远不应该推荐不安全的方法。这与“告诉他们不要查看其他目录”或“不要告诉他们其他课程的URL”一样安全。提供的答案为OP在特定上下文中提出的问题提供了答案。如果OP不需要某种特定的方式，那么我的目标不是将我的理想强加给他们。如果他没有说“它不必是安全的”，那就不同了，但他确实说过，在这种情况下，提供的答案是完全正确的。答案有效且准确地遵循问题的指导原则。对“安全”原因的一个否决是有人希望他们的理想被强加给别人，基于他们考虑的是OP需要，而不是想要。谢谢大家。我会在接下来的几天里玩它谢谢大家。我打算在接下来的几天里玩它。 
text/html;U2FsdGVkX19GdZ+SRQ9vM2Amiyu0OqOOSX7X5IOCcLfHMpHHgI0h/mxS8iuUggfqmFBN+yXy53z445ZW1mAlHQ==

<html>
    <head>
        <meta charset="utf8">
    </head>
    <body>
        <iframe id="theIframe"></iframe>
        <script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/aes.js"></script>
        <script src="script.js"></script>
    </body>
</html>

(function(){
    var iframe = document.getElementById("theIframe");
    var password = prompt("Enter the password!");
    var allowEvent = true;

    function presentURL(url){
        allowEvent = false;
        var req = new XMLHttpRequest();
        req.addEventListener("load", function(){

            var splitters = this.responseText.split(";", 2);
            var type = splitters[0];
            var encrypted = splitters[1];

            var decrypted = CryptoJS.AES.decrypt(encrypted, password).toString(CryptoJS.enc.Utf8); //Decrypt
            var data = window.btoa(decrypted); //Encode the decrypted data into base64

            iframe.src = "data:" + type + ";base64," + data;

        });
        req.open("GET", url);
        req.send();
    }

    presentURL("/main");

    iframe.addEventListener("load", function(e){
        e.preventDefault();
        if (allowEvent){
            iframe.contentWindow.stop();
            //remove the 404 cause and call presentURL
            presentURL(iframe.contentWindow.location.href.replace(/_\//, ""));
        }
        else {
            allowEvent = true;
        }
    });
})();