AES-file.html

<style> .Broken_IE11{ display:none; }</style>

<div class="d-flex flex-row flex-wrap justify-content-center">
<div class="container Broken_IE11">
  <div class="col-sm Broken_IE11">&nbsp;</div>
  <div class="col-md Broken_IE11">
    <h4 style="text-align: center; width: 100%;">I'm sorry, but Internet Explorer/Edge doesn't support the <a href="https://www.w3.org/TR/WebCryptoAPI/">WebCrypto API.</a>
    </h4>
  <div class="col-sm Broken_IE11">&nbsp;</div>
</div>
<div id="AES_Encrypt" class="playtile">
  <div class="tile_title text-center">AES Encrypt File</div>
  <div>
    AES Passphrase: <input id="encrypt_pass" class="key" type="password" size=35
  value="Password" onchange="measurekey(this)">
  <input id="show_encrypt_pass" type="checkbox" onclick="togglePW(getElementById('encrypt_pass'))"><br>
AES Mode: <select id="encrypt_mode" size="1">
  <option>Webcrypto-GCM</option>
</select>
    <div id="holder" class="d-flex justify-content-center">
    <div id="busy" class="loader" style="display:none;"></div>
    <div id="hasher_tip" style="display:block;">Drop a file here to encrypt.</div>
  </div>
<!-- The button used to copy the text -->
<a href="#" class="button" onclick="get_ciphertext()">Copy</a>
  <div class="row">
    <div class="col-2">file:</div> 
    <div class="col" id="filename">none</div>
  </div >
  <div class="row">
    <div class="col-2">mime: </div>
    <div class="col" id="mimetype">none</div>
  </div >
  <div class="row">
    <div class="col-2">size: </div>
    <div class="col" id="filesize">0</div> 
    <div class="col-2"> bytes </div>
  </div >

  </div>
  
  
    <div>Plaintext:</div> 
        <div class="hash" id="encrypt_plaintext" style="overflow-y: scroll; max-height: 200px;"></div>
  <div>
    <div>sha256: </div>
    <div class="hash" id="sha256sum"></div>
  </div>    
<div>Ciphertext:</div> 
        <div class="hash" id="encrypt_port" style="overflow-y: scroll; max-height: 200px;"></div>




</div>
  
<div id="AES_Decrypt" class="playtile">
  <div class="tile_title text-center">AES Decrypt File</div>
  <div>
    AES Passphrase: <input id="decrypt_pass" class="key" type="password" size=35
  value="Password" onchange="measurekey(this)">
  <input id="show_decrypt_pass" type="checkbox" onclick="togglePW(getElementById('decrypt_pass'))"><br>
AES Mode: <select id="decrypt_mode" size="1">
  <option>Webcrypto-GCM</option>
</select>
<a class="button" id="decrypt" href="#" onclick="aes_decrypt(getElementById('decrypt_pass'),
                                  getElementById('decrypt_port'),
                                  getElementById('decrypt_plaintext'),
                                  getElementById('decrypt_mode'))">
      Decrypt
    </a>
<a class="button" id="download" download="" href="#"> Download</a><br>
    Ciphertext:<textarea class="hash" id="decrypt_port" style="overflow-y: scroll; height: 200px;"></textarea>

  </div>
 
      <div class="col"></div>

    
    <div>Plaintext:</div>
    <div class="hash" id="decrypt_plaintext" style="overflow-y: scroll; height: 200px;"></div>
    <div>
    <div>sha256: </div>
    <div class="hash" id="decrypt_sha256sum"></div>
    
  </div>
</div>
</div>



  <script type="application/javascript">
function togglePW(x) {
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }
}

function get_ciphertext(){
  var source = document.getElementById('encrypt_port');
  var range = document.createRange();
  range.selectNodeContents(source);
  window.getSelection().addRange(range);
  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }
}

function hex_to_ascii(hex){
	var str = '';
    var remainder = 0;
    var minprint = 33;
    var maxprint = 126;
    var printlen = maxprint - minprint;
	for (var n = 0; n < hex.length; n += 2) {
        var code = (remainder + parseInt(hex.substr(n, 2), 16)) % printlen + minprint;
        remainder = code - minprint;
        // console.log(code);
        var this_char = String.fromCharCode(code);
        // console.log(this_char);
		str += this_char;
	}
	return str;
}

function arrayBufferToBase64(ab){
    var dView = new Uint8Array(ab);   //Get a byte view        
    var arr = Array.prototype.slice.call(dView); //Create a normal array        
    var arr1 = arr.map(function(item){        
      return String.fromCharCode(item);    //Convert
    });
    return window.btoa(arr1.join(''));   //Form a string
}

