0
Html5<br /><html5><br /><figure>Communications</figure><br /><a href='mailto:leonguo@sohu-inc.com'>leonguo</a><br /><time>...
HTML5 Communication<br />HTML5 定义了两个增强型的文档通信模型<br />Cross Document Messaging<br />XMLHttpRequest Level2<br />
Widely-Used Models of CrossDomain <br />jsonp(JSON with Padding) + <script><br />document.domain + iframe<br />flash + cro...
Cross Document Messaging<br />cross-origin communication 定义了在 iframes/tabs/window 之间安全的跨源通信方案(using origin security)<br />...
Origin Concept<br />同源:同协议,同域名和同端口<br />同源策略是客户端脚本(尤其是Javascript)的重要的安全度量标准。<br />它认为自任何站点装载的信赖内容是不安全的,只被允许访问来自同一站点的资源,而不是...
PostMessage Architecture<br />
Browser Support for PostMessage<br />http://www.findmebyip.com/litmus#target-selector<br />
A Original Demo<br />
XMLHttpRequest Level 2<br />XmlHttpRequest Level 2 (XHR2)做了诸多改进:<br />cross-origin requests<br />progress events<br />the ...
Cross Origin Resource Sharing<br />简单来说,就是跨域的目标服务器要返回一系列的Headers,通过这些Headers来控制是否同意跨域。<br />4 Syntax<br />HTTP Response He...
API <br />client<br />var xhr2 = window.XDomainRequest ? new XDomainRequest : new XMLHttpRequest;<br />xhr2.onload = funct...
Browser Support for XHR2<br />Chrome 2.0+<br />Firefox 3.5+<br />Safari 4.0+<br />IE 8.0+ // XDomainRequest<br />
A Original Demo<br />
Q&A<br />
THANKS<br />
Upcoming SlideShare
Loading in...5
×

Hello communications(cn)

2,069

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,069
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • http://newclub.sohu.com/test/leon/h5_message/
  • http://newclub.sohu.com/test/leon/crossdomain.php
  • Transcript of "Hello communications(cn)"

    1. 1. Html5<br /><html5><br /><figure>Communications</figure><br /><a href='mailto:leonguo@sohu-inc.com'>leonguo</a><br /><time>2010.10</time><br /></html5><br />
    2. 2. HTML5 Communication<br />HTML5 定义了两个增强型的文档通信模型<br />Cross Document Messaging<br />XMLHttpRequest Level2<br />
    3. 3. Widely-Used Models of CrossDomain <br />jsonp(JSON with Padding) + <script><br />document.domain + iframe<br />flash + crossdomain.xml<br />server proxy<br />window.name + iframe<br />window.location.hash + polling<br />etc..<br />
    4. 4. Cross Document Messaging<br />cross-origin communication 定义了在 iframes/tabs/window 之间安全的跨源通信方案(using origin security)<br />定义统一的消息发送 API: PostMessage<br />提供了 JavaScript 上下文之间的异步消息传递机制<br />
    5. 5. Origin Concept<br />同源:同协议,同域名和同端口<br />同源策略是客户端脚本(尤其是Javascript)的重要的安全度量标准。<br />它认为自任何站点装载的信赖内容是不安全的,只被允许访问来自同一站点的资源,而不是那些来自其它站点可能怀有恶意的资源。<br />
    6. 6. PostMessage Architecture<br />
    7. 7. Browser Support for PostMessage<br />http://www.findmebyip.com/litmus#target-selector<br />
    8. 8. A Original Demo<br />
    9. 9. XMLHttpRequest Level 2<br />XmlHttpRequest Level 2 (XHR2)做了诸多改进:<br />cross-origin requests<br />progress events<br />the handling of byte streams for both sending and receiving...<br />XMLHttpRequest Level2 allows for cross-origin XMLHttpRequest using Cross Origin Resource Sharing(CORS)<br />
    10. 10. Cross Origin Resource Sharing<br />简单来说,就是跨域的目标服务器要返回一系列的Headers,通过这些Headers来控制是否同意跨域。<br />4 Syntax<br />HTTP Response Header <br />4.1 Access-Control-Allow-Origin<br />4.2 Access-Control-Max-Age<br />4.3 Access-Control-Allow-Credentials<br />4.4 Access-Control-Allow-Methods<br />4.5 Access-Control-Allow-Headers<br />HTTP Request Header<br />4.6 Origin HTTP Request Header<br />4.7 Access-Control-Request-Method<br />4.8 Access-Control-Request-Headers<br />
    11. 11. API <br />client<br />var xhr2 = window.XDomainRequest ? new XDomainRequest : new XMLHttpRequest;<br />xhr2.onload = function(){console.log(xhr2.responseText);}<br />xhr2.open(“GET”,’server..');<br />xhr2.send();<br />Crossdomain.php<br /><?php<br />header('Access-Control-Allow-Origin: *');<br />echo 'hello world.';<br />
    12. 12. Browser Support for XHR2<br />Chrome 2.0+<br />Firefox 3.5+<br />Safari 4.0+<br />IE 8.0+ // XDomainRequest<br />
    13. 13. A Original Demo<br />
    14. 14. Q&A<br />
    15. 15. THANKS<br />
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×