繁体   English   中英

这可以动态编码/解码上传的文件吗?

[英]Is this possible to encode/decode uploaded file on the fly?

最近我在考虑构建一个小型的、安全的服务,让用户上传文件并使用接收者的公钥对该文件进行编码。 关键是我想即时执行此操作,因此在上传之前没有编码,而是作为其中的一部分。 我开始在互联网上挖掘,但找不到任何直接的答案。 这甚至可能吗?

我想到了Streams API (特别是TransformStream ),但我没有使用这个新平台功能的经验。

您可能仍然需要为其他浏览器构建上传前编码。
该解决方案可能已经足够好了。
但是将它用作附魔可能会很好,检测该功能是微不足道的:

if ('TransformStream' in window) {

您必须在上传文件之前执行加密。

我提供了一个客户端加密/解密的简单示例(使用 Caesar 加密)。

本质上,它使用FileReader API 将文件的内容转换为ArrayBuffer 使用类型化数组(在本例中为Uint8Array ),您可以修改原始ArrayBuffer每个字节,并执行加密。

加密完成后,您可以继续发送数据。

 let input = document.getElementById('input'); let img = document.getElementById('myImg'); let caesarKey = document.getElementById('caesarKey'); let log = document.getElementById('log'); document.getElementById('encrypt').addEventListener('click',encrypt); document.getElementById('decrypt').addEventListener('click',decrypt); // variables to store the image data, ad the encrypted image data let imgData; let encryptedData; // prepare the file reader, and the onload callback let reader = new FileReader(); reader.onload = e=>{ log.innerHTML='Image ready! Press encrypt button...' imgData = reader.result; } // declare the file input onchangen handler input.addEventListener('change', e=> { log.innerHTML='...processing image' reader.readAsArrayBuffer(e.target.files[0]); }); // caesar encrypt function function encrypt(){ log.innerHTML='Encrypting...' let key = Number( caesarKey.value ) encryptedData = new Uint8Array(imgData); for(let i=0;i<encryptedData.byteLength;i++){ encryptedData[i] = encryptedData[i]+key; } log.innerHTML='Image encrypted! Press decrypt...' } // caesar decrypt function, and image output function decrypt(){ log.innerHTML='Decrypting...' let key = Number( caesarKey.value ); for(let i=0;i<encryptedData.byteLength;i++){ encryptedData[i] = encryptedData[i]-key; } // output the image var blob = new Blob( [ encryptedData ], { type: "image/jpeg" } ); var urlCreator = window.URL || window.webkitURL; var imageUrl = urlCreator.createObjectURL( blob ); img.src = imageUrl; log.innerHTML='Image decrypted! ' }
 #log{ padding:5px; text-align:center; background-color:blue; color:white; margin:5px; }
 <div id="log">--Select a jpg Image--</div> <input type="file" accept=".jpg" id="input"><br> Caesar Shift value: <input type="text" id="caesarKey" value="5"><br> <input type="button" value="Caesar Encrypt" id="encrypt"> <input type="button" value="Caesar Decrypt" id="decrypt"> <img id="myImg">

例如在服务器端,您可以使用 node.js 的下一个简单代码

// Dependencies
const crypto = require('crypto');
const fs = require('fs');

const secret = 'password';

/*
*  Crypt file with aes192
* @param {String} fileName to crypt with aes192 alghoritm and secret that contains password
* function create file with name fileName.enc
*
*/
const cryptFile = (fileName) => {
  const cipher = crypto.createCipher('aes192', secret);

  const input = fs.createReadStream(fileName);
  const output = fs.createWriteStream(`${fileName}.enc`);

  input.pipe(cipher).pipe(output);
};

/*
*  Decrypt file with aes192
* @param {String} fileName to decrypt with aes192 alghoritm and secret that contains password
* function create file with name fileName
*
*/
const decryptFile = (fileName) => {
  const decipher = crypto.createDecipher('aes192', secret);

  const input = fs.createReadStream(`${fileName}.enc`);
  const output = fs.createWriteStream(fileName);

  input.pipe(decipher).pipe(output);
};

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM