如何在浏览器中使用Javascript加密/解密任意二进制文件？

Question

我需要让用户从他们的系统中加载文件，即时对其进行加密，然后上传到服务器，然后做相反的事情（从服务器中下载文件，进行即时解密，然后让用户将其保存在本地）。尽管首选AES，但是确切的加密方法不是很重要。

浏览器中的二进制数据加密/解密之类的链接仅告诉您“使用CryptoJS”，但我找不到任何实际有效的示例。我发现的所有样本都专注于处理字符串，而在二进制数据中，您可以轻松地找到无效的Unicode序列。

我可以测试任何可以处理任何类型文件的示例吗？

Answer 1

注意：我不会解释如何解密数据，但是使用加密代码和提供的文档链接应该很容易找出来。

首先，用户必须能够通过input元素选择文件。

<input type="file" id="file-upload" onchange="processFile(event)">

然后，您可以使用HTML5 FileReader API加载文件的内容

function processFile(evt) {
    var file = evt.target.files[0],
        reader = new FileReader();

    reader.onload = function(e) {
        var data = e.target.result;

        // to be continued...
    }

    reader.readAsArrayBuffer(file);   
}

使用WebCrypto API加密获取的数据。
如果您不想随机生成密钥，请使用该密钥crypto.subtle.deriveKey来创建密钥，例如，根据用户输入的密码。

// [...]
var iv = crypto.getRandomValues(new Uint8Array(16)); // Generate a 16 byte long initialization vector

crypto.subtle.generateKey({ 'name': 'AES-CBC', 'length': 256 ]}, false, [ 'encrypt', 'decrypt' ])
    .then(key => crypto.subtle.encrypt({ 'name': 'AES-CBC', iv }, key, data))
    .then(encrypted => { /* ... */ });

现在，您可以将加密的数据发送到服务器（例如，使用AJAX）。显然，您还必须以某种方式存储初始化向量，以便以后成功解密所有内容。

这是一个警告加密数据长度的小例子。

注意：如果Only secure origins are allowed显示，请使用https重新加载页面，然后重试示例（这是WebCrypto API的限制）： HTTPS-Link

<input type="file" id="file-upload" onchange="processFile(event)">

function processFile(evt) {
    var file = evt.target.files[0],
        reader = new FileReader();

    reader.onload = function(e) {
        var data = e.target.result;

        // to be continued...
    }

    reader.readAsArrayBuffer(file);   
}

Answer 2

请参阅https://github.com/meixler/web-browser-based-file-encryption-decryption的示例，该示例显示了基于Web Crypto API在 Web 浏览器中使用 Javascript 对任意二进制文件进行加密/解密的示例。