Protecting Browser Side User Data in JavaScript using Cryptography with secStore.js - secStore.js package blog

Recommend this page to a friend!
  All package blogs All package blogs   secStore.js secStore.js   Blog secStore.js package blog   RSS 1.0 feed RSS 2.0 feed   Blog Protecting Browser Si...  
  Post a comment Post a comment   See comments See comments (1)   Trackbacks (0)  


Package: secStore.js

The security of Web applications should include the protection of data that is stored on the browser side, being that in cookies or local storage.

Read this article to go through a brief introduction to using secStore.js library when you need to secure essential data, such as authentication tokens or personally identifiable information needs to be stored within the user browser.

Loaded Article

Introduction to secStore.js

Are you one that reads news articles like this and shudders, or see tools like megaPWN and asks questions like: Am I doing it right? Am I protecting my users?

I know I do, and have developed a project to assist in protecting sensitive client data. A prime example of which would be the use of a cryptographically signed authentication token.

Two examples arise showing this need:

1) A XSS flaw in the browser allowing a malicious user the ability to bypass the same-origin restrictions

2) The even easier attack of targeted emails containing an XSS laden link as part of a phishing or whaling party.

Because security should be approached in a layered model such as first configuring the use of an SSL connection with a valid signed certificate from a reputable certificate authority.

When presenting any of your users with a form which requests information regarding their name, email or any other personally identifiable information you should always use (at the very least) a secure communications method, which is what an SSL/TLS connection does.

Now that you have enveloped your websites with a secure communications channel next you should ensure that all areas of your code accommodates for additional flaws such as cross site request forgery, cross site scripting, cross site history manipulation, etc etc.

As a developer, from a purely ethical standpoint, you should be addressing these on each and every web site, application or piece of code you publish.

I hope I am not making you feel overwhelmed with things you may have never considered as part of your development process (you are not alone).

Keep in mind that when you visit your banking website, or your email Web site, or a social networking Web site, you also expect that their code is protecting your personal information, right?

With that being said accounting for these attack vectors should not be difficult as the majority all boil down to input validation and output formatting.

Adhering to these two fundamentally important tasks will eliminate the majority of your SQL Injection (when using a database backend), XSS, XSRF and other same origin bypassing vulnerabilities.

Because I am fully aware of these vectors and the inherent problems plaguing today’s Web applications I built a small library to help address securing data "at rest" within the browser.

If you currently working with personally identifiable information for your users and want to provide better protections go ahead and implement secStore.js.

Example of Usage of secStore.js

In these examples I will be using the AES feature providing transparent encryption and decryption, so we must include the Stanford Javascript Crypto Libraries first. If you are using git the easiest method of installation is like so...

git clone --recursive

That will create a clone of the the secStore.js repo as well as install the SJCL libraries within the 3rd-party folder as a dependency.

Next we simply need to create a new document and include the secStore.js file by embedding it into the head of our HTML document. Here is an example:

<script src="path/to/secStore.js"></script>
Easy enough, right? Now we simply need to start saving and retrieving data.

This first example details how to save data transparently encrypting it using AES with the debug flag turned on while capturing the results of our operation and writing it to our document.

<script><!-- $(window).secStore({   aes: true,   debug: true,   data: {foo: 'bar', ping: 'pong'},   callback: function(results){     document.write(results);   } }); // --></script>

Pretty simply right? At this point you have a cipher text version of the object we specified with the 'data' parameter shown in the example above.

Because in that example we enabled the 'debug' option if you open up your browsers console you can see verbose logging information regarding the operation.

Now that we have given an example of saving data lets now get that data back into plain text from the stored cipher text and print it to the screen.

<script> $(window).secStore({   aes: true,   debug: true,   callback: function(results){     document.write( JSON.stringify( results));   } }); </script>

There you have it, your screen should now show the object in string format like so...

{foo: 'bar', ping: 'pong'}

There are many more options available for this plugin that I suggest you read up on if you decide this is a plugin you wish to implement in your next development project.

Happy coding!

You need to be a registered user or login to post a comment

25,349 JavaScript developers registered to the JS Classes site.
Be One of Us!

Login Immediately with your account on:



1. agen bola - Elizabeth Cindy (2016-09-26 09:42)
agen bola... - 0 replies
Read the whole comment and replies

  Post a comment Post a comment   See comments See comments (1)   Trackbacks (0)  
  All package blogs All package blogs   secStore.js secStore.js   Blog secStore.js package blog   RSS 1.0 feed RSS 2.0 feed   Blog Protecting Browser Si...