2014-08-31 72 views
0

這裏的目標是上傳文件,在客戶端對其進行加密,然後通過AJAX將文件及其屬性發送到myphpscript.php。爲了允許更大的文件,我希望使用FileReader切片方法以片段形式上傳,並使用CryptoJS站點(https://code.google.com/p/crypto-js/)上描述的方法逐步加密切片。我的代碼在下面運行,但最終只能存儲預期的整個加密文件的一小部分。我可以按照我描述的方式逐步上傳和加密嗎?使用CryptoJS進行上傳和加密

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> 
<script src="js/aes.js"></script> 
<script> 
    function readBlob(opt_startByte, opt_stopByte) { 

     var files = document.getElementById('fileinput').files; 
     if (!files.length) { 
      alert('Please select a file!'); 
      return; 
     } 

     var file = files[0]; 
     var start = parseInt(opt_startByte) || 0; 
     var stop = parseInt(opt_stopByte) || file.size - 1; 

     var reader = new FileReader(); 

     // If we use onloadend, we need to check the readyState. 
     reader.onloadend = function(evt) { 
      if (evt.target.readyState == FileReader.DONE) { // DONE == 2 
       window.bits.push(aesEncryptor.process(evt.target.result)); 
      } 
     }; 

     var blob = file.slice(start, stop + 1); 
     reader.readAsBinaryString(blob); 
    } 

    function handling(evt) { 

     // INITIALIZE PROGRESSIVE ENCRYPTION 
     var key = CryptoJS.enc.Hex.parse(document.getElementById('pass').value); 
     var iv = CryptoJS.lib.WordArray.random(128/8); 
     window.bits = []; 
     window.aesEncryptor = CryptoJS.algo.AES.createEncryptor(key, {iv: iv}); 

     // LOOP THROUGH BYTES AND PROGRESSIVELY ENCRYPT 
     var startByte = 0; 
     var endByte = 0; 
     while(startByte < document.querySelector('input[type=file]').files[0].size - 1){ 
      endByte = startByte + 1000000; 
      readBlob(startByte, endByte); 
      startByte = endByte; 
     } 

     // FINALIZE ENCRYPTION AND UPLOAD 
     var encrypted = aesEncryptor.finalize(); 
     encrypted = encodeURIComponent(encrypted); 
     var filename = document.getElementById('fileinput').value; 
     var file_type = document.getElementById('fileinput').files[0].type; 
     var url = 'data=' + encrypted + '&filename=' + filename + '&filetype=' + file_type; 
     $.ajax({ 
      url: 'myphpscript.php', 
      type: 'POST', 
      data: url 
     }).success(function(data){ 
      // Display encrypted data 
      document.getElementById('status').innerHTML = 'Upload Complete.'; 
     }); 
     alert(encrypted); 

    } 
</script> 
+0

如果你想上傳數據塊中的數據,那麼我希望看到你在某種循環中發出請求......但是我沒有看到這種情況發生? – CBroe 2014-08-31 15:51:33

+0

現在我正在這樣做,糾正我,如果我錯了,是在部分評論「循環通過字節和進步加密」。在while循環中,我運行讀取特定片的函數readBlob。 – Alek 2014-08-31 15:54:12

+0

但是,您將數據發送到該環路以外的服務器,之後... – CBroe 2014-08-31 15:58:53

回答

0

所以你的問題是該行var encrypted = aesEncryptor.finalize();

這是不加密的文件,而是由CryptoJS.AES終結產生的最後的「塊」。

您需要將其追加到window.bits緩衝區的末尾以生成完全加密的文件。

而且,你不應該使用window.bits.push,你應該保持這樣的(僞代碼)的引用,以每塊的保持:

var prog; 
//then in the loop, if chunk is null assign to chunk or else concat: 
loop: 
    if(!prog) 
     prog = cipher.process() 
    else 
     prog.concat(cipher.process()) 

//then finalize 
prog.concat(cipher.finalize()) 

//now you're free to do whatever with the encrypted file: 
var ciphertext = prog.toString() 
0

一個重要的事情要記住的是,大塊可能無法到達加密器因此您必須跟蹤大塊進入aesEncryptor.process的順序,以便您可以稍後以正確的順序解密對塊進行排隊並按照正確的順序對它們進行加密以開始用。

+0

是的,我詳細說明了如何做到這一點[http://craig-bruce.com/progressive -decryption /) – 2015-03-29 23:13:54

相關問題