Javascript formdata：在附加之前加密文件答案

【问题标题】：Javascript formdata: encrypt files before appendingJavascript formdata：在附加之前加密文件
【发布时间】：2017-02-09 10:28:00
【问题描述】：

我需要修改涉及将文件上传到服务器的现有前端（角度）代码。现在文件在上传前需要加密。

目前的做法是使用 FormData 附加多个文件，并在一个请求中发送它们，如下所示：

    function uploadFiles(wrappers){

        var data = new FormData();

        // Add each file
        for(var i = 0; i < wrappers.length; i++){

            var wrapper = wrappers[i];
            var file = wrapper.file;
            data.append('file_' + i, file);
        }

        $http.post(uri, data, requestCfg).then(

        /*...*

我一直在其他项目中使用 Forge，但从来没有在这种情况下使用过，也没有真正了解如何即时加密文件并仍然将它们附加为 FormData 内容。

Forge 提供了一个简单的 API：

var key = forge.random.getBytesSync(16);
var iv = forge.random.getBytesSync(8);

// encrypt some bytes
var cipher = forge.rc2.createEncryptionCipher(key);
cipher.start(iv);
cipher.update(forge.util.createBuffer(someBytes));
cipher.finish();
var encrypted = cipher.output;

后端使用 Formidable 接收文件，并且所有文件处理都已连接。因此，我想坚持使用现有的前端逻辑，而只是插入加密逻辑。在这方面，必须加密的不是整个表单数据......我还没有找到一个好的线索来解决这个问题。

非常欢迎提出建议！

【问题讨论】：

这里的目标是什么？您是在尝试保护传输中的文件还是保护这些文件不被控制网络服务器的人访问？
不是你的问题，但你看过原生的crypto API 吗？（如果您的用户拥有可靠的最新浏览器，它会提供真正的加密随机性和内置算法）
嗨@Quentin，确实，远程服务器一定不能读取内容。它是浏览器和实际处理引擎之间的中间节点。医疗数据，似乎对潜在的滥用很敏感。
嗨@Touffy，不，我没有，在接收端也使用了forge，所以我从那个开始......我会看看你提到的cyrpto api。也许会解决我的问题:-)

标签： javascript encryption aes form-data

【解决方案1】：

好的，找到了解决方案并添加了解密代码。这增加了一层异步代码。

        function appendFile(aFile, idx){

            // Encrypt if a key was provided for this protocol test
            if(!key){
                data.append('dicomfile_' + idx, file);
                appendedCount++;
                onFileAppended();
            }

            else{
                var reader = new FileReader();
                reader.onload = function(){

                    // 1. Read bytes
                    var arrayBuffer = reader.result;
                    var bytes = new Uint8Array(arrayBuffer);    // byte array aka uint8

                    // 2. Encrypt
                    var cipher = forge.cipher.createCipher('AES-CBC', key);
                    cipher.start({iv: iv});
                    cipher.update(forge.util.createBuffer(bytes));
                    cipher.finish();

                    // 3. To blob (file extends blob)
                    var encryptedByteCharacters = cipher.output.getBytes();     // encryptedByteCharacters is similar to an ATOB(b64) output
                    // var asB64 = forge.util.encode64(encryptedBytes); 
                    // var encryptedByteCharacters = atob(asB64);

                    // Convert to Blob object
                    var blob = byteCharsToBlob(encryptedByteCharacters, "application/octet-stream", 512);

                    // 4. Append blob
                    data.append('dicomfile_' + idx, blob, file.name);

                    // Decrypt for the sake of testing
                    if(true){

                        var fileReader = new FileReader();
                        fileReader.onload = function() {
                            arrayBuffer = this.result;
                            var bytez = new Uint8Array(arrayBuffer);
                            var decipher = forge.cipher.createDecipher('AES-CBC', key);
                            decipher.start({iv: iv});
                            decipher.update(forge.util.createBuffer(bytez));
                            decipher.finish();
                            var decryptedByteCharacters = decipher.output.getBytes();
                            var truz = bytes === decryptedByteCharacters;
                            var blob = byteCharsToBlob(decryptedByteCharacters, "application/octet-stream", 512);
                            data.append('decrypted_' + idx, blob, file.name + '.decrypted');

                            appendedCount++;
                            onFileAppended();       
                        };
                        fileReader.readAsArrayBuffer(blob);
                    }

                    else{

                        // z. Resume processing
                        appendedCount++;
                        onFileAppended();                           
                    }
                }

                // Read file
                reader.readAsArrayBuffer(aFile);
            }
        }

function onFileAppended(){

            // Only proceed when all files were appended and optionally encrypted (async) 
            if(appendedCount !== wrappers.length) return;
            /* resume processing, upload or do whathever */

【讨论】：