How Secure Can Browser Storage Be?

×

Error message

Warning: filemtime(): stat failed for sites/all/themes/consilium/scss/header.scss in Superhero_scss->outputFile() (line 89 of /home/jbros/public_html/sites/all/themes/superhero/includes/superhero_scss.php).

We tend to believe that browser storage is not secure. Even with this thought in mind, there are particular use cases where local storage seems to be the only option, e.g., offline access in an application or in my case, a persistent state that exists beyond request/page scope.

Local storage has the advantage of staying client-side. Access to this storage, requires malicious JavaScript injection and/or access to the physical machine. If someone has physical access to a user's machine, they are open to far worse attacks than reading: keyloggers, offline script modification, local script injection, browser cache poisoning, and DNS redirects.

I have found that the worse problem with cryptography in general is, "If you need to ask question X, you probably don't know enough about cryptography to implement a secure system." This tends to be because to a layperson a system may seem secure, but trivial to a knowledgeable attacker.

JavaScript Encryption - Better Than Plain Text

Some of the inherent weaknesses of current JavaScript cryptography libraries (Stanford Javascript Crypto Library) are:

  1. Lack of entropy / random number generation
  2. Lack of a secure keystore i.e. the private key must be password-protected if stored locally, or stored on the server (which bars offline access)
  3. Lack of secure-erase
  4. Lack of timing characteristics

Encrypting local storage probably only protects the data from attackers that access to the system or its backups. It helps address the OWASP Top 10 Item: A6-Sensitive Data Exposure. But this is only a limited defensive screen that allows you to answer "Is any of this data stored in clear text long term?" correctly.

The SJCL library provides a handful of customization features, but in its simplicity we can use an encrypt/decrypt method. Each time the encrypt method is called, a unique initialization vector and salt is created.

https://jsfiddle.net/uhqxg7ox/

The More Secure Future! W3C - Web Cryptography API

There is a candidate release for a cryptography api that address some of the weaknesses of the current browser based limitations. Web Crypto API

This isn't supported fully yet by all browsers yet, so I thought it worthwhile to investigate the solution but not use it for my implementation. I found a helpful GitHub repository with some information on the API: https://github.com/diafygi/webcrypto-examples

I picked AES-CTR to code an example for:

https://jsfiddle.net/rL7r78z6/

window.crypto = window.crypto || window.msCrypto; //for IE11
var AESCTR = {
  name: "AES-CTR",
  length: 256,
}
var testValue  = stringToArrayBuffer("test bytes");
function arrayBufferToString(buffer) {
  return String.fromCharCode.apply(nullnew Uint8Array(buffer));
}
function stringToArrayBuffer(inputString) {
  var buffer = new Uint8Array(new ArrayBuffer(inputString.length));
  for (var i = 0, strLength = inputString.length; i < strLength; i++) {
    buffer[i] = inputString.charCodeAt(i);
  }
  return buffer;
}
window.crypto.subtle.generateKey(AESCTR, false, ["encrypt""decrypt"])
  .then(function (key) {
    var counter = new Uint8Array(16);
    var length = 128;
    window.crypto.subtle.encrypt({
      name: "AES-CTR",
      counter: counter,
      length: length,
    }, key, testValue)
    .then(function (encrypted) {
      return window.crypto.subtle.decrypt({
        name: "AES-CTR",
        counter: counter,
        length: length,
      }, key, encrypted);
    })
    .then(function (a) {
      console.log(arrayBufferToString(a));
    })
}); 

How To Apply This To My Project?

Currently in my Helwoho project, I am working on creating a token based authentication system.

Right now I have some basic authentication through a login page and I want to return a token to the user that can be validated in subsequent calls. I want to store this token in local browser storage as an encrypted value.

I believe my next post will start to cover this token based system.

We tend to believe that browser storage is not secure. Even with this thought in mind, there are particular use cases where local storage seems to be the only option, e.g., offline access in an application or in my case, a persistent state that exists beyond request/page scope.

Add new comment

Full HTML

  • Shortcodes usage

  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA

Enter the characters shown in the image.

About Beall Brothers

Based in Ohio, Beall Brothers is a combined team from two artistic, creative men that have the combined skills to accomplish anything from graphic design to fully responsve website designs that are optimized to be found on the web because anything is possible, and we do not limit imagination or dreams, and we never ignoring any fine details.Logo for Devel Solutions for fully responsive website designs, programming, and enterprise solutionsLogo for D-zired Design where one can find fully responsive website designs and graphics

This Site Is SSL Secured

Get in touch

 Beall Brothers

 Josh: 330.749.7302

 Justin: 330.466.3028

 support@beallbros.com

Check Out Our Tutorials

It has taken us a long time to learn what we know, and this wealth of knowledge was acquired through the process of trial and error; however, this process takes too long. We offer free high resolution help tutorials to clients, so you can do it right the first time, and one can find many videos in our tutorials selection or on You Tube D-zired Tutorials Logo where one can learn Drupal 7.x and Adobe for responsive site designLearn to design and build gracefully responsive Drupal 7.x websites that include commerce and all the other functions found on BeallBros.com

Connect With Us

Engine Optimization

Figure out how to use new SEO technologies to make your new responsive site searchable and more easily found on major engines like Google, Bing, or Yahoo.

Sign up to our newsletter: