Cross browser JSON parsing

basic_json_object

JSON parsing? Well that must be easy, is it not? Native JSON object is here, why should anyone now worry about JSON string parsing into the ES5 objects?

Yes, that line of thinking might be a sensible approach. But how is the issue of using “non standard” JSON strings solved in your “cross browser javascript” ? Ok let us dive deep.

IE8: JSON.parse(“{ ‘a’:1 }”) Syntax Error
CHROME JSON.parse(“{ ‘a’:1 }”) OK
FF JSON.parse(“{ ‘a’:1 }”) Syntax Error
OPERA 10.10 JSON.parse(“{ ‘a’:1 }”) Undefined variable JSON
SAFARI 4.0.4 JSON.parse(“{ ‘a’:1 }”) Syntax Error

See the problem? Your ES5 code receives JSON strings which are out of your control. And standard JSON string has to be embedded in single quotes and property names have to be in double quotes. The problem is that not every browser follows this simple rule. CHROME 4.x, which is a browser with (very) significant number of users, does not. That is perhaps not such a big issue. The big issue is that today on the WWW there are large number of legacy systems, all passing JSON “almost-standard” (aka “illegal”) strings around.

I suppose, now you might reply : “…OK, why support non standard usage … ?” . And then someone else might reply : “but CHROME does” ? Ad infinitum … Instead of endless debate, I suggest a slight detour.  Here is the trick: JSON.parse does not have to be used to “parse” JSON strings. The good old Function() approach, “just works” :

var data = "{ 'a':1 }" ; // or "{ a : 1 }" or the proper syntax '{ "a" :  1 }'
data = (new Function("return " + data))();

Above trick works in each browser, regardless of the fact that string passed in, sometimes is not a proper JSON syntax. This works eveywhere, including IE8, FF and SAFARI where JSON.parse("{'a':1}") dutifully throws an exception. Above trick also works in browsers which have no JSON as a native object at all. End of detour.

This is in case you want to support this. I don’t. OK, by now perhaps you might want to adopt a more sensible approach? No compromise approach where your library will NOT allow for non-standard JSON strings, any more!

Maybe I did not say it clearly enough, so I will do it now: I agree 100% with no-compromise approach to “almost-standard” (aka illegal) JSON strings. It is only that in reality, there are well known and (commercial) paid for RESTfull services, which return this wrong kind of JSON. Especially this kind : ” { look-ma-no-quotes : 1 }” is, it seems, in widespread use. No quotes whatsoever around names.

What is also relevant in this context, is that there are other JSON issues , especially security ones. Issues much larger than travails of any JavaScript library out there. And they need to be ultimately re-solved by W3C, IEEE, http://www.soa-standards.org/, etc …, not jQuery, Dojo or any other clever team. In my opinion the best one can do, for her library, is to document these issues. And that will immediately show if browser of choice is not capable of legal JSON parsing.

What is especially worrying is that new kind of “AJAX” (not AJAX) platforms are starting to appear. Non dom and non ES5 code, which “just” uses the idea of  REST (JSON + HTTP). Like Node.js or Ruby apps, happily working without dom, JavaScript or browsers , and which talk to some external and proprietary server side quazy “REST”, (not REST). This issue is old news with XML, but XML text is not source of any programming language. JSON is much more dangerous since it is source code, not an document markup language like XML is. As an very good example. In CHROME 4.xwindow.JSON.parse will happily parse "{ 'a' : 1 }" which is not standard. It will even parse "{ a : 1}", and yes it will also parse this :

JSON.parse('{ "document.writeln('!')" : 1 }')  // ok in CHROME

In your organization You might want to allow for this or not. It is up to you. I would not. Actually the simplest “way out” is to check in your javascript library which browser it is currently in. In the case of jQuery, I would add new jQuery.support member :

jQuery.support.nonstandard_json_string =
function () {
   try { JSON.parse("{ a : 1 }"); return true ; } catch(x) { return false; }
            }();

As far as I know “only” in CHROME , the above yields true (Tested up to CHROME 4.0.302.3):

jQuery.support.nonstandard_json_string === true ;

