Generating simmetric key, encrypt and decript "hello" with webcrypto and tweetnacl-js.

nacl.html

<script src="nacl-fast.js"></script>
<script>

function bytesToBase64(bytes) {
  let binary = "";
  let len = bytes.byteLength;
  for (let i = 0; i < len; i++) {
    binary += String.fromCharCode(bytes[i]);
  }
  return window.btoa(binary);
}

function base64ToBytes(base64) {
  let binary_string =  window.atob(base64);
  let len = binary_string.length;
  let bytes = new Uint8Array(len);
  for (var i = 0; i < len; i++) {
    bytes[i] = binary_string.charCodeAt(i);
  }
  return bytes;
}

function genKey() {
  let key = nacl.randomBytes(nacl.secretbox.keyLength);
  return bytesToBase64(key);
}

function encrypt(key, msg) {
  key = base64ToBytes(key);
  let nonce = nacl.randomBytes(nacl.secretbox.nonceLength);
  let message = new TextEncoder("utf-8").encode(msg);
  let box = nacl.secretbox(message, nonce, key);
  return bytesToBase64(nonce)+"$"+bytesToBase64(box);
}

function decrypt(key, msg) {
  key = base64ToBytes(key);
  msg = msg.split("$");
  let nonce = base64ToBytes(msg[0]);
  let box = base64ToBytes(msg[1]);
  let m = nacl.secretbox.open(box, nonce, key);
  return new TextDecoder("utf-8").decode(m);
}

if (!location.hash) {
  key = genKey();
  location.hash = key;
} else {
  key = location.hash.substr(1);
}

let c = encrypt(key, "hello");
let m = decrypt(key, c);
console.log(key);
console.log(c);
console.log(m);

</script>

webcrypto.html

<script>
let alg = {name: "AES-GCM", length: 256};
let keyUsages = ["encrypt", "decrypt"];

function bufferToBase64(buffer) {
  let bytes = new Uint8Array(buffer);
  let binary = "";
  let len = bytes.byteLength;
  for (let i = 0; i < len; i++) {
    binary += String.fromCharCode(bytes[i]);
  }
  return window.btoa(binary);
}

function base64ToBuffer(base64) {
  let binary_string =  window.atob(base64);
  let len = binary_string.length;
  let bytes = new Uint8Array(len);
  for (var i = 0; i < len; i++) {
    bytes[i] = binary_string.charCodeAt(i);
  }
  return bytes.buffer;
}

let generateKey = () => {
  return window.crypto.subtle.generateKey(alg, true, keyUsages).then(key => {
    return window.crypto.subtle.exportKey("jwk", key)
  })
  .then(function(keydata) {
      return keydata.k;
  });
};

let getCryptoKey = (key) => {
  let keydata = {
      kty: "oct",
      k: key,
      alg: "A256GCM",
      ext: true,
  };
  return window.crypto.subtle.importKey("jwk", keydata, alg, false, keyUsages);
}

let encrypt = (key, msg, additionalData) => {
  let data = new TextEncoder('utf8').encode(msg);
  //Don't re-use initialization vectors!
  //Always generate a new iv every time your encrypt!
  //Recommended to use 12 bytes length
  let params = {
    name: "AES-GCM",
    iv: window.crypto.getRandomValues(new Uint8Array(12)),
    additionalData: new TextEncoder('utf-8').encode(additionalData)
  };
  return window.crypto.subtle.encrypt(params, key, data).then(buffer => {
    return bufferToBase64(params.iv) + "$" + bufferToBase64(buffer) + "$" +
    bufferToBase64(params.additionalData);
  });
};

let decrypt = (key, msg) => {
  msg = msg.split("$");
  console.log(msg)
  let iv = base64ToBuffer(msg[0]);
  let data = base64ToBuffer(msg[1]);
  let additionalData = base64ToBuffer(msg[2]);
  let params = {
    name: "AES-GCM",
    iv,
    additionalData,
  };
  return window.crypto.subtle.decrypt(params, key, data).then(buffer => {
    return new TextDecoder("utf8").decode(buffer);
  });
};

if (!location.hash) {
  generateKey().then((key) => {
    location.hash = key;
  });
}
let key = location.hash.substr(1);

getCryptoKey(key).then(key => {
  return encrypt(key, "hello").then(ciphertext => {
    console.log(ciphertext);
    return decrypt(key, ciphertext);
  });
}).then(console.log);

</script>