hello communications(cn)

<html5><figure>Communications</figure><a href='mailto:leonguo@sohu-inc.com'>leonguo</a><time>2010.10</time>

</html5>

HTML5

HTML5 Communication

• HTML5 定义了两个增强型的文档通信模型– Cross Document Messaging

– XMLHttpRequest Level2

Widely-Used Models of CrossDomain • jsonp(JSON with Padding) + <script>

• document.domain + iframe

• flash + crossdomain.xml

• server proxy

• window.name + iframe

• window.location.hash + polling

• etc..

Cross Document Messaging

• cross-origin communication 定义了在 iframes/tabs/window 之间安全的跨源通信方案(using origin security)

• 定义统一的消息发送 API: PostMessage• 提供了 JavaScript 上下文之间的异步消息传递机制

Origin Concept

• 同源：同协议，同域名和同端口• 同源策略是客户端脚本（尤其是 Javascript ）的重要的安

全度量标准。• 它认为自任何站点装载的信赖内容是不安全的，只被允许

访问来自同一站点的资源，而不是那些来自其它站点可能怀有恶意的资源。

PostMessage Architecture

Browser Support for PostMessage

http://www.findmebyip.com/litmus#target-selector

A Original Demo

XMLHttpRequest Level 2

• XmlHttpRequest Level 2 (XHR2) 做了诸多改进：– cross-origin requests

– progress events

– the handling of byte streams for both sending and receiving...

• XMLHttpRequest Level2 allows for cross-origin XMLHttpRequest using Cross Origin Resource Sharing(CORS)

Cross Origin Resource Sharing

• 简单来说，就是跨域的目标服务器要返回一系列的Headers ，通过这些 Headers 来控制是否同意跨域。– 4 Syntax

• HTTP Response Header – 4.1 Access-Control-Allow-Origin

– 4.2 Access-Control-Max-Age

– 4.3 Access-Control-Allow-Credentials

– 4.4 Access-Control-Allow-Methods

– 4.5 Access-Control-Allow-Headers

• HTTP Request Header– 4.6 Origin HTTP Request Header

– 4.7 Access-Control-Request-Method

– 4.8 Access-Control-Request-Headers

API

<?phpheader('Access-Control-Allow-Origin: *');echo 'hello world.';

Crossdomain.php

var xhr2 = window.XDomainRequest ? new XDomainRequest : new XMLHttpRequest; xhr2.onload = function(){console.log(xhr2.responseText);}xhr2.open(“GET”, ’server..');xhr2.send();

client

Browser Support for XHR2

• Chrome 2.0+

• Firefox 3.5+

• Safari 4.0+

• IE 8.0+ // XDomainRequest

A Original Demo

Q&A

THANKS