The fourth platform of IE10 simplifies building cross-site scenarios that work consistently across browsers by supporting Cross-Origin Resource Sharing (CORS) for XMLHttpRequest (XHR). CORS for XHR makes sharing data across sites simple and flexible. In the most basic scenario CORS enables creating data sources accessible from any site, and with a few small tweaks you can choose to constrain allowed sites, support data modification, and even allow authentication. Most importantly CORS keeps existing sites secure by requiring server participation.

Simple Cross-Origin XHR

Lets look at how a cross-origin XHR request compares to a same-origin request. From script, the only difference is the URL passed to the open method. For example, say were working on a script that fetches a list of photo albums.

Traditional XHR

Now we want to access the list of albums from another origin. The other origin can be a completely different domain or a different host with the same base domain. Either way, just pointing at the full URL from another site is enough to get the browser to automatically send a CORS request.

CORS-Enabled XHR

Sites can provide fallback for older browsers by wrapping this in feature detection. Checking for withCredentials is the best approach since it directly relates to CORS support for XHR.

CORS-Enabled XHR with Feature Detection

At this point our client code makes a CORS request directly to "http://photos.contoso.com", but the request fails to return any data. The failure occurs because the server isnt participating yet. Taking a quick look at the developer tools gives us an idea what went wrong.

Here we can see the server needs to send an Access-Control-Allow-Origin header in the response. In our scenario were not opening up our albums for any site to access, but want to enable access solely from http://www.contoso.com. Doing this requires allowing the server to identify where the request originated. Examining our outgoing request reveals a new header containing precisely this information, Origin.

Simple CORS Request Headers

Using this information the server can choose to limit access to any set of sites. If the server always adds an Access-Control-Allow-Origin header with a value of '*' then all sites will have access. For our scenario, well have the server verify the origin and then set Access-Control-Allow-Origin to allow only http://www.contoso.com.

Simple CORS Response Headers

With the above updates in place, our http://www.contoso.com client can now access album lists from the server at http://photos.contoso.com.

Cross-Origin XHR with Preflight

The simple CORS requests discussed so far are great for basic, read-only scenarios, like downloading a photo album. Taking the next step by modifying data across sites requires a bit more work on the server. For example, say were adding code in the client to create a new album.

Running this as-is doesnt work. Examining the network traffic reveals a request is sent, but not the one we expected.

What the browser actually sent is known as a preflight request. Preflight requests are sent before requests that may result in data modification on the server. Such requests are identified by the presence of non-simple properties as defined in the CORS specification. These properties range from certain HTTP methods like PUT to custom HTTP headers. Browsers send preflight requests to ask the server for permission to send the actual request. In our example the browser is verifying a PUT request is allowed.

Preflight Request

Getting the browser to send the actual request requires some changes on the server. Once again we can take a look at the developer tools for more information.

The first step is to make the server recognize the OPTIONS preflight request as distinct from other requests for the same URL. After the server verifies the preflight request by ensuring Access-Control-Request-Method is asking for PUT from an allowed origin, it sends the appropriate approval via the Access-Control-Allow-Methods header.

Preflight Response

Once preflight is out of the way and approved the actual request takes place.

Actual Request

Adding the album is technically complete at this point, but our client code wont know that unless the server responds correctly. Specifically the server must still include Access-Control-Allow-Origin in the response.

Actual Response

With that the client can add a new album cross-origin and recognize whether or not the action completed successfully.

Next Steps

Pairing CORS with other new platform features enables interesting scenarios. One example is the Cross-Site Upload Test Drive which tracks cross-origin file uploads using CORS, XHR, FileAPI, and progress events.

Tony Ross, Program Manager, Internet Explorer

Metro style apps in Windows 8 have all the performance benefits of IE10 when showing Web content. In Metro style apps, Web content is always JIT compiled and hardware-accelerated. Other platforms do not provide the same level of performance in apps. For example, Cocoa apps on iOS offer significantly worse JavaScript performance (via the UIWebView control) than the same content running in Safari. These Cocoa apps do not enjoy JIT compilation, and these apps cannot show and use Web content the same way the browser on the system can:

