Below is the demo of the modification. I tested on my side in several simple cases with success. But there still might be some problems/bugs to fix or some scenarios to think about. (Also, a better coding style is needed for my demo version).

Demo works:

If the entire website shares the same password, then this solution is already fulfilled, or might only needs a little modification.
If the pages have different passwords, and the users don't need to keep all the page with different passwords in open state (as long as they know the passwords) at the same time, then this solution is already fulfilled, or might only needs a little modification. Which means, at each time, there could be only files sharing the same passwords in open state(done by autodecrypting on page reloading)
In this case, although not implemented, the idea is given, only need several modifications. If the pages may use different passwords and meanwhile users wanna keep the different passwords for all the different pages, we could make such a modification: while saving data into LocalStorage, we also store the current url/file info into it, and check them at every page refresh. The only cons are - if user know a lot of encrypted pages and input their passwords at the same time or in a short time, the allocated data size/item quantity in the LocalStorage increase crazily. This could be solved by providing short expire time, although this would be a balance between duration of expire time and encrypted pages quantity that the users own the passwords)

The basic things are:

At every page refresh/visit, check if password and expire time stored locally. If (yes) and (the time does not expire), then try decrypting it.

New:
(When not successful - either password not correct or time expires -, as in your code displayed, throwing an exception. In the catch block, we handle this error doing nothing, which means without inline the invalidPassEl Element, so users won't know that the page already tried decrypting it before they do anything)

Reason: when user successfully decrypted page 1 and passphrase stored locally, then the user loads another page 2 (if page 2 using a password other than page 1's), the passphrase stored (which belongs to page 1) should not be removed at loading time of the page 2 for a better user experience unless the user inputted the correct password for page 2(once password for page 2 inputted correctly, the new passphrase would be stored).

(It might be possible for users that they only want to take a glance at pages other than page 1, but just a glance. They might not concern about if the stored password could decrypt pages other than page 1. Let's make an example, user A encrypts his Profile page, he might see others peoples' profile pages, but whether the his stored passphrase could decrypt others' pages, it does not really matter. So, if visiting others encrypted pages could lead to removing his own password locally and letting him input the password again when he comes back to his own profile page, he would definitely be mad at it. )

(In my project, every page may have its own password; but this solution also works well when the entire website using the same password, 'cause in this case redirecting from one page to another page, the auto decrypting will do the job perfectly beforehand without inputting the password another time unless the password expires. )

catch (e) {
    if (mode === '1') {
        invalidPassEl.style.display = "inline";
        passEl.value = "";
    }
}

Deprecated: (When not successful - either password not correct or time expires -, as in your code displayed, throwing an exception. In the catch block, we handle this error mainly by clearing the data stored in LocalStorage but without inline the invalidPassEl Element, so users won't know that the page already tried decrypting it before they do anything)

catch (e) {
    if (mode === '0') {
        // Wrong passphrase for this page, clear the stored passphrase and expire timestamp
        clearPW_in_LocalStorage(); 
    } else if (mode === '1') {
        invalidPassEl.style.display = "inline";
        passEl.value = "";
    }
}

Modification on doSubmit() function, add a parameter for it.

So that we could justify if the doSubmit() is called by the page itself(auto decrypting when page reloading) or by the user(clicking the button or pressing the enter key)

Once doSubmit() is called by user and the password inputted is correct, then update/set the data - passphrase and expire time - in the LocalStorage.

Currently i've hardcoded the expire time into 60s. Also, it could be set by the parameter given by the user while calling the encrypting tool (like encrypt.py)(i did not implemented version setting the expire time with parameter given by encrypting tool)

Two extra functions for setting/clearing the data in LocalStorage are declared and implemented

For better handling the manipulation of LocalStorage relatively.

Notice: Modification on onclick attribute of the submitPass-Element

I've changed it from submitPass.onclick =doSubmit; to submitPass.onclick = function() {doSubmit('1');} instead of submitPass.onclick =doSubmit('1');, because once it is set to doSubmit('1'), it will automatically run, which is not what we except.

Below is the demo code in detail:

<script>
        var pl = /*{{ENCRYPTED_PAYLOAD}}*/"";
        
        var submitPass = document.getElementById('submitPass');
        var passEl = document.getElementById('pass');
        var invalidPassEl = document.getElementById('invalidPass');
        var successEl = document.getElementById('success');
        var contentFrame = document.getElementById('contentFrame');
        
        if (pl === "") {
            submitPass.disabled = true;
            passEl.disabled = true;
            alert("This page is meant to be used with the encryption tool. It doesn't work standalone.");
        }
        
        function doSubmit(mode) {
            // @Param mode:int
            // * 0: auto submit
            // * 1: manual submit
            try {
                var local_passphrase = atob(localStorage.getItem("passphrase")); 

                var passEl_value = (mode === '0') ? local_passphrase : passEl.value; 
 
                var decrypted = decryptFile(CryptoJS.enc.Base64.parse(pl.data), passEl_value, CryptoJS.enc.Base64.parse(pl.salt), CryptoJS.enc.Base64.parse(pl.iv));
                if (decrypted === "") throw "No data returned";
                
                // Set default iframe link targets to _top so all links break out of the iframe
                decrypted = decrypted.replace("<head>", "<head><base href=\".\" target=\"_top\">");
                
                srcDoc.set(contentFrame, decrypted);
                
                successEl.style.display = "inline";
                passEl.disabled = true;
                submitPass.disabled = true;
                setTimeout(function() {
                    dialogWrap.style.display = "none";
                }, 50);

                if (mode === '1') {
                    // If the function is called by clicking or pressing enter, the passphrase entered by user should be stored locally along with the expire time
                    savePW_in_LocalStorage()
                }

            } catch (e) {
                if (mode === '1') {
                    invalidPassEl.style.display = "inline";
                    passEl.value = "";
                }
            }
        }
        
        submitPass.onclick = function() {doSubmit('1');}
        passEl.onkeypress = function(e){
            if (!e) e = window.event;
            var keyCode = e.keyCode || e.which;
            invalidPassEl.style.display = "none";
            if (keyCode == '13'){
              // Enter pressed
              doSubmit('1');
              return false;
            }
        }
        
        function decryptFile(contents, password, salt, iv) {
            var _cp = CryptoJS.lib.CipherParams.create({
                ciphertext: contents
            });
            var key = CryptoJS.PBKDF2(password, salt, { keySize: 256/32, iterations: 100 });
            var decrypted = CryptoJS.AES.decrypt(_cp, key, {iv: iv});
            
            return decrypted.toString(CryptoJS.enc.Utf8);
        }

        function savePW_in_LocalStorage() {
            // Store the passphrase in the input field with the help of btoa() function
            localStorage.setItem("passphrase", btoa(passEl.value));
            // Store the expire time (currently hard coded it to 60 secs <-> 60000 milisecs)
            const datetime_now_millisecs = new Date().getTime(); // Milliseconds since Epoch time
            const datetime_expire_millisecs = datetime_now_millisecs + 60000;
            localStorage.setItem("expire_time", datetime_expire_millisecs.toString());
        }

        function clearPW_in_LocalStorage() {
            localStorage.removeItem("passphrase");
            localStorage.removeItem("expire_time");
        }

        // Check if passphrase and expire time are stored locally
        if (localStorage.getItem("passphrase") && localStorage.getItem("expire_time")) {
            const datetime_now = new Date(); 
            const datetime_expire = new Date(parseInt(localStorage.getItem("expire_time"), 10));

            // Check if the passphrase already expires, if not, do a do a submit for auto decrypting
            if (datetime_expire >= datetime_now) {
                doSubmit('0'); 
            } else {
                // Otherwise, clear the stored passphrase and expire timestamp
                clearPW_in_LocalStorage();
            }
        }
    </script>

Keep page unlocked for a while between page refreshes #20

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions