可以强制浏览器缓存 HTML 页面吗？

Question

我要结婚了，我没有打印结婚请柬，而是制作了一个网页。我的一个朋友在他的网络服务器上创建了一个子文件夹（/var/www/web/myname），我通过 SSH 上传了我的文件（HTML、CSS、JS）。

重要的是：我只能访问该文件夹，因此我不能使用任何数据库并进行任何服务器端修改！我唯一的工具集是 HTML 指令和客户端 JS。

由于它是公开的，任何人都可以看到它，但我不希望这样。这就是为什么我使用 AES 加密我的页面的 HTML 代码并制作了一个登录页面。输入有效密码（其哈希存储在 JS 源文件中）后，JS 脚本使用密码作为密钥解密 AES 加密字符串（也存储在 JS 源文件中），并将实际页面更改为现在通过调用 document.open()、document.write() 和 document.close() 来解密 HTML 代码。

有没有办法强制浏览器缓存实际的 HTML 代码，以避免每次打开页面时都重新输入密码？

你们中的一些人请求了 JS“登录”代码：

var hashString = "sha256_hash_of_the_password"; 
var indexPage = "aes_enrypted_string_of_base64_coded_html"; // The original one is quite long...

document.getElementById("password-box").addEventListener("keyup", function(event) {
    event.preventDefault();
    document.getElementById("password-box").classList.remove("pw-bad");
    if (event.keyCode === 13) {
        document.getElementById("login-button").click();
    }
});

function buttonListener()
{
    var password = document.getElementById("password-box").value;
    if(password !== "") {
        if(CryptoJS.SHA256(password) == hashString.toLowerCase()) {
            var indexDecrypt = CryptoJS.AES.decrypt(indexPage, password).toString(CryptoJS.enc.Utf8);
            var parsedWordArray = CryptoJS.enc.Base64.parse(indexDecrypt);
            var parsedStr = parsedWordArray.toString(CryptoJS.enc.Utf8);

            document.open('text/html');
            document.write(parsedStr);
            document.close();
            return;
        }
        document.getElementById("password-box").value = "";
        document.getElementById("password-box").classList.add("pw-bad");
    }
    document.getElementById("password-box").focus();  
}

我知道这是一件愚蠢的事情，请不要评判我。 :)

Answer 1

例如，有多种方法可以缓存页面、缓存控制标头或服务工作者。也就是说，出于身份验证目的缓存页面通常不是正确的方法。相反，您可能希望保存某种 身份验证令牌（JWT、会话 cookie 等），以便进一步重新进行身份验证。

https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie

// Once authenticated using password
document.cookie = 'someKey=someValue'

// For a returning use
function getCookie(name) {
  const cookies = document.cookie.split(';')
  return (cookies.reduce((t, c) => {
    const entry = c.split('=')
    t[entry[0]] = entry[1]
    return t
  }, {}))[name]
}

if (getCookie('someKey') === 'someValue') {
  // authenticated
}