Question

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

说我有3个课程的目录： / course1 / course2 / course3

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

Answer 1

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

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

main :( CryptoJS.AES.encrypt('<a href="http://localhost:8080/_/more">Read more</a>', "hello").toString();）

text/html;U2FsdGVkX19Tdq6V7swK/7NgnwR8JgZ1dYZEkfT9hx+QKzFrpyqKeuo0Tv25ozYkAxIIt65G9DKmOYU6tmZ0Dp/I4BuopQ/3xHClB+K+BX8=

more :( CryptoJS.AES.encrypt('<h1>More</h1><p>Lorem ipsum dolor sit</p>', "hello").toString();）

text/html;U2FsdGVkX19GdZ+SRQ9vM2Amiyu0OqOOSX7X5IOCcLfHMpHHgI0h/mxS8iuUggfqmFBN+yXy53z445ZW1mAlHQ==

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

然后创建一个包含iframe的index.html页面并请求用户输入密码，然后将密码保存在某个范围内，以免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>

这允许您请求URL，解码收到的base64内容并尝试使用给定的密码对其进行解密。然后，您可以通过数据网址将解密的内容设置为iframe的内容。

(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;
        }
    });
})();

以上示例使用CryptoJS，可能无法跨浏览器工作！

此代码确实有效！

Answer 2

如果您对安全性不关心，可以通过几种方式完成。这是一个粗略的例子，让你思考你可能需要的逻辑;

请考虑以下代码：

var password = '12345678';

function showBody() {
    
    // Password matches?
    if ( document.getElementById( 'code' ).value == password ) {
      
        // Show secret stuff and hide password box
        document.getElementById( 'container' ).style.display = 'block';
        document.getElementById( 'code' ).style.display = 'none';
    }
}

document.body.onload = function () {
  
    // Hide the secret stuff
    document.getElementById( 'container' ).style.display = 'none';
  
    // Create a password box
    var input  = document.createElement( 'input' );
    input.setAttribute( 'type', 'password' );
    input.setAttribute( 'id', 'code' );
  
    // Append the password box
    document.body.appendChild( input );
  
    // Listen for the password
    document.addEventListener( 'keyup', showBody, false );
}

<body>
    <div id = 'container'>
        I am hidden
    </div>
</body>

请记住，有多种方法可以做到这一点。这只是一个示例，因此您可以开始编写代码并大致了解这类这类事物的逻辑是如何完成的。这是非常不安全的，你应该考虑服务器的其他解决方案。

js到密码保护目录

2 个答案: