5

I'm building a single-page AJAX application, and would like to under certain circumstances store state in JSON after the URL hash (#). I've seen a couple other sites do this, but I'm hoping to get some best practices, tips, or gotchas as I work to implement this.

DuckMaestro
  • 15,232
  • 11
  • 67
  • 85
  • Other sites seem to get by without base64 encoding, but I wonder if they've restricted themselves in some way or else compatibility or parsing issues. – DuckMaestro Mar 16 '11 at 01:11

2 Answers2

8

I would actually advise against encapsulating data into json and then putting it into the hash. The reason is that JSON itself needs a lot of markup and will actually open some security holes as you'll have to later eval code that comes directly from the user.

As a better alternative, I would advise using x-www-form-urlencoded as encapsulation. For example if this is your state object:

var stateObject = {
  userName: 'John Doe',
  age: 31
}

Then you would create a hash fragment like this:

// Create an array to build the output string.
var hashPartBuffer = [];
for (var k in stateObject) {
  hashPartBuffer.push(
    encodeURIComponent(k),
    '=',
    encodeURIComponent(stateObject[k]),
    '&'); 
}
if (hashPartBuffer.length) {
  // Remove the last element from the string buffer
  // which is '&'.
  hashPartBuffer.pop();
}
var hashPartString = hashPartBuffer.join('');
// This will now be 'userName=John%20Doe&age=31'

Then you will parse this back by:

var hashPartString = 'userName=John%20Doe&age=31';
var pairs = hashPartString.split(/&/);
var stateObject = {};
for (var i = 0; i < pairs.length; i++) {
  var keyValue = pairs.split(/=/);
  // Validate that this has the right structure.
  if (keyValue.length == 2) {
    stateObject[keyValue[0]] = keyValue[1];
  }
}
Sorin Mocanu
  • 936
  • 5
  • 11
  • Thanks for the answer. However, I'm using the popular json2.js library for old browsers, and the native JSON object on newer browsers. So just in terms of security, JSON is par for the course I believe. – DuckMaestro Mar 19 '11 at 03:31
  • 2
    Typo in code that decodes string. Instead of `var keyValue = pairs.split(/=/);` should be `var keyValue = pairs[i].split(/=/);` – Mikhail Fiadosenka Oct 09 '12 at 14:11
  • In addition to the fix suggested by Mikhail Fiadosenko, don't you also want to use decodeURIComponent on the keys and values, since you originally encoded them? `stateObject[decodeURIComponent(keyValue[0])] = decodeURIComponent(keyValue[1]);` – Sam Fen Dec 09 '16 at 19:24
5

Coming back to answer my own question-- I can testify that URL encoding (even only partially) the JSON string has been working perfectly fine in our production environment.

Ex. source JSON:

{"mode":21,"popup":18,"windowId":2}

Ex. encoded in URL:

http://example.com/my-ajax-app#%7B%22mode%22:21,%22popup%22:18,%22windowId%22:2%7D

For small amounts of JSON such as above we've had no problems on any browsers (as far back as IE7 even). Larger JSON strings we have not tested.

DuckMaestro
  • 15,232
  • 11
  • 67
  • 85