hello communications(cn)
DESCRIPTION
TRANSCRIPT
<html5><figure>Communications</figure><a href='mailto:[email protected]'>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