diafygi / webcrypto-examples

Web Cryptography API Examples Demo: https://diafygi.github.io/webcrypto-examples/
GNU General Public License v2.0
1.65k stars 194 forks source link

Encrypt / Decrypt a string? #8

Closed coolaj86 closed 9 years ago

coolaj86 commented 9 years ago

I'm working on an example of my own, but I'm having some trouble. (my example: http://coolaj86.github.io/web-crypto-utahjs-preso)

I found a bit of code to convert back and forth between utf8 and TypedArrays and that seems to be working just fine. (unibable: https://github.com/coolaj86/unibabel-js)

However, the "encrypted" buffer isn't the length I would expect and it can't be decrypted.

I think I'm missing something. To you see anything out of order here?

'use strict';

var webcrypto = window.crypto || window.msCrypto || window.webkitCrypto || window.mozCrypto;

var keyStr = 'VzC2coGPrvecrigzB38DRLGiwVrgiwnQznyrD9BYxAk=';
var keyBuf = window.Unibabel.base64ToArr(keyStr);
var message = "this is a secret message";
var ivLen = (128 / 8);
var iv = new Uint8Array(ivLen); // defaults to zero
var arrb = window.Unibabel.strToUtf8Arr(message);
var data = arrb.buffer;
console.log('message as buffer', arrb.length);
console.log(arrb);

console.log('keyBuf', keyBuf.length);
console.log(keyBuf);

webcrypto.subtle.importKey(
    "raw",
    keyBuf,
    { name: "AES-CBC" },
    true,
    ["encrypt", "decrypt"]
)
.then(function(key){
    //returns the symmetric key
    console.log('key', key);

    return window.crypto.subtle.encrypt(
        { name: "AES-CBC", iv: iv },
        key, //from generateKey or importKey above
        data //ArrayBuffer of data you want to encrypt
    ).then(function(encrypted){
      //returns an ArrayBuffer containing the encrypted data
      // TODO base64
      //console.log(new Uint8Array(encrypted));
      console.log('encrypted');
      console.log(new Uint8Array(encrypted));
      console.log(new Uint8Array(encrypted).length);

      console.log('encrypted', window.Unibabel.arrToBase64(new Uint8Array(encrypted)));

      window.crypto.subtle.decrypt(
          { name: "AES-CBC", iv: iv },
          key, //from generateKey or importKey above
          data //ArrayBuffer of data you want to encrypt
      )
      .then(function(decrypted){
          //returns an ArrayBuffer containing the encrypted data
          console.log(new Uint8Array(encrypted));
          console.log('decrypted', window.Unibabel.arrToBase64(new Uint8Array(decrypted)));
      })

       // error handling

      .catch(function(err){
          console.error(err);
      });
    })
    .catch(function(err){
        console.error(err);
    });
})
.catch(function(err){
    console.error(err);
});
coolaj86 commented 9 years ago

Fixed it... oh those 3ams....

'use strict';

var webcrypto = window.crypto || window.msCrypto || window.webkitCrypto || window.mozCrypto;

var keyStr = 'VzC2coGPrvecrigzB38DRLGiwVrgiwnQznyrD9BYxAk=';
var keyBuf = window.Unibabel.base64ToArr(keyStr);
var message = "this is a secret message";
var ivLen = (128 / 8);
var iv = new Uint8Array(ivLen); // defaults to zero
var arrb = window.Unibabel.strToUtf8Arr(message);
var data = arrb.buffer;
console.log('message as buffer', arrb.length);
console.log(arrb);

console.log('keyBuf', keyBuf.length);
console.log(keyBuf);

webcrypto.subtle.importKey(
    "raw",
    keyBuf,
    { name: "AES-CBC" },
    true,
    ["encrypt", "decrypt"]
)
.then(function(key){
    //returns the symmetric key
    console.log('key', key);
    var algo = key.algorithm;
    algo.iv = iv;

    return window.crypto.subtle.encrypt(
        algo,
        key, //from generateKey or importKey above
        data //ArrayBuffer of data you want to encrypt
    ).then(function(encrypted){
      //returns an ArrayBuffer containing the encrypted data
      // TODO base64
      //console.log(new Uint8Array(encrypted));
      console.log('encrypted');
      console.log(new Uint8Array(encrypted));
      console.log(new Uint8Array(encrypted).length);

      console.log('encrypted', window.Unibabel.arrToBase64(new Uint8Array(encrypted)));

      window.crypto.subtle.decrypt(
          algo,
          key, //from generateKey or importKey above
          encrypted //ArrayBuffer of data you want to encrypt
      )
      .then(function(decrypted){
          //returns an ArrayBuffer containing the encrypted data
          console.log(new Uint8Array(encrypted));
          console.log('decrypted', window.Unibabel.utf8ArrToStr(new Uint8Array(decrypted)));
      })

       // error handling

      .catch(function(err){
          console.error(err);
      });
    })
    .catch(function(err){
        console.error(err);
    });
})
.catch(function(err){
    console.error(err);
});
memanoj commented 6 years ago

Uncaught TypeError: Cannot read property 'base64ToArr' of undefined i am facing this issue

Ruffio commented 6 years ago

@mnjsnj and you have remembered to download the unibabel? That lib isn't native...