Updates for AJAX in IE8 Beta 2

Sunava Dutta here, a program manager focused on improving AJAX in the browser! Now that Internet Explorer 8 Beta 2 is out, I want to write about some of the latest rounds of enhancements we’ve made. As many of you may recall, back in March we discussed a set of developer experiences in AJAX across scenarios such as client-side cross-domain data access, local storage, and navigation state management among many others. The good news is our team has been working since Beta 1 to tweak and update our implementations based on feedback from developers (thanks for your contributions!) and ongoing updates to the W3C standards drafts on which most of these implementations are based or have been submitted for consideration. Not content with doing just that, we also added a few new features for developers. More on that later…

The AJAX updates we’ve chosen for Beta 2 focus on maintaining cross-browser compatibility and the feature sets that developers have thought would be the most useful. Without further ado, here they are.

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 == 'https://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", "https://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 JSON.stringify and JSON.parse methods provide improved performance as opposed to non-native Javascript serializers and deserializers. 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.

Other Features

AJAX Navigations has undergone minimal changes since Beta 1. We’ve got some new code samples and overview documentation on this for Beta 2 on MSDN. Improved connection parallelism per host has also undergone a few tweaks and will command its own post soon.

Summary

We’ve worked in standards to make the AJAX experience for developers better. Beta 2 implements the changes mentioned above. Moving forward, we will continue to partner with members in the W3C on a variety of topics including advancing draft specifications. Strong developer adoption of these features is a priority and we’re focusing on help sites transition to integrating these features. For code samples for the AJAX feature set, please refer to our IE8 AJAX Beta 2 Hands on Labs. In case you’ve wondered who the ‘we’ in the AJAX core development team is, below is a photo (unedited, red eyes included) that puts a few faces to the names that pop up occasionally on blogs and mailing lists! Enjoy!

Sunava Dutta
Program Manager

