How can I encrypt HTML5 web storage?

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);
}

Since decryption keys will still be in the source code js files so what would be the benefit? Local storage shouldn't be used to store sensitive data at all.. — Mohammed R. El-Khoudary, Mar 07 '14 at 09:18
Like Mohammed said, you can encrypt it to make it harder to "steal" sensitive data, but as the encryption is done in client side code, it's not that safe. You could encrypt it on a server side service where the encryption (and salts) would be hidden from the user, but then you wouldn't really have the benefit of local storage... — Igor Zinken, Mar 07 '14 at 09:20
@MohammedR.El-Khoudary , thanks for the information. so can i use decryption with php ? — user3391755, Mar 07 '14 at 11:58
Yes I prefer server side encryption.. this way storing data in the client can be fine.. but you should use a powerful encryption algorithm and you should specify a specific period for key change.. — Mohammed R. El-Khoudary, Mar 07 '14 at 16:54

score 4 · Answer 1 · edited Nov 08 '16 at 06:04

4

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

edited Nov 08 '16 at 06:04

Abhijeet

8,561
5
70
76

answered Mar 07 '14 at 09:25

Mohammed R. El-Khoudary

1,203
7
18

Good thing it is "Secret Passphrase" in quotes ;-) – PeeHaa Mar 07 '14 at 09:30
The link is in the end of my answer.. and If you want anything specific to learn.. Please don't hesitate to ask here. – Mohammed R. El-Khoudary Mar 07 '14 at 16:52
1

You also have this library right now: https://github.com/brix/crypto-js – Soullivaneuh Aug 17 '16 at 14:20

score -3 · Answer 2 · answered Nov 19 '14 at 12:34

-3

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);

answered Nov 19 '14 at 12:34

Tormi Talv

217
1
8

How can I encrypt HTML5 web storage?

2 Answers2