function arrayBufferToHexString(buffer) {
  const byteArray = new Uint8Array(buffer);
  const hexCodes = [...byteArray].map(value => {
    const hexCode = value.toString(16);
    const paddedHexCode = hexCode.padStart(2, '0');
    return paddedHexCode;
  });
  return hexCodes.join('');
}

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

function base64ToArray(b64encoded){ 
  return new Uint8Array(atob(b64encoded).split("").map(function(c) {
    return c.charCodeAt(0); }));
}

function measurekey(keyinput){
  var length = keyinput.value.length;
  if (length != 64 && length != 48 && length != 32) {
    keyinput.style.color = "red";
  }
  else {
    keyinput.style.color = "inherit";
  }
}

function get_mode(mode){
      switch(mode) {
      case "Webcrypto-GCM":
	    return "Webcrypto-GCM";
	  default:
    	return "Webcrypto-GCM";
	  }
    }

async function getKeyMaterial(epass) {
  let password = epass;
  let enc = new TextEncoder();
  return window.crypto.subtle.importKey(
    "raw",
    enc.encode(password),
    {name: "PBKDF2"},
    false,
    ["deriveBits", "deriveKey"]
  );
}

async function encrypt(password, plaintext, salt, iv) {
  let keyMaterial = await getKeyMaterial(password);
  let key = await window.crypto.subtle.deriveKey(
    {
      "name": "PBKDF2",
      salt: salt,
      "iterations": 100000,
      "hash": "SHA-256"
    },
    keyMaterial,
    { "name": "AES-GCM", "length": 256},
    true,
    [ "encrypt", "decrypt" ]
  );
  return window.crypto.subtle.encrypt(
    {
      name: "AES-GCM",
      iv: iv
    },
    key,
    plaintext
  );
}

async function decrypt(password, ciphertext, salt, iv) {
    let keyMaterial = await getKeyMaterial(password);
    let key = await window.crypto.subtle.deriveKey(
    {
      "name": "PBKDF2",
      salt: salt,
      "iterations": 100000,
      "hash": "SHA-256"
    },
    keyMaterial,
    { "name": "AES-GCM", "length": 256},
    true,
    [ "encrypt", "decrypt" ]
  );
  try {
      let decrypted = await window.crypto.subtle.decrypt(
        {
          name: "AES-GCM",
          iv: iv
        },
        key,
        ciphertext
      );
    return decrypted;
    } catch (e) {
      alert("*** Decryption error ***");
    }
  }

async function aes_decrypt(pass,port,PT,mode){
      var dec = port.value;
      let salt = await base64ToArray(dec.slice(0,24));
      let iv = await base64ToArray(dec.slice(25,41));
      let ciphertext = await base64ToArrayBuffer(dec.slice(42));
      var epass = pass.value;
      var emode = get_mode(mode.value);
      let dec_buffer = await decrypt(epass, ciphertext, salt, iv);
      let sha256 = await window.crypto.subtle.digest('SHA-256', dec_buffer);
      document.getElementById('decrypt_sha256sum').innerHTML = await arrayBufferToHexString(sha256);
      let decrypted = atob(arrayBufferToBase64(dec_buffer));
      PT.innerHTML = decrypted;
      var filename = decrypted.split(',')[0].split(':')[1];
      var data = decrypted.split(',')[1] + "," + decrypted.split(',')[2];
      document.getElementById('download').download=filename;
      document.getElementById('download').href=data;
      
    }

var randomString = async function(length) {
    var text = "";
    var possible = "abcdef0123456789";
    for(var i = 0; i < length; i++) {
        text += possible.charAt(Math.floor(Math.random() * possible.length));
    }
    const encoder = new TextEncoder();
    const data = encoder.encode(text);
    let sha512buffer = await crypto.subtle.digest('SHA-512', data);
    var sha512 = arrayBufferToHexString(sha512buffer).substring(7, (length+7));
    return sha512;
    }

var randomBuffer = async function() {
    var text = "";
    var possible = "abcdef0123456789";
    var rlength = 4096;
    for(var i = 0; i < rlength; i++) {
        text += possible.charAt(Math.floor(Math.random() * possible.length));
    }
    
    var req = new XMLHttpRequest();
    req.open('GET', document.location, false);
    req.send(null);
	var headers = req.getAllResponseHeaders();
    text += headers;
    var d = new Date();
    var n = d.getTime().toString();
    text += n;
    
    const encoder = new TextEncoder();
    const data = encoder.encode(text);
    let sha512buffer = await crypto.subtle.digest('SHA-512', data);
    return sha512buffer;
}

