better security and performance with native JSON

The JavaScript Object Notation (JSON) mechanism for representing data has rapidly become an indispensable part of the web developer’s toolkit, allowing JavaScript applications to obtain and parse data intuitively, within scripts, with lightweight data encapsulation. Firefox 3.5 includes support for JSON natively by exposing a new primitive — window.JSON — to the top level object.

Native “out of the box” support for JSON comes to the web courtesy of the ECMAScript 5th Edition (PDF link to specification), other aspects of which will also be supported by Firefox 3.5. Presently, native JSON is supported by Firefox 3.5 and IE8, with a strong likelihood of other browsers supporting it soon as well.

Native JSON support has two advantages:

  1. Safety. Simply using eval to evaluate expressions returned as strings raises security issues. Also, the native JSON primitive can only work with data. It can’t be used to parse objects with method calls; attempting to do so returns an error.
  2. Performance. Parsing JSON safely, using third-party scripts and libraries, is likely to be slower than native JSON parsing within the browser.

Let’s look at some examples.

A JSON API for search results might look like this:

/*
Assume that you obtained var data
as a string from a server
For convenience we display this search
result on separate lines
*/
 
var data = ' { "responseData":
{"results": [
    {
        "SafeSearch":"true",
        "url":"http://www.arunranga.com/i.jpg",
    },
    {
        "SafeSearch":"false",
	 "url":"http://www.badarunranga.com/evil.jpg",
    }
]}}';

Such a resource could be returned by a simple HTTP GET request using a RESTful API.

Using native JSON, you could do something like this:

/*
 Obtain a handle to the above JSON resource
 This is best and most conveniently done
 via third-party libraries that support native JSON
*/
 
if (window.JSON) {
    var searchObj = JSON.parse(data);
    for (var i=0; i++; i < searchObj.responseData.results.length) {
        if (searchObj.responseData.results[i].SafeSearch) {
            var img = new Image();
            img.src = searchObj.responseData.results[i].url;
            // ... Insert image into DOM ...
    }
}

You can also stringify the object back to the string:

// Back to where we started from
 
var data = JSON.stringify(searchObj);
 
// data now holds the string we started with

Of course, to really enable the power of JSON, you’ll want to retrieve JSON resources from different domains, via callback mechanisms like JSONP. Many web developers are unlikely to use the JSON primitive directly. Rather, they’ll use them within libraries such as Dojo and jQuery. These libraries allow for the retrieval and direct parsing of JSON resources from different domains, and add a great deal of syntactic sugar to the process of callbacks and DOM insertions.

The native JSON primitive works with the popular json2.js library (which correctly detects if native JSON is enabled), so developers can seamlessly use JSON parsing on browsers that don’t support native JSON. As of this writing, Dojo and jQuery have committed to supporting native JSON:

About Arun Ranganathan

More articles by Arun Ranganathan…


6 comments

  1. Barryvan

    Perhaps it’s worthwhile noting that nearly all of the major JavaScript frameworks will (or do) support native JSON, including MooTools (https://mootools.lighthouseapp.com/projects/2706/tickets/607-native-json-support-in-firefox-31).

    June 16th, 2009 at 17:16

  2. Yongbin

    Native support is fine. However, Firefox 3.0.* supports native JSON via JSON.jsm. The methods are Object.toString() and fromString(). Why change the way in Firefox 3.5? This makes trouble for us extension developers to support both 3.0.* and 3.5.

    June 16th, 2009 at 19:10

  3. […] 原文地址:better security and performance with native JSON 系列地址:颠覆网络35天 […]

    June 16th, 2009 at 22:50

  4. kwerboom

    @Yongbin

    Go to https://developer.mozilla.org/En/Updating_extensions_for_Firefox_3.5 and https://developer.mozilla.org/en/JSON. You can read the sections on JSON support and how to handle Firefox 3.0 and 3.5 support. As for switching, that is explained very well in the second paragraph of this blog.

    June 17th, 2009 at 01:36

  5. […] co ciekawsze artykuły z Mozilla Hacks na polski. Na Techblogu zacznę od artykułu „Better security and performance with native JSON”, autorstwa Aruna […]

    June 17th, 2009 at 14:40

  6. […] 原文地址:better security and performance with native JSON 系列地址:颠覆网络35天 […]

    July 27th, 2009 at 01:10

Comments are closed for this article.