Having this in place, one can go ahead and implement her JSON parsing logic. Here is my attempt :

// cross browser safe JSON parsing
// illegal JSON stops here ...
(function (window, undefined) {
// taken from http://json.org/json2.js
var ok_json = function ( data ) {
return /^[],:{}s]*$/.test(
data.replace(/\(?:["\/bfnrt]|u[0-9a-fA-F]{4})/g, "@")
.replace(/"[^"\nr]*"|true|false|null|-?d+(?:.d*)?(?:[eE][+-]?d+)?/g, "]")
.replace(/(?:^|:|,)(?:s*[)+/g, "")
) ;
}
// true if native JSON exists and supports non-standard JSON
var ok_wrong_json = function () {
try { JSON.parse("{ a : 1 }"); return true ; } catch(x) { return false ; }
}();

window.json_parse =
 ( window.JSON && ("function" === typeof window.JSON.parse) ) ?

       ( ok_wrong_json ) ?
         function json_parse ( data ) {
          // Case 1 : native JSON is here but supports illegal strings
          if ( ! ok_json( data ) ) throw new Error(0xFFFF,"Bad JSON string.") ;
          return window.JSON.parse( data ) ;
         }
      : // else
         function json_parse ( data ) {
         // Case 2: native JSON is here , and does not support illegal strings
         // this will throw on illegal strings
          return window.JSON.parse( data ) ;
         }
: // else
function json_parse ( data ) {
   // Case 3: there is no native JSON present
    if ( ! ok_json( data ) ) throw new Error(0xFFFF,"Bad JSON string.") ;
    return (new Function("return " + data))();
}
;
})(window) ;

Perhaps this is good enough, to represent safe cross browser JSON parsing mechanism ?

Update: 2010 Feb 01
I made a little "fuss" on the V8 (Chrome JavaScript engine) "Issues" forum, and today it appears to be fixed: http://code.google.com/p/v8/issues/detail?id=372 . So in "V8", JSON.parse() , now works as it should. Therefore some near future CHROME update will not fall into "case 1" any more, in the code above.

Update: 2013 Jan 29

Of course 3 years after situation is much better in every major browser. But. These days we have multitude of mobile device browsers which have to be tested. Not an easy task but there are teams doing it. This is nothing but a good thing, because this kind of code wakes me up in the early monring:

var bomb = JSON.parse('{ "document.writeln(x)" : "WTF!?" }')
for ( j in bomb ) (new Function ("x",j))(bomb[j]) ;

–DBJ

Tagged on: ,

4 thoughts on “Cross browser JSON parsing

  1. "Cowboy" Ben Alman

    There are many different ways for JSON to be invalid, how do you propose testing every single one of them to see which browsers “correctly” parse all possible variations of invalid JSON?

  2. Dusan Post author

    JSON validity checking, in this solution, is left to JSON.parse() function, or ok_json(). Latter implementation is borrowed from json2.js. made by one Mr D. Crockford.

    If it would not be for the (current) CHROME, the solution would be (much) simpler. That is: Just use JSON , if available, otherwise fall-back onto the Function() “trick”, with this ok_json().

    Perhaps ultimately it is not possible to check the 100% validity of the JSON string. Especially if it is a very large one. And also: what is the upper limit of a JSON string size ? There are, more than few unresolved issuess here. A job for W3C, I guess. Perhaps JSON community could/should borrow from XML parsing and security concepts.

    Update 2010 Jan 25

    I see now what exactly you mean ! You mean: how do we know that ok_wrong_json(), is rigorous enough.
    To which I think the valid answer is : To have 100% rigorous testing , in there, one would have to apply dozens of tests. (see : http://es5conform.codeplex.com/ ) Instead my logic is: if the basic test is not passed, then all the other tests are irrelevant. If JSON.parse(“{ a : 1}”) , works nothing else matters. Because this means that this JSON implementation is seriously flawed.

    Thanks for your comment : DBJ

  3. Pingback: AJAX and JSON. How do I use it? - SitePoint Forums

Leave a Reply

%d bloggers like this: