Ajaxian

- 4 hours and 19 minutes ago

Sunava Dutta has detailed the enhancements made to IE 8 beta 2 for Ajax developers including XDR, XDM/postMessage, DOM Storage, offline detection, and more. A lot of great stuff!

XDomainRequest (XDR)

This is an object built from the ground up to make client-side cross-domain calls secure and easy. To reduce the chances of inadvertent cross domain access, this object requires an explicit acknowledgement for allowing cross domain calls from the client script and the server. Additionally, it reduces the need for sites having to resort to the dangerous practice of merge scripting from third parties directly into the mashup page. This practice is dangerous because it provides third parties full access to the DOM. All this comes with the added benefit of improved client-side performance and lower server maintenance costs thanks to the absence of a need for server farms for proxying.

During the Beta 1 timeframe there were many security based concerns raised for cross domain access of third party data using cross site XMLHttpRequest and the Access Control framework. Since Beta 1, we had the chance to work with other browsers and attendees at a W3C face-to-face meeting to improve the server-side experience and security of the W3C’s Access Control framework. As a result, we’ve updated XDR to be explicitly compliant with syntax and directives in the sections of Access Control for requesting simple public third-party data anonymously on the client! (Section 5.1.3 in the Access Control Process Model)

The updates to XDR from Beta 1 allow IE8 to request data from the domain’s server by sending an Origin header with the serialized value of the origin of the requestor. IE8 Beta 2 will only return the response if the server responds with Access-Control-Allow-Origin: *, instead of allowing the XDomainRequestAllowed: 1 header as we did in Beta 1. Other changes include support for relative paths in the open method, and restricting access to only HTTP and HTTPS destinations.

Cross-document Messaging (XDM)

Cross-document messaging is another powerful cross-domain feature that I’ve blogged about in the past. Rather than make a backend request to a remote Web service, this allows sites hosting third-party IFrame-based “gadgets” or components to communicate directly with the parent, without unsafely violating the same site origin policy. This has advantages including improved performance and reliability, as developers don’t have to resort to workarounds that behave differently between browsers and have unwanted side-effects. This technique also removes the need for embedding third-party script in your page, lessening the chance of potential information disclosure vulnerabilities like the disclosure of your sensitive data (such as information in your social network profile) to third parties without your consent.

Beta 2 updates here include moving the onmessage handler from the document object to the window object to better align with the updated HTML 5.0 draft.

window.attachEvent(”onmessage”, HandleMessage);

We also replaced e.URI with e.origin, which is serialized form of “scheme” + “host” + “non-default port”. This is far safer as the URI can carry potentially sensitive information from the origin site that is not needed by the recipient for the decision to grant or not grant access.

if (e.origin == ‘http://www.contoso.com’)
        {
               // process message text
        }

Finally, the HTML 5.0 draft also mandates that the targetOrigin parameter for the postMessage method now be made a required parameter, as opposed to an optional one. This will make it difficult for developers to make errors by requiring an explicit acknowledgement of the target destination of the message by specifying the origin <URL> or wildcard <*>.

frameOther.postMessage(”This is a message”, “http://example.com”);

DOM Storage

Today, web pages use the document.cookie property to store data on the local machine. Cookies are limited in capability by the fact that sites can only store 50 key/value pairs per domain. Furthermore, the cookie programming model is cumbersome and requires parsing the entire cookie string for data. While cookies are useful for marking transitions and changes on the client to the server as they are sent with the request headers in chunks of up to 4KB, IE8 brings better alternatives for scenarios involving persisting data on the client and distinctly maintaining sessions in different tabs. The W3C’s HTML 5 DOM Storage objects provide a much simpler global and session storage model for key/value pair string data. Sites can store data for the life of a tab or until the site or user clears the data.

Updates for Beta 2 include changing the name of the persistent globalStorage attribute to localStorage and the removal of the need to specify the domain when writing to the localStorage

// Store a key-value pair.
localStorage.setItem(”FirstName”,”Sunava”);

Finally, we also included improved support of the updated onstorage HTML 5.0 event returned when the storage is changed. We now return the URI when the local storage is changed, so that handlers for pages can know who carried out the latest transaction in the storage space in addition to providing the source to the window of the origin. Furthering the good news, the HTML 5.0 Working Group has incorporated the clear method, which we shipped in Beta 1, into the draft. This essentially allows for script to clear all items accessible in its storage space without having to iterate though the keys.

Connectivity Event

The navigator.onLine property and online/offline events now work on Windows XP as well as Windows Vista. The work to enable this was not trivial, as connection awareness in Windows XP is not quite as advanced as Windows Vista. That said, this will be extremely beneficial for developers, who we believe shouldn’t have to worry about OS differences. The value of connectivity events is particularly appealing when used in conjunction with the localstorage, where data can be cached in case of network loss!

XMLHttpRequest

Introducing the XDomainRequest object in IE8 hasn’t diverted our attentions from constantly tweaking and improving XMLHttpRequest, which will continue to be our flagship object for same-domain communications. Post-Beta 1 energies here have focused on a few bug fixes around reliability and working with the Web Apps Working Group to clarify and improve the draft specification, our compliance with it, and W3C public test cases. A timeout method introduced here in Beta 1 for the convenience of developers is currently being evaluated for adoption in the XMLHttpRequest spec.

// Sets timeout after open to two seconds.
xhr.timeout = 2000;

ToStaticHTML, to JSON, and fromJSON

What do you do with the strings returned from third parties using XDomainRequest or Cross-document Messaging? In today’s world of increasing script injection and Cross-site Scripting (XSS) attacks, having the option of passing these through a safe parser comes as a welcome relief. As detailed in Eric Lawrence’s post on Comprehensive Protection for IE8 Security, toStaticHTML provides a powerful way of sanitizing your strings by purging potentially executable content.

//Calling:
window.toStaticHTML(”This is some <b>HTML</b> with embedded script following… <script>alert(’bang!’);</script>!”);

//will return:
This is some <b>HTML</b> with embedded script following… !

In addition, IE8 Beta 2’s toJSON and fromJSON methods provide improved performance as opposed to non-native Javascript deserializers and serializers. Our implementation is based on the ECMAScript 3.1 proposal for native JSON-handling which uses Douglas Crockford’s json2.js API. In addition to the performance benefits of going native, the JSON parser provides a safe alternative to the eval() method, which has been a common and dangerous way to revive JSON objects, and could allow arbitrary script functions to execute.

Add a comment

access control,xdr,performances,compliant,flagship

Regex performance in modern JSVMs

Ajaxian

- 6 hours and 15 minutes ago

Based on its performance on the regexes it does handle, WREC (WebKit Regular Expression Compiler) is indeed an awesome design. regexp-dna.js, however, is flawed and exaggerates SFX performance.

We could use nanojit to make a regex compiler for SpiderMonkey that would perform as well as WREC. But I don’t know if it’s worthwhile yet. Regex performance is much less important for today’s web than it is for SunSpiderâ€“I hope to link to a report on that in a future post.

That was the conclusion that David Mandelin of the Tamarin project as he looked into how “SquirrelFish Extreme (SFX) is kicking our butts so badly on regexp-dna.js.”

I love David’s posts, as they go into the real meat of the tech:

Technical details: the design of WREC. There are two main ways to implement regular expressions: using a backtracking matching engine, or by transforming the regex to a finite automaton (NFA, aka “state machine”), which does not backtrack. Most Perl-type regex engines, including both SpiderMonkey’s and WREC, follow the backtracking design. I don’t know the exact history of that choice, but at present it is much easier to implement features like group capture and backreferences in the backtracking design. Also, although some regexes scale only if implemented as NFAs, my tests suggest that many simple regexes, including those in SunSpider, are faster with backtracking.

As of this writing, WREC’s implementation strategy is dirt simple (which is a good thing). There are no transformations or fancy optimizations on the regex. WREC simply generates native code that directly implements the backtracking search. Thus, within a single match operation, there are no function calls, no traversals of regular expression ASTs, and few option tests, so almost all of the overhead is eliminated.

WREC’s code is very easy to read, so if you want to know exactly how it works, just read it in WREC.cpp. It’s also great example code for anyone implementing a compiler for a simple language like regular expressions. The basic plan is to parse the regular expression with functions named things like parseDisjunction (the | operator). Those functions directly call functions like generateDisjunction that generate the native code using the same assembler that the call-threading interpreter uses. There’s also the oddly named “gererateParenthesesResetTrampoline”. Inexplicably preserved typo, or watermark to detect copying of WREC code?

Add a comment

webkit,conclusions,sfx,performances,choices

Dojo 1.2 Final Release

Ajaxian

- 10 hours and 52 minutes ago

Pete Higgins released Dojo 1.2 the first version under his command. There are a ton of subtle improvements such as:

New Datastores

dojox.data.JsonRestStore
dojox.data.CouchDBRestStore
dojox.data.GoogleFeedStore: A Google AJAX API powered data store for retrieving RSS and Atom feeds from Google.
dojox.data.GoogleSearchStore: Data stores to interface Google’s AJAX search services.
dojox.data.PersevereStore: dojox.data.PersevereStore is an extension of JsonRestStore to Persevere’s special features.
dojox.data.S3Store: an extension of JsonRestStore to handle Amazon’s S3 service using JSON data

New Projects in DojoX

dojox.analytics.Urchin

A Google-analytics helper, which supports lazy-loading the Google Analytics API at any point during a page lifecycle.
Allows you to post-onload include Google Analytics helper, and track Ajax-y pages via a simple API, with a very small overhead.

dojox.av

New project for Audio/Video elements
dojox.av.FLVideo: a player for Flash video files
dojox.av.widget.Player: Dijit-based object for playing Flash media

dojox.embed

A set of utilities that allow you to load/include Objects such as Flash and Quicktime.
dojox.embed.Flash for Flash movies
- Create proxy information for Flash movies implementing ExternalInterface through dojox.embed.Flash.proxy
dojox.embed.Quicktime for Quicktime movies
dojox.embed.Objectâ€”a Dijit that can be used via markup for any dojox.embed objects available.

dojox.io.windowName

Provides secure cross-domain request capability. Sends a request using
an iframe (POST or GET) and reads the response through the frame’s window.name.

dojox.io.xhrPlugins

This is a registry for creating alternate XHR handlers, for example
you can register to use IE8’s XDomainRequest or a proxy server to handle
cross-domain requests.

dojox.lang.aspect

dojox.lang.aspect is a new AOP library module for before/around/etc advice and other AOP features.
See the blog post for details.

dojox.lang.observable

Provides a form of getter/setter support to objects.
Observable objects can be created such that all property
reads, writes, and method calls will trigger listener functions
so that you can create APIs where property interaction can be
controlled and monitored.
This relies on VBScript hacks for IE and is somewhat
limited in functionality.

dojox.secure.capability

This provides object-capability JavaScript validation.
This is a validator to run before eval to ensure that a script can’t access or
modify any objects (like global objects) outside of those specifically
provided to it.

dojox.secure.DOM

Provides a DOM facade that restricts access to a specified subtree
of the DOM.
The DOM facade uses getters/setters and lettables to emulate the DOM API.

dojox.secure.sandbox

Provides support for loading web pages, JSON, and scripts
from other domains using XHR (and XHR plugins) with a safe
subset library and sandboxed access to the DOM.

We updated the Google CDN to point to the new version too, and AOL has done the same.

Add a comment

facade,google analytics,blog,ajax,apis

SMIL 3.0 Reaches Proposed Recommendation

Ajaxified Body; When to refresh the page

js.io: client library for networking

Mecca: A new social browser

iPhone Web Apps running at full screen

Vista / OS X Mash-up Created with GWT on PHP

Thinking about the difference between frameworks

Practical Functional JavaScript

Life: The game in Canvas

Ajaxian

- 4 days and 2 hours ago

Kyle McGregor took a look at the JavaScript games for Life out there and decided to write a Canvas version that ends up being a lot snappier. The entire game is pretty small:

PLAIN TEXT JAVASCRIPT:

var counterface = 0;
var oInstance;
var Game = Class.create();
Game.prototype = {
'working': false,
'map': '',
'interval_id': '',
'initialize': function()
{
//generate map
var startmap = [];
for(var y = 0; y <90; y++)
{
var row = [];
for(var x = 0; x <90; x++)
{
var state = Math.random();
state = (state> 0.8)? 1:0;
row[x] = state;
}
startmap[y] = row;
}
this.map = startmap;
oInstance=this;
this.interval_id = setInterval(function(){oInstance.loop()}, 100);
},
'loop': function()
{
if (document.getElementById('frame').getContext)
{
// drawing code here
if(this.working == false)
{
this.working = true;
this.draw();
this.step();
this.working = false;
}
}
else
{
// canvas-unsupported code here
alert('Your Browser does not support the canvas tag. try again in firefox 1.5+ or Opera 9+');
}
},
'draw': function()
{
var ctx = document.getElementById('frame').getContext('2d');
ctx.save();
ctx.clearRect(0,0,450,450);
ctx.fillStyle = "rgb(0,0,0)";
for(var y = 0; y <90; y++)
{
for(var x = 0; x <90; x++)
{
if(this.map[y][x] == 1)
{
ctx.fillRect (x*5, y*5, 5, 5);
}
}
}
ctx.restore();
ctx.fill();
},
'step': function()
{
var output = '';
supercount = 0;
var tempmap = [];
for(var y = 0; y <90; y++)//work around for arrays passing by reference.
{
var row = [];
for(var x = 0; x <90; x++)
{
row[x] = this.map[y][x];
}
tempmap[y] = row;
}
for(var y = 0; y <90; y++)
{
for(var x = 0; x <90; x++)
{
var countme = this.getNeighborCount(y,x);
if ( this.map[y][x] == 0 ) // dead cell
{
if ( countme == 3 )
{
tempmap[y][x] = 1;
}
}
else
{
if ( ( countme == 2 ) || ( countme == 3) )
{
tempmap[y][x] = 1;
}
else
{
tempmap[y][x] = 0 ;
}
}
}
}
counterface++;
this.map = tempmap;
},
'getNeighborCount': function(starty,startx)
{
var count = 0;
for(var y = starty-1; y <= starty+1; y++)
{
for(var x = startx-1; x <= startx+1; x++)
{
if(y>= 0 && y <90 && x>= 0 && x <90)
{
if(startx != x || starty != y)
{
if(this.map[y][x] == 1)
{
count++;
}
}
}
}
}
return count;
}
}

Add a comment

prototypes,map,outputs,drawings,beings

New Netflix Developer APIs

Symfony Firebug Extension: Firesymfony

YUI 2.6.0 Released: Carousels, Paginators, and lots of examples