如何加密HTML5网络存储？

Question

Is mcrypt or cryptojs better?

Can anyone give me an example how I can encrypt web storage with HML5?

HTML:

<div id="Data Personal">
    <h1>Silakan Masukkan Data</h1>
    <div>Nama = <span id="nama" contenteditable="true" onkeyup="storeMyContact(this.id)"></span></div>
    <div>telepon =  <span id="Telepon" contenteditable="true" onkeyup="storeMyContact(this.id)"></span></div>
    <div>Email =  <span id="email" contenteditable="true" onkeyup="storeMyContact(this.id)"></span></div>
    <div>Kartu kredit =  <span id="cc" contenteditable="true"onkeyup="storeMyContact(this.id)"></span></div>
</div>

JavaScript:

function storeMyContact(id) {
    var nama = document.getElementById('nama').innerHTML;
    var Telepon = document.getElementById('Telepon').innerHTML;
    var email = document.getElementById('email').innerHTML;
    var cc = document.getElementById('cc').innerHTML;
    localStorage.setItem('datnama', nama);
    localStorage.setItem('dattlp', Telepon);
    localStorage.setItem('datemail', email);
    localStorage.setItem('datcc', cc);
}

Answer 1

In addition to my comment up there.. it wouldn't have any difference storing regular or encrypted data.. since local storage only accepts text then if you're storing JSON for example it needs to be stringified first.. so before storing you stringify -> then encrypt -> then store.. and on retrieve you retrieve -> then decrypt -> then parse.

I've used CryptoJS once and that was for Hash calculation where I used to send the hashing salt via SMS.. and it was really working good.

An example for encryption/decryption using for example AES is:

<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/aes.js">
</script>
<script>
    var encrypted = CryptoJS.AES.encrypt("Message", "Secret Passphrase");

    var decrypted = CryptoJS.AES.decrypt(encrypted, "Secret Passphrase");
</script>

The howto here is straightforward and easy to follow

Demo Link : Look for the Console

Answer 2

You must use server side encryption like Mcrypt if using PHP and then encode it with Base64.

var nama = '<?php echo $base64EncryptedValue; ?>';
localStorage.setItem('datnama', nama);