var holder = document.getElementById('holder');
holder.ondragover = function() {
  return false;
};

holder.ondragend = function() {
  return false;
};

holder.ondrop = function(event) {
    //AES Encrypt dropped file
    event.preventDefault();

    var file = event.dataTransfer.files[0];

    document.getElementById('busy').style = "display:block;"
    document.getElementById('hasher_tip').style = "display:none;"
    document.getElementById('filename').innerHTML = file.name;
    document.getElementById('mimetype').innerHTML = file.type;
    document.getElementById('filesize').innerHTML = file.size;
    document.getElementById('encrypt_plaintext').innerHTML = "";  
    document.getElementById('sha256sum').innerHTML = "0000000000000000000000000000000000000000000000000000000000000000";
  
    var reader = new FileReader();

    reader.onload = async function(event) {
      var plaintext = "file:"+file.name+","+event.target.result;  
      
      console.log(file.name);
      console.log(file.type);
      console.log(file.size);

      document.getElementById('encrypt_plaintext').innerHTML = plaintext;
      document.getElementById('busy').style = "display:none;"
      document.getElementById('hasher_tip').style = "display:block;"

      var epass = document.getElementById('encrypt_pass').value;
      var emode = get_mode(document.getElementById('encrypt_mode').value);
      console.log("Webcrypto GCM");
      
      let salt = window.crypto.getRandomValues(new Uint8Array(16));
      let iv = window.crypto.getRandomValues(new Uint8Array(12));
      let enc = new TextEncoder();
      let encoded_plaintext = await enc.encode(plaintext);
      let sha256 = await window.crypto.subtle.digest('SHA-256', encoded_plaintext);
      document.getElementById('sha256sum').innerHTML = await arrayBufferToHexString(sha256);
      let ciphertext = await encrypt(epass, encoded_plaintext, salt, iv);
      var ctstring = arrayBufferToBase64(salt)+"<br>"+
          arrayBufferToBase64(iv)+"<br>"+
          arrayBufferToBase64(ciphertext);
      document.getElementById('encrypt_port').innerHTML = ctstring;

    };
    reader.readAsDataURL(file);
};
      
    $(document).ready(async function(){
      let mybuf = await randomBuffer();
      let sha512 = await arrayBufferToHexString(mybuf);
      //alert(pass);
      var pass = hex_to_ascii(sha512);
      var pass_pass = pass + pass;
      
      start_index = Math.floor(Math.random() * pass.length);
      var string20 = pass_pass.substring(start_index, (start_index+20));
      
      document.getElementById('encrypt_pass').value = string20;
      document.getElementById('decrypt_pass').value = string20;
      
    })
  </script>

<style type="text/css">
  .tile_title { margin-bottom:8px; line-height: 2em; font-size: 1.25rem; 
    box-shadow: inset 0 0 5px rgba(0,0,0,0.15);}
  .thumb { height: 75px; border: 1px solid #000; margin: 10px 5px 0 0; }
  input, button { margin: 5px; }
  button { width: 100px; }
  .playtile { padding: .5rem!important; 
    box-shadow: inset 0 0 5px rgba(0,0,0,0.15);  border: 1px solid #ccc; 
    padding:5px; margin:5px; width:40em; min-width:25em; min-height:28em; }
  #holder { border: 10px dashed #ccc;  height: 5em; padding: 10px; }
  #holder.hover { border: 10px dashed #333; }
  .hash {overflow-wrap: break-word; box-shadow: inset 0 0 5px rgba(155,0,0,0.15); padding-left:5px;}
  #byte_content { margin: 5px 0; max-height: 100px; overflow-y: auto; overflow-x: hidden; }
  #byte_range { margin-top: 5px; }
  .loader {
    border: 0.5em solid #f3f3f3;
  	border-radius: 50%;
  	border-top: 0.5em solid #3498db;
  	width: 2.75em;
  	height: 2.75em;
  	-webkit-animation: spin 2s linear infinite; /* Safari */
  	animation: spin 2s linear infinite;  }
    
    /* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); } }

@keyframes spin { 
  0% { transform: rotate(0deg); } 
  100% { transform: rotate(360deg); } }

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   /* IE10+ specific styles go here */
  .playtile{filter: alpha(opacity=25);
    zoom: 1;  /* Fix for IE7 */ 
     display:none;}
  .Broken_IE11{ display:inline-block; }
}

</style>