Question

Using JSON.stringify and JSON.parse to serialize and deserialize objects has subtle problems such as date objects being serialized as strings and then coming out on the other side as strings rather than date objects. I’ve tried using postMessage instead which has the benefit of producing 1:1 results, but I’m worried about other handlers eaves dropping on the messages. I’ve considered writing my own serializer/deserializer, but would prefer native browser capabilities.

Is there a way to use postMessage like a serializer, without having to worry about eavesdropping?

NOTE: I don’t care about eavesdropping using dev tools. My app is loading plugin like modules and I want to make sure those aren’t able to eavesdrop on messages that are for other modules.

Answer 1

You can supply a custom JSON parser/stringifier to JSON.stringify and JSON.parse:

var serialized = JSON.stringify(obj, /*func*/replacer);
var deserialized = JSON.parse(serialized, /*func*/reviver);

In addition to the custom reviver, you can also define a toJSON method on the object which is going to be serialized. This method receives one argument: the key’s name ^{indexes in arrays, property names in objects}, if applicable.

// Examples of a serializing a function
var dummyFunction = function() {return 'hey';};

Function.prototype.toJSON = function(key) {
    'use strict';
    return this.toString();
};
JSON.stringify(dummyFunction);
// Method 2:
var replacer = function(/*string*/key, /*any*/value, /*boolean*/pretty_print) {
    if (typeof value == 'function') return value.toString();
    return value;
};
JSON.stringify(dummyFunction, replacer);
// >>> "function () {\n    return \"hey\";\n}"
// Result of the previous, stored in a variable
var result =  '"function () {\\n    return \\"hey\\";\\n}"';

// Reviver example
// Note: Just an example. Do not use it without modification in production code,
// Because the pattern can easily be misguided: "function(){}alert('Evil');x={}"
// Even if you do not mind, at least add a try-catch block inside
//   `if (func)`, so that a malformed function does not break the reviver
JSON.parse(result, function(/*string*/key, /*string*/value) {
    var func = /^\s*function\s*\(([^)]*)\)\s\{([\S\s]*)}$/.exec(value);
    if (func) {
        // Note: Function( .. ) is equivalent to new Function( .. )
        var args = func[1].match(/[^,\s]+/g); // <-- Parameters
        // Function body:
        if (args === null) args = [func[2]];
        else args.unshift(func[2]);
        return Function.apply(null, args);
    }
    return value;
});

Here’s a JSPerf comparison of native parsing vs parsing with a reviver: http://jsperf.com/json-reviver. It shows that a custom reviver which does nothing special is two times slower, and that a reviver with expensive functionality is significantly slower.
However, when the last method is compared to a weaker method using native JSON and “manual conversion”, then the differences seems to be neglected.
Note: Only a single value is benchmarked. Make sure to create a custom benchmark for your own (specific) case, because it’s impossible to create one benchmark which represents every possible case.

I have created a JSPerf test case which checks the impact of .toJSON. To isolate noise, I’ve created a test case based on the Date object. A custom function with several function calls is just two times slower than a native Date.prototype.toJSON.