sessionStorage cross domain

This is just a quick post about my last HTML5 sessionStorage implementation for "every" browser and this is the summary:

• Linear Storage Protocol finally consistent as a stand alone general purpose storage (string, file, request)


• RC4 Stream Cipher key generation without breaking characters (\x00 not in the random range)


• Cross Domain Support, if both site a.com and site b.com support my implementation, they will not delete or modify each other domain information


• optimized boot strap for frames and iframes, the storage parsing and reassignment is performed once and not every time which means zero delay when an iframe is injected or more frames uses the same implementation

Finally, few bug fixes and this version is both W3C Draft compatible and cross browser.

Known Supported Browsers

• Chrome 1 and 2, version 3 or 4 should have native support for Web Storage


• Internet Explorer 5, 6, and 7, 8 has native support for Web Storage


• Opera 7, 8, 9, and 10 beta, hopefully 10 final will have native support


• Safari 3, version 4 has native support for Web Storage


• Firefox whatever version, since it supports Web Storage since version 1.5


• Google Android and iPhone, but latest WebKit releases should support Web Storage

This is a mixed list of almost all A-Grade browsers but about Android and iPhone, the total amount of available RAM could be 2 Mb.
It is not suggested to store in any case massive amount of information but so far I have putted every kind of library avoiding server requests for each tab session and without problems.
The sessionStorage aim is, in any case, to remember an arbitrary amount of data for each session and for each tab, surpassing cookies limits without number of keys or amount of data limits.

This project will be part of vice-versa library in order to make vice-versa the cross browser "lingua franca" W3 framework able to bring standards where these are not present yet.

1.4 Special Guests

I would like to say a big thanks to Jonathan Cook (J5 in WebReflection comments) for his suggestions, patience, and ideas exchange ;)

Ajax or JavaScript sub domain request

Some time we could have a situation like this one:

• a site in a sub domain, called http://a.test.com


• another site in another sub domain, called http://b.test.com


• of course, a generic main site, called http://test.com

A common problem between one or more sub domains, is the possibility to use, or call, scripts in the main domain, because of security restrictions.

The simplest solution is to force, in the client side, the document.domain, specifying the common one, i.e.

dcument.domain = "test.com";

In this way you can add, for example, an iframe, and read its content, or use parent window object from the iframe that points, for example, to http://test.com

There are different reasons to do it, and one of them, is the ability to share a global, or common, space, between every sub domain, performing Ajax requests or whatever else we need.

This object, saved in http://test.com, and loaded by every other sub domain, like "a" or "b", could solve in a really simple way this problem.

CrossDomain = function(){
    // webreflection.blogspot.com - Mit Style License
    var uid = 0, iframe, unset;
    return  {
        get:function(location){
            for(var
                search = location.search.substring(1).split("&"),
                i = 0,
                length = search.length,
                value;
                i < length;
                i++
            ){
                value = search[i].split("=");
                if(value[0] === "uid"){
                    search = this[value[1]];
                    delete  this[value[1]];
                    return  search;
                }
            }
        },
        unset:function(){
            document.domain = unset;
            return  this;
        },
        send:function(domain, value){
            var id = Math.random() + "." + uid++;
            this[id] = value;
            if(!iframe){
                (document.body || document.documentElement).appendChild(
                    iframe = document.createElement("iframe")
                ).style.position = "absolute";
                iframe.style.width = iframe.style.height = "1px";
                iframe.style.top = iframe.style.left = "-10000px";
            };
            iframe.src = domain + (~domain.indexOf("?") ? "&" : "?" ) + "uid=" + id;
            return  this;
        },
        set:function(){
            if(!unset)
                unset = document.domain;
            document.domain = unset.split(".").slice(1).join(".");
            return  this;
        }
    }
}();

Its usage is really simple, and here there is an example from, as example, a.test.com:

// callback to call (if it is the same for other sub domains
// put them in an external file
function showMessage(message){
    document.body.appendChild(document.createTextNode(message));
};

// set domain name, i.e. test.com
CrossDomain.set();

// call the page sending some value, every kind of value we need
CrossDomain.send("http://test.com/", ["a", "b", "c"]);

On the other file, the index inside test.com, we could simply use this piece of code:

// set domain name, manually or including CrossDomain
// and using its set method
document.domain = "test.com";

// call, simply, the parent function
// using the get method to avoid conflicts
// with multiple requestes
parent.showMessage(
    "You sent me " + parent.CrossDomain.get(location)
); // will alert a,b,c

The good thing of this simple created bridge, is that once you are in test.com, from a.test.com or b.test.com, you can call via Ajax every page inside test.com, sharing a single folder inside the global domain, instead of copy the same stuff everywhere in other domains.

// set domain name
document.domain = "test.com";

// simple Ajax request
var xhr = new XMLHttpRequest;
xhr.open("get", "?demo", true);
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4)
        parent.showMessage([
            "You sent me " + parent.CrossDomain.get(location),
            "And AJAX said " + xhr.responseText
        ].join("\n"));
};
xhr.send(null);

I hope this will be useful :)