NegativeMjark/encryption.html

## encryption.html
<html>
<head>
<script>

function readFile(file, callback) {
    var reader = new FileReader();
    reader.addEventListener("load", function() {
        callback(this.result);
    });
    reader.readAsArrayBuffer(file);
}

function encrypt(data) {
    var key, exportedKey, iv;
    return window.crypto.subtle.generateKey(
        {name: "AES-GCM", length: 256}, true, ["encrypt", "decrypt"]
    ).then(function(result) {
        key = result;
        return window.crypto.subtle.exportKey("jwk", key);
    }).then(function(result) {
        exportedKey = result
        iv = window.crypto.getRandomValues(new Uint8Array(16))
        return window.crypto.subtle.encrypt(
            {name: "AES-GCM", iv: iv}, key, data
        );
    }).then(function(result) {
        return {
            key: exportedKey,
            data: result,
            iv: iv,
        };
    });
}

function decrypt(exportedkey, data, iv) {
    return window.crypto.subtle.importKey(
        "jwk", exportedkey, {"name": "AES-GCM"}, false, ["encrypt", "decrypt"]
    ).then(function(key) {
        return window.crypto.subtle.decrypt(
            {name:"AES-GCM", iv: iv}, key, data
        );
    });
}

function displayImage(image, data) {
    var blob = new Blob([data]);
    image.src = window.URL.createObjectURL(blob);
    image.onload = function() {
        window.URL.revokeObjectURL(this.src);
    };
}

document.addEventListener("DOMContentLoaded", function (event) {
    var file_chooser = document.getElementById("file_chooser");
    var file_count = document.getElementById("file_count");
    var file_name = document.getElementById("file_name");
    var file_size = document.getElementById("file_size");
    var file_type = document.getElementById("file_type");
    var image = document.getElementById("image");

    file_chooser.addEventListener("change", function() {
        var fileList = this.files;

        file_count.textContent = "" + fileList.length;
        if (fileList.length) {
            file_name.textContent = fileList[0].name;
            file_size.textContent = fileList[0].size;
            file_type.textContent = fileList[0].type;

            readFile(fileList[0], function(data) {
                encrypt(data).then(function(result) {
                    return decrypt(result.key, result.data, result.iv);
                }).then(function(data) {
                    displayImage(image, data);
                });
            });
        }
    });
});
</script>
</head>
<body>
<input id="file_chooser" type="file"></input>
<dl>
    <dt>Count</dt><dd id="file_count"></dd>
    <dt>Name</dt><dd id="file_name"></dd>
    <dt>Size</dt><dd id="file_size"></dd>
    <dt>Type</dt><dd id="file_type"></dd>
</dl>
<hr></hr>
<img id="image"></img>
</body>
</html>
	<html>
	<head>
	<script>

	function readFile(file, callback) {
	var reader = new FileReader();
	reader.addEventListener("load", function() {
	callback(this.result);
	});
	reader.readAsArrayBuffer(file);
	}

	function encrypt(data) {
	var key, exportedKey, iv;
	return window.crypto.subtle.generateKey(
	{name: "AES-GCM", length: 256}, true, ["encrypt", "decrypt"]
	).then(function(result) {
	key = result;
	return window.crypto.subtle.exportKey("jwk", key);
	}).then(function(result) {
	exportedKey = result
	iv = window.crypto.getRandomValues(new Uint8Array(16))
	return window.crypto.subtle.encrypt(
	{name: "AES-GCM", iv: iv}, key, data
	);
	}).then(function(result) {
	return {
	key: exportedKey,
	data: result,
	iv: iv,
	};
	});
	}

	function decrypt(exportedkey, data, iv) {
	return window.crypto.subtle.importKey(
	"jwk", exportedkey, {"name": "AES-GCM"}, false, ["encrypt", "decrypt"]
	).then(function(key) {
	return window.crypto.subtle.decrypt(
	{name:"AES-GCM", iv: iv}, key, data
	);
	});
	}

	function displayImage(image, data) {
	var blob = new Blob([data]);
	image.src = window.URL.createObjectURL(blob);
	image.onload = function() {
	window.URL.revokeObjectURL(this.src);
	};
	}

	document.addEventListener("DOMContentLoaded", function (event) {
	var file_chooser = document.getElementById("file_chooser");
	var file_count = document.getElementById("file_count");
	var file_name = document.getElementById("file_name");
	var file_size = document.getElementById("file_size");
	var file_type = document.getElementById("file_type");
	var image = document.getElementById("image");

	file_chooser.addEventListener("change", function() {
	var fileList = this.files;

	file_count.textContent = "" + fileList.length;
	if (fileList.length) {
	file_name.textContent = fileList[0].name;
	file_size.textContent = fileList[0].size;
	file_type.textContent = fileList[0].type;

	readFile(fileList[0], function(data) {
	encrypt(data).then(function(result) {
	return decrypt(result.key, result.data, result.iv);
	}).then(function(data) {
	displayImage(image, data);
	});
	});
	}
	});
	});
	</script>
	</head>
	<body>
	<input id="file_chooser" type="file"></input>
	<dl>
	<dt>Count</dt><dd id="file_count"></dd>
	<dt>Name</dt><dd id="file_name"></dd>
	<dt>Size</dt><dd id="file_size"></dd>
	<dt>Type</dt><dd id="file_type"></dd>
	</dl>
	<hr></hr>
	<img id="image"></img>
	</body>
	</html>