我想要实现的目标
我正在研究基于浏览器的测验游戏,其中包含预先录制的音频线索,并将其发送给用户。为了加载服务器以及已经传输音频,文件已经在游戏开始之前提前发送给用户。由于游戏是实时和竞争性地进行的,因此玩家之前没有机会收听音频文件是很重要的。我现在的想法是基本上向用户发送AES加密文件,通过websockets实时发送文件密码,使用 crypto.js 在浏览器中对其进行解密并立即播放。
问题
由于某种原因,我无法使用crypto.js正确解密二进制文件,因此我可以将其提供给音频上下文的decodeAudioData。我从解密或胡言乱语中得到空洞的回应。
我尝试了什么
使用以下调用根据文档对音频(在本例中为mp3)进行AES加密:
openssl enc -aes-256-cbc -in infile -out outfile -pass pass:"testpass" -e -base64
然后生成的文件通过XMLHTTPRequest加载请求类型文本(我已经尝试过arraybuffer但也失败了),结果存储在变量(this.protectedBuffer
)中。
根据Crypto.js文档,这应该解密文件:
var decrypted = CryptoJS.AES.decrypt(this.protectedBuffer, 'testpass');
// next step obviously doesn't work as decrypted is
// is not an arraybuffer.
context.decodeAudioData(decrypted, function() { ... });
但是这会导致无法播放,只返回一个单词列表。我知道我错过了一些步骤,但我现在完全没有线索什么是无效的,如果有人能指出我正确的方向告诉我我做错了什么,我会非常高兴。
编辑:以下是我正在努力实现的目标http://jsfiddle.net/HKu3n/1/
答案 0 :(得分:2)
当openssl
生成base64编码的文件时,它会插入大量的空格。特别是,它将输出分解为64字节行:
U2FsdGVkX18AVcl/JumJawmKlaYWjQwo6wDcETza5AX6VK6aVCMtHXic2xtDIw1G
PJfxbKLJKWgvKXLNGO0jgPTI6qFPllts6VAIzvZ3uqV8BBPd0ge4YJe/q7e7ZGmx
QJyvFnyumo3b2pMxxMWngtl8qpxcsaiSrALnBXZizJ70PcTsyfk7aym1twkj0ofY
...
最后,最后一个换行符。 crypto-js
加密实用程序不喜欢所有这些空格,因此您必须将其删除(我使用拆分/连接)。例如:
$.get('/audio.aes', function(data){
var decrypted = CryptoJS.AES.decrypt(data.split(/\s/).join(''), 'testpass');
// ...
});
CryptoJS.AES.decrypt
返回的是WordArray
个对象。要将其转换为字符串,您必须调用toString
并提供编码:
decrypted.toString(CryptoJS.enc.Utf8);
decrypted.toString(CryptoJS.enc.Base64);
我没有任何方便的音频文件,但我能够使用图片(在/image.aes
提供)端到端地完成这项工作:
$.get('/image.aes', function(data){
var decrypted = CryptoJS.AES.decrypt(data.split(/\s/).join(''), 'testpass');
$('#imageContainer').append('<img src="data:image/jpeg;base64,'
+ decrypted.toString(CryptoJS.enc.Base64) + '">');
});
});
我在另一端看到了一张图片!您可能需要进行一些争论才能将解码后的数据转换为正确的音频输出格式,但我希望这能让您超越驼峰。
<强>更新强>
我使用你的音频使用你的示例jsFiddle。为了获得必要的ArrayBuffer
,我使用了base64DecToArr
here:
var decoded = CryptoJS.AES.decrypt(request.response.split(/\s/).join(''),
'testpass');
var arr = base64DecToArr(decoded.toString(CryptoJS.enc.Base64));
context.decodeAudioData(arr.buffer, function (buffer) {
alert('success decoding buffer');
}, function (err) {
alert('couldn\'t decode buffer');
});
在这里工作jsFiddle:http://jsfiddle.net/BTnpL/
将WordArray
函数返回的crypto-js
对象转换为ArrayBuffer
使用的decodeAudioData
可能是一种更有效的方法,但我会将其保留为{{1}}为你锻炼。