From top left: Sharath Udupa (Developer), Gideon Cohn (Test), Zhenbin Xu (AJAX Senior Developer, Alex Kuang (Test) and Karen Anderson (Test)
From bottom left: Sunava Dutta (Program Manager) and Ahmed Kamel (Developer)Missing from this photo are Françoise Louw (Test), Adrian Bateman (Program Manager) and Gaurav Seth (Developer)

edit: Modified this sentence to reflect "stringify" and "parse": In addition, IE8 Beta 2’s JSON.stringify and JSON.parse methods provide improved performance as opposed to non-native Javascript serializers and deserializers.

Comments

• Anonymous
  October 06, 2008
  PingBack from http://www.easycoded.com/updates-for-ajax-in-ie8-beta-2/

• Anonymous
  October 06, 2008
  WTPH? What is a "window.attachEvent"??? I don't see that in my Standards based W3C ECMAScript DOM Event Listener documentation anywhere? Funny, because I'm sure that MSFT said they were going to make IE8 render Standards Based Content by DEFAULT? Oh wait, they took out the Intranet from that statement. Oh wait, I guess they are only partially committed to standards when they decide they feel like it. Way to commit! -- Not!

• Anonymous
  October 06, 2008
  Does .toStaticHTML() also parse out style attributes from every single DOM element since in IE they have full access to JavaScript abilities too?  Same question for style tags... same question for link tags...

• Anonymous
  October 06, 2008
  justhowstatic: toStaticHTML filters styles, javascript: URLs in A tags, etc. wtph: You clearly don't understand what you're talking about.  CSS Rendering != DOM Eventing.

• Anonymous
  October 06, 2008
  There are a LOT of updates.. but what about the main function.. i still got to much freze/crash. I uninstall it and wait until next build/beta/version

• Anonymous
  October 06, 2008
  The comment has been removed

• Anonymous
  October 06, 2008
  @mocax, your bug report would be a lot more useful if you said something more specific than "wrong"

• Anonymous
  October 06, 2008
  Ted: it's already been reported with all the needed details in a past article, anyway, and an IE team guy saw it.

• Anonymous
  October 06, 2008
  If you provide an origin in Access-Control-Allow-Origin rather than a * does it work as well? (It's required by the Access Control for Cross-Site Requests draft.) Is localStorage now synchronous rather than asynchronous as it was in IE Beta 1?

• Anonymous
  October 06, 2008
  Once again IE8 is left behind by the likes of Firefox 3.1, Google Chrome and Safari 4. You need to leap ahead or with the continuously declining marketshare, very slowly but steadily IE will fall to 10% and other browsers will make up the other 90%. The web in 2008-2009 needs a more solid more standards compliant more powerful browser.

• Anonymous
  October 07, 2008
  Its a great browser for me,just improve when you open  a browser for Inprivate to be default and if you have open normal browser should it ask you when you open the second one whether it should be InPrivate or normal

• Anonymous
  October 07, 2008
  In compatibility view (click that broken page button),  browser reports its user-agent as IE7, but the AJAX processes in the same webpage sends user-agent as IE8 So my session authentication interprets it as 2 different browsers.

• Anonymous
  October 07, 2008
  Still waiting for proper DOM (events, style...) support... Implementing tomorrow web standards is great, what about the past & present ones...

• Anonymous
  October 07, 2008
  What about indexOf method of arrays, w3c constructors (Element,Event etc..)? Will we wait IE10 (or 11,12,13?) for these real important requirements?

• Anonymous
  October 07, 2008
  I hate the Navigator.onLine as it only tells you if the browser is in online mode ("work online") or offline mode. To see if connection is lost, one must use setInticval and call an uncached image from a server. Perhaps a non standard second event is required. One more thing. It's great that IE 8 is working towards standards compliance, but some features would be good to be implemented, for instance the CSS border radius property. It saves using loads of redundant HTML tags + CSS and/or several images. If IE 8 supports an implementation of border radius, e.g. -ms-border-radius then the three most popular layout engines will support it (Gecko + WebKit).

• Anonymous
  October 07, 2008
  Oh, and what about Element.prototype?

• Anonymous
  October 07, 2008
  @Azer Koçulu, @Hello: "Constructors" like Element, Event, etc., are in the Beta 2 build! For purposes of compatibility, they will not show up unless you're in "IE8 standards mode" (check with the Dev Tools). Try this: Element.prototype.theWorks = function() { return "yep"; } document.createElement('p').theWorks();

• Anonymous
  October 07, 2008
  Shift + enter for the first live search suggestions

• Anonymous
  October 07, 2008
  Yeah come on guys, get the js engine up to spec if you're going to bother with implementing proposed features. The event handling is a huge PITA and always something that developers end up having to write custom for IE.

• Anonymous
  October 07, 2008
  some site is not being shown in history smart address bar autocomplete when selecting the dropdown menu

• Anonymous
  October 07, 2008
  Guys, please, focus on standards. I don't like headaches.

• Anonymous
  October 07, 2008
  CSS was meant as CSS dynExpressions, at least I'd ask the same question. All i hope now is to see people everywhere abandoning IE6! given that IE8 will be much closer to W3C standards not MS standards

• Anonymous
  October 07, 2008
  The comment has been removed

• Anonymous
  October 07, 2008
  @Hello: <<I hate the Navigator.onLine as it only tells you if the browser is in online mode ("work online") or offline mode.>> No longer. In IE8 Beta2+, navigator.onLine is also impacted by network availability, not just offline mode.

• Anonymous
  October 07, 2008
  En parcourant rapidement un billet du blog de MSDN sur les mises à jour d'IE 8 concernant Ajax, je suis tombé sur le bout de code suivant qui m'a particulièrement intrigué : window.attachEvent(&quot;onmessage&quot;, HandleMessage);.

• Anonymous
  October 07, 2008
  Sunava, EricLaw and the entire IE8 team: First, thank you for enabling online/offline/navigator.onLine property on Windows XP!! I was the person who complained in the Microsoft feedback and you guys fixed it!! BTW, you need to update the online Microsoft documentation to reflect the fact that its no longer Vista only. I put a note on both the ononline and onoffline events to reflect that fact. Second, you need to also update the documentation around localStorage to show that a domain is no longer necessary. Third - MOST IMPORTANT - I discovered a bug with the <base> tag! If you create a document that uses a <base> tag and meets one of the following 2 conditions, it doesn't work (i.e. it has no effect on the other tags that are relying on <base> tags, such as <style> tags):

1. The document is in strict IE8 standards mode.
2. The <base> tag's URL starts with a 'file://' URL. I tried to report this, but can't seem to file bugs into the Microsoft Connect bug database for IE anymore... Please contact me at: bedney@technicalpursuit.com if you need a testcase or more info. Cheers,

• Bill

• Anonymous
  October 07, 2008
  All - As I just communicated to Eric, I misspoke in the above message from me. It should read that both conditions must be present for the <base> tag bug to be exhibited:

1. The document is in strict IE8 standards mode.
2. The <base> tag's URL starts with a 'file://' URL Cheers,

• Bill

• Anonymous
  October 07, 2008
  Here are your priorities (in order, highest to lowest):

1. Full, complete, conforms exactly to the W3C standard CSS2.1 support.
2. Any implemented CSS3 features are also W3C conformant.
3. W3C-standard event handling.
4. Proper, complete DOM support/W3C JS API. . . .
5. MSFT/IE-only 'features'.

• Anonymous
  October 07, 2008
  The comment has been removed

• Anonymous
  October 07, 2008
  @William J. Edney Thanks William for your feedback and suggestions. We absolutely took your input into account when making the change. Our Beta 2 documentation for MSDN is undergoing staged updates and DOM Store as well as the online property text will be updated soon! I appreciate you pointing it out. I will defer the question on the Base tag to somebody else from my team.

• Anonymous
  October 07, 2008
  @Anne Van Kesteran Hey Anne. The <origin> was something that was till recently being debated on the Web Apps mailing list so it couldnt not make Beta 2. Localstorage is async however in conversations with Ian Hickson on the topic all parties clarified that the spec does not require or specify sync or async, but rather implemented atomically. http://lists.w3.org/Archives/Public/public-html-comments/2008Jun/0015.html

• Anonymous
  October 07, 2008
  FIX MEMORY LEAK (IF IT EXISTS)? ie8-beta2 has some memory problems. It seems to balloon in memory size (what it's using up according to MemUse.exe and Google Chrome and Task Manager). I'm using Windows XP -- maybe it works better in Vista. Still though, I think it kind of makes me want to go back to version 7 or even 6... or use another browser... but ummm well maybe it does work better in Vista. I only got 1.25 gigs on this machine, this Thinkpad X31! It's just annoying that your browser is leaking as bad as Firefox used to.

• Anonymous
  October 07, 2008
  The comment has been removed

• Anonymous
  October 07, 2008
  Hey, why didn't you post my last one?

• Anonymous
  October 07, 2008
  TED: you sound like a developer who writes for IE only. What Banned was getting at is that the IE team need to focus on getting their standard support 100%. Why? Well as a developer who builds sites for multiple platforms and multiple browsers, it is only ever IE that gives me the biggest headache as I have to write custom javascript and css for it. The majority of other browser vendors are happy going in the same direction with supporting standards, while IE always seem to be focused on implementing yet more proprietory stuff. The main problem is the IE team still think the browser wars are happening and that they have to try to beat the other vendors with new toys, however they're failing to see all the other vendors are heading in a unified direction focusing on W3C recommendations and browser speeds to make for a better user experience. So far it has been developers who have carried IE's buggyness for the past decade, writing additional code to make it perform like all the other browsers. If developers stopped doing that and let IE render in all it's ugly glory I'm sure more users would seek a more stanards based alternative browser.

• Anonymous
  October 08, 2008
  The comment has been removed

• Anonymous
  October 08, 2008
  eghost, are you just trolling, or are you actually illiterate?   Just a few days ago, they had a post all about UI-- specifically, tab grouping and tab coloring.  Before that, they had posts on the address bar UI, the search UI, and the favorites UI.   So, go back and read those, then come back and try to start an intelligent conversation.

• Anonymous
  October 08, 2008
  A User, let me rephrase your post for you so you can help understand yourself. "A User: If the world was a different place than it actually is, then users wouldn't want the things they want, and they would more often want to install the browsers that today, combined, have 1/4th the marketshare of the leading browser." Now do you understand?

• Anonymous
  October 08, 2008
  "all the other vendors are heading in a unified direction focusing on W3C recommendations" Yeah. That's why Safari added non-standard functionality for the iPhone.

• Anonymous
  October 08, 2008
  what happened the once monopoly Internet Explorer/Microsoft?!With the last few versions, they are continuosly losing ground to Firefox. I still use IE for some programs I need, but otherwise, it is not the first choice in the last yrs.

• Anonymous
  October 08, 2008
  If anyone else is struggling trying to get XDR working on IE8 Beta 2 (as I have been) note that the server

• Anonymous
  October 08, 2008
  mmmm..... wow!! how shiny!! </polish_turd>

• Anonymous
  October 08, 2008
  add a active link/mouse over link in address bar a feature found in fission firefox add on.

• Anonymous
  October 08, 2008
  .NET Richmond Code Camp 2008.2 - Functional C# Recap ASP.NET MVC with NHaml - F# Edition Formatting strings

• Anonymous
  October 08, 2008
  .NET RichmondCodeCamp2008.2-FunctionalC#Recap ASP.NETMVCwithNHaml-F#Edition Form...

• Anonymous
  October 08, 2008
  The comment has been removed

• Anonymous
  October 10, 2008
  The comment has been removed

• Anonymous
  October 10, 2008
  The comment has been removed

• Anonymous
  October 11, 2008
  WindowsInternetExplorer8Beta2的一个主要目标是去提高开发者的开发效率，IE8开发人员通过提供跨浏览器以及一些强大的应用程序API去达成这个目标。 IE8bet...

• Anonymous
  October 15, 2008
  I hope Beta3 offers more then just some Ajax gimmicks, it seems way to early to focus on fanciness while pages are still breaking apart on IE8. Even Chrome is able to out-compete IE8 with a quick effort, how hard can it be?

• Anonymous
  October 15, 2008
  Chrome has it's flaws. MS, please fix the comments!

• Anonymous
  October 16, 2008
  Of course, but put Chrome up against IE8b2 it's easy to see that IE needs to step up on core issues. Implement Canvas, compatibility mode needs a lot of work it's not comparable to IE7. I could go on and on, these beta's have been a disappointment for any serious developer.

• Anonymous
  October 18, 2008
  Ajax sites often require lots of JavaScript and CSS.  Gzip-encoding these files helps mitigate this. Any plans to fix IE8's inability to reliably accept gzip-encoding functionality?   (It's not even on par with IE7.)

• Anonymous
  October 19, 2008
  The comment has been removed

• Anonymous
  January 14, 2009
  Back in October , Sunava described changes that we made to the XDomainRequest (XDR) object in IE8 between

• Anonymous
  March 24, 2009
  Internet Explorer 8 의 AJAX 분야 개선에 집중하고 있는 프로그램 관리자 Sunava Dutta 입니다. Internet Explorer 8 Beta 2 가 공개되어,