Testing configuration: http://www.webkit.org/perf/sunspider/sunspider.html.
iPad: 1st Gen, iOS 5.0.1.
Windows 8: Developer Preview, Dell Optiplex 745, 64-bit OS.
Kindle Fire v1.

Why is this important?

Many applications embed HTML to provide a richer and always up to date experience for consumers. For example, the developer of a restaurant guide app might want to include a live map showing the locations of the list of restaurants the user is choosing from. If you write an app on iOS, common actions like panning and zooming the map will run twice as slow in an app compared with Safari.

Anyone writing a Metro style app for Windows 8 can easily include Web content in their app. In an HTML or XAML app, just include an <iframe> element or a WebView control to get the full benefit of IE 10 performance. To see a sample HTML app that demonstrates this, check out the Building Your First Metro Style App Using Javascript hands-on lab at http://www.buildwindows.com/Labs.

Figure 1: HTML Content from Bing Maps in an HTML Metro Style App

With Metro style apps, its easy to integrate many existing Web services seamlessly into your app. Its also possible to build new services for your app that let you deliver dynamic HTML content without having to update your application.

When you include Web content in your Metro style app, your app gets all the performance benefits of IE10 automatically without any additional or special work. JavaScript code continues to run fast with JIT compilation, and your app will automatically use GPU to accelerate HTML graphics.

Andy Zeigler, Senior Program Manager, Internet Explorer

CSS3 features make it easier to build rich and immersive Web experiences. A recent post described how Web developers add personality to their sites with CSS3 Transitions and Animations. CSS3 3D Transforms add another dimension (literally) for developers to enhance their sites. For example, the Windows 8 Metro style Start page uses subtle 3D transforms to highlight pressed tiles, as shown below.

Internet Explorer 10 tile shown not pressed (left) and pressed (right)

Adding a 3rd Dimension to CSS Transforms

Like CSS3 2D Transforms, 3D Transforms provides functions and values for the CSS transform and transform-origin properties that apply geometric transformations operations to HTML elements. CSS 3D Transforms extends the transforms functions to enable 3D transforms. The rotate(), scale(), translate(), skew(), and matrix() transform functions are expanded to encompass the 3D space with a z-coordinate parameteror in the case of matrix3d(), an extra 10 parametersand by spawning additional transform functions, for example, rotateZ() and scaleZ().

A new perspective transform function gives transformed elements depth by making distant points appear smaller.

CSS3 3D Transforms also adds a few new CSS properties. In addition to the transform and transform-origin properties, IE10 supports vendor-prefixed perspective, perspective-origin, backface-visibility, and the flat value of transform-style.

Note: The markup examples in this post all use unprefixed properties as defined in the W3C standard. However, at this time all browsers that implement these features do so with vendor-specific prefixes. Please remember to add your browsers prefix to the example markup when experimenting.

Perspective

The perspective transform function is important for 3D transforms. It sets the viewers position and maps the viewable content onto a viewing pyramid, which it subsequently projects onto a 2D viewing plane. Without specifying perspective, all points in z-space are flattened onto the same 2D plane and there is no perception of depth in the resulting transform. For some transforms, such as the translation along the Z-axis shown below, the perspective transform function is essential for visibly seeing any effect from the transform.

In the examples below  is the original, untransformed element and  is the transformed element

transform: perspective(500px) translate(0px, 0px, -300px);		transform: translate(0px, 0px, -300px);
transform: perspective(500px) rotateY(30deg);		transform: rotateY(30deg);

A shortcut for adding the perspective transform to several elements is to use the perspective property on their parent element(s). The perspective property applies the perspective transform to each of its child elements:

The perspective-origin property can also be used in conjunction with perspective to shift the viewpoint away from the center of the element:

Below, you can see that shifting the perspective origin to the left makes the content to the right of the original perspective origin appear farther away.