Encrypting locally stored data with JavaScript

Question

While I'm learning JavaScript and HTML5, I am trying to build a basic quiz app that asks some multi-choice questions that will work on the mobile web, and also as an app using PhoneGap. As questions get asked, the results get stored locally.

I want the PhoneGap version to allow offline mode, so the ability for data to be stored locally is a must. I know there is a local DB offered through PhoneGap - so I guess one option is to do it client/server for Mobile Web and local DB with PhoneGap. However, I'd rather avoid going down that route for now, as that would mean I'd have to manage more variations between the mobile web and PhoneGap versions.

Obviously don't need internet bank level security, but I need the results to be stored locally that aren't able to be easily read, but most importantly manipulated.

I initially tried using HTML5 localstorage, but I quickly realised that at least the way I was doing it, I could visibly see all the results I was storing and through the use of Chrome Developer Tools, could easily just click to change values.

When I go down the path of using encryption (I was reading this StackOverflow post with interest), it appears that for something like this this I always have to define a 'key' somewhere in the code in order to encrypt the data and then use the same key to decrypt it.

Since all of the data is stored client side, it means all I would ever have to do is find this key and run it against the stored data to manipulate results.

What threat are you trying to mitigate exactly? Off hand I can't think of anything that this would mitigate other than casual inspection by a non-techie. I'd love to be proven wrong though. — Eric Fleischman
– Eric Fleischman, Commented Nov 21, 2012 at 16:07
This exercise is really about me learning how to build HTML5/JS mobile web apps, and not so much about something that I'd put in the app store. I guess I have some vague idea though about eventually allowing scores to be synced online, possibly in a leaderboard fashion against other players. I'd like to still offer an offline option for the game though, hence the reason for offline storage. I understand there is no way somebody would be using the mobile web in an offline scenario, however they could be using the app, and I'd prefer not to build each version fundamentally two different ways. — fakeguybrushthreepwood
– fakeguybrushthreepwood, Commented Nov 22, 2012 at 1:09
And the fact that people can just go in and change their scores in a browser through editing webstorage doesn't seem like a good strategy. To make it clear - they can view their 'score card' stored in webstorage and manipulate the values. Even if it is using some form of encryption I've found - they could still follow the piece of string and manipulate it. — fakeguybrushthreepwood
– fakeguybrushthreepwood, Commented Nov 22, 2012 at 1:10
That's correct. It's hard to imagine any scheme that doesn't suffer from this when all of the logic is client side. — Eric Fleischman
– Eric Fleischman, Commented Nov 22, 2012 at 2:28
Thanks for your feedback Eric, as a student of HTML5/JS this has been a great learning experience of the limitations of client-side storage! — fakeguybrushthreepwood
– fakeguybrushthreepwood, Commented Nov 22, 2012 at 3:39

Community · Accepted Answer · 2017-05-23 12:06:49Z

1

CryptoJS AES. Thanks to Leigh

var text = "#rawString#";
var key = CryptoJS.enc.Base64.parse("#base64Key#");
var iv  = CryptoJS.enc.Base64.parse("#base64IV#");

console.log("Initial String:: "+text);

var encrypted = CryptoJS.AES.encrypt(text, key, {iv: iv});
console.log("Encrypted String:: "+encrypted.toString());

var decrypted = CryptoJS.AES.decrypt(encrypted, key, {iv: iv});
console.log("Decrypted String:: "+decrypted.toString(CryptoJS.enc.Utf8));

Plnkr Demo Link

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered Nov 8, 2016 at 3:55

Abhijeet

8,7715 gold badges73 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 11:48:44Z

-2

Would base64 encoding work? It's built-in to the browser and it looks encrypted. People do this all the time for cookies.

Resources (Mozilla specific):

btoa
atob

See this question for more info and links for non-Mozilla browsers: JSON encode/decode base64 encode/decode in JavaScript

edited May 23, 2017 at 11:48

CommunityBot

11 silver badge

answered Nov 21, 2012 at 6:48

beatgammit

20.3k20 gold badges91 silver badges131 bronze badges

3 Comments

fakeguybrushthreepwood Over a year ago

Thanks for the comment, but just by looking at it couldn't somebody just guess that it is base64 encrypted, and then easily decrypt it?

beatgammit Over a year ago

It keeps honest people honest, and you'd need to base64 encode binary data anyway for localStorage, since it only supports string data. You did say you didn't need bank level security, right?

ZachB Over a year ago

base64 is not encryption, it provides zero security.

Collectives™ on Stack Overflow

Encrypting locally stored data with JavaScript

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related