Javascript FormData:在附加之前对文件进行加密 [英] Javascript formdata: encrypt files before appending

问题描述

我需要修改涉及将文件上传到服务器的现有前端(角度)代码.现在，文件需要先加密，然后再上传.

I need to modify existing frontend (angular) code that involves uploading files to a server. Now the files need to be encrypted before being uploaded.

当前方法使用FormData附加多个文件，并在单个请求中发送它们，如下所示:

The current approach uses FormData to append a number of files and send them in a single request as shown below:

    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内容附加.

I have been using Forge in other projects, but never in this sort of context and don't really see how to encrypt files on the fly and still append them as FormData contents.

Forge提供了一个简单的API:

Forge provides an easy 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接收文件，并且所有文件处理都已连接.因此，我想坚持使用现有的前端逻辑，而只是插入加密逻辑.因此，并不是必须加密整个表单数据...我还没有找到解决此问题的好方法.

The backend recieves files using Formidable and all the file hanlding is already wired. I would thus like to stick to using the existing front-end logic but simply insert the encryption logic. In that, it's not the entire formdata that must be encrypted... I haven't found a good lead yet to approach this.

非常欢迎提出建议！

推荐答案

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

Ok, found a solution and added the decrypt code as well. This adds a layer of async code.

        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 */

这篇关于Javascript FormData:在附加之前对文件进行加密的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！