javascript - 如何在无服务器环境中使用密码保护文件 (html)？

Question

是否可以在不使用 .htaccess、php 或 localhost 的情况下对文件进行密码保护。也许使用某种类型的加密或其他方法。

Answer 1

是的，你可以实现相当不错的前端加密，多亏了 SubtleCrypto API .
甚至还有一个 js port of openpgp .

所以是的，您最终可以将您希望的任何数据编码为例如 pgp 消息，然后需要密码来解密并使用它。

如果您需要加密您的消息:

(async function() {
  const cleartext = 'alert("an useless message")';
  const msg = openpgp.message.fromText(cleartext);
  const ciphertext = await openpgp.encrypt({
    message: msg,
    passwords: ["mypassword"],
    armor: true
  });
  // you'd be better saving as a text file though,
  // ecnoding and new line characters matter
  console.log(ciphertext.data);
})()
.catch(console.error);

<script src="https://cdn.jsdelivr.net/npm/openpgp@4.3.0/dist/openpgp.min.js"></script>

然后解密:

(async function() {
  const password = prompt('enter password ("mypassword")');
  // one of the results of previous snippet
  const encrypted = `-----BEGIN PGP MESSAGE-----
Version: OpenPGP.js v4.3.0
Comment: https://openpgpjs.org

wy4ECQMI61wIzRzOswzg/j6zhPvasbu97nt+XeD23m3UNnc8J3SqAGiogvn8
zqKD0lMB49BViJ8gQ7E/6If6vaCv9NBojjVgS9P2E7mROtZrbz5Z150ohcKV
kDncF//Io6sb/5L/5AcLXBxCJzhQKIYwtIdHu9paWGpEto1z5EzOGzpZgg==
=hMhM
-----END PGP MESSAGE-----`;
  const decrypted = await openpgp.decrypt({
    message: await openpgp.message.readArmored(encrypted),
    passwords: [password]
  })
  const cleartext = decrypted.data;
  console.log(cleartext);
  new Function(cleartext)();
})()
.catch(console.error);

<script src="https://cdn.jsdelivr.net/npm/openpgp@4.3.0/dist/openpgp.min.js"></script>