Updates for AJAX in IE8 Beta 2

IE 8 Beta 2中的AJAX新功能

原文地址:http://blogs.msdn.com/ie/archive/2008/10/06/updates-for-ajax-in-ie8-beta-2.aspx

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…

我是Sunava Dutta,一个致力于改进浏览器里AJAX的项目经理。现在Internet Explorer 8 Beta 2已经出来了,我想写一些关于我们最近做的一些改进。可能许多人都还记得,早在三月份的时候,我们讨论了一些列关于在各种场景下的AJAX开发经验,例如客户端跨域读取数据、本地存储以及导航状态管理等等。好消息是我们的团队从Beta 1开始,就一直根据开发者的反馈(谢谢你们的贡献!)来调整和更新我们的实现,也一直在更新W3C标准草案,在这其中的许多实现都是基于这个草案或者已经提交这个草案审议的。除此之外,我们也为开发者增加了一些新的特性,这个以后再详细说……

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.

在Beta 2中的AJAX更新主要侧重于维护跨浏览器兼容性和开发人员认为最有用的一些特性。好了,不说别的了,下面是这些新特性。

XDomainRequest(XDR)

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.

这是一个在底层构建的对象(object),可以让客户端跨域请求很安全和容易。为了减少意外的情况下的跨域请求,这个对象需要从发出请求的客户端脚本和服务器得到一个明确的确认,以确认这个跨域请求。此外,这减少了网站页面中由于第三方合并脚本带来的风险需求。这种做法之所以是危险的,是因为它给第三方提供了完全的DOM控制权。这一切都跟随着改进的客户端表现带来的好处和因为不需要代理服务器群而带来的更低的服务器维护成本。

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)

在Beta 1的时间表中,为跨域请求第三方数据提出了许多基于安全的考虑,这些跨域请求使用了跨网站的XMLHttpRequest和存取控件框架。自从Beta 1开始,我们有机会和其他的浏览器及其他W3C与会者进行面对面会议,讨论如何改进服务器端的体验以及W3C的存取控件框架的安全性。在最后,我们更新了XDR,让其严格遵循存取控制章节中关于在客户端匿名请求简单公开的第三方数据的语法和指令规则!(存取控制处理模型第5.1.3节

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.

从Beta 1开始,更新后的XDR允许IE 8从指定域的服务器请求数据,在发出请求时必须发送序列化后的原始请求的头部值。如果服务器响应为:Access-Control-Allow-Origin:*,IE8 Beta 2将只返回响应,我们在Beta 1中做了一个头部用来代替允许XDomainRequestAllowed。其他的变化包括支持相对路径的开放方法和严格的HTTP和HTTPS目的地请求控制。

Cross-document Messaging(XDM)

跨文档消息(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.

跨文档消息我曾经在blog中提到过的一个强大的跨域特性。它允许网站使用第三方的基于IFrame的“小工具(gadgets)”或者逐渐直接与父(parent)页面交互,而不是发送一个后端请求到远程Web服务,而不是非安全地违反同一个网站的源策略。这项功能能够改进性能和可靠性,因为开发者不用再去为不同浏览器的不同行为和不想要的效果而困扰。这个技术也不在需要在你的页面中嵌入第三方的脚本,减少了潜在的信息泄露的风险,例如在为得到你的允许的情况下泄露你的敏感数据(比如你的社会性网络资料)给第三方。

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.

这里Beta 2的更新包括把onmessage的handler从文档对象(the document object)中移动到了window对象中,以便更好地与更新后的HTML 5.0草案一致。

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.

我们还用e.origin来替代了e.URI,e.origin是形如“scheme” + “host” + “non-default port”序列化组合。这个能更安全地决定授权或者不授权,因为URI能够从源站携带接受者不需要的潜在敏感信息。

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 or wildcard <*>.

最后,HTML 5.0草案还规定,postMessage方法的targetOrigin参数是必须参数,而不是可选参数。这将让开发者不再因为需要严格确认而容易犯错,因为不知道目标源消息是要指定指定源还是通配符<*>。

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

DOM Storage

DOM存储

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.

现在,网页使用document.cookie属性来存储数据到本地。Cookies实际存储能力是有限的,一个网站域名只能存储50个键值对(key/value pair)。此外,cookie编程模型很不灵活,需要把整个cookie字符串解析成数据。因为cookie对于客户端到服务器端的过渡和变化非常有用,因为它们是在请求头部中发送的,最高可以达到4KB,IE8带来了更好的替代方案在不同的场景中使用,包括在客户端保存数据和维护不同标签页(tabs)之间的会话(sessions)。W3C的HTML 5 DOM存储对象提供了一种简单得多的全局和会话(session)键值对(key/value pair)字符串数据存储模型。网站能够在一个标签页(tab)的生存周期内存储数据或者直到网站或者用户清除数据为止。

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

Beta 2的更新包括:更改了globalStorage属性名字为localStorage,并去掉了写数据时必须指定域(domain)的需要。

// 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.

最后,我们也改善了支持在HTML 5.0的onstorage事件(当storage改变时)返回时更新。当本地存储改变时,我们返回这个URI,页面中的处理程序就可以知道谁在存储空间中做了最新的改变,从而就可以把这个源提供给原始的窗口(window)。更好的消息是,HTML 5.0工作小组已经将我们在Beta 1中使用的清除方法纳入了草案。这从根本上允许了脚本来清理它存储空间中的项目,而不需要一个一个枚举遍历。

Connectivity Event

连通性事件

The timeout method introduced here in Beta 1 for the convenience of developers is currently being evaluated for adoption in the XMLHttpRequest spec.

在介绍XDomainRequest对象时,我们没有提到我们一直在坚持不懈地调整和改进XMLHttpRequest——这仍然是我们同域通信的旗舰对象。Beta 1的后期精力主要集中在修复一些关于可靠性的缺陷(bug),以及与Web应用工作组(Web Apps Working Group )一起工作,以明确和改进草案,我们遵从草案,W3C公开测试案例。这里介绍一个可以让开发者更方便的超时(timeout)方法,这个方法正在被评估以纳入XMLHttpRequest规范。

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

ToStaticHTML, to JSON, and fromJSON

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.

当第三方使用XDomainRequest或者跨文档消息(Cross-document Messaging)返回字符串时,你怎么办?在现在脚本注入和夸站脚本攻击不断增加的世界中,有一个安全地解析这些字符串的选择将会是非常受欢迎的。就像Eric Lawrence在他的关于《IE8安全的全面保护》的文章中提到的一样,toStaticHTML提供了一个强大的方式来过滤你的字符串以清除潜在的可执行的内容。

//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.

此外,IE8 Beta 2的JSON.stringify和JSON.parse方法的提供了改进的性能,以针对非本地JavaScript序列化和反序列化。我的实现是基于ECMAScript 3.1关于本地JSON处理(JSON-handling)的建议——使用Douglas Crockford的json2.js API。出了能得到本地化的性能好处之外,JSON解析器提供了比eval()方法更安全的替代方法,eva()方法是处理JSON对象中常用的和危险的方法,它允许执行任意脚本功能。

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.

自Beta 1以来,AJAX导航经历了很小的改变。在MSDN上,我们有了一些关于Beta 2版本的这些新特性那个的新的代码示例和概要文档。每个主机的并发链接也做了一些调整和改进,相关文档也即将出来。

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!

让开发者的AJAX体验更好,这是我们工作的目标。Beta 2版本实现了这上面所有提到的改变。在继续向前的路上,我们将继续和W3C的成员在许多主题上合作,包括推进草案标准。强大的开发者应该优先考虑采用这些特性,我们也在重点帮助网站过渡以集成这些特性。对于AJAX特性的相关示例代码,请参考Labs上我们的IE8 AJAX Beta 2手册

Sunava Dutta
Program Manager

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.