Your SlideShare is downloading. ×
Hello communications(cn)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Hello communications(cn)

2,052

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,052
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • http://newclub.sohu.com/test/leon/h5_message/
  • http://newclub.sohu.com/test/leon/crossdomain.php
  • Transcript

    • 1. Html5
      <html5>
      <figure>Communications</figure>
      <a href='mailto:leonguo@sohu-inc.com'>leonguo</a>
      <time>2010.10</time>
      </html5>
    • 2. HTML5 Communication
      HTML5 定义了两个增强型的文档通信模型
      Cross Document Messaging
      XMLHttpRequest Level2
    • 3. 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..
    • 4. Cross Document Messaging
      cross-origin communication 定义了在 iframes/tabs/window 之间安全的跨源通信方案(using origin security)
      定义统一的消息发送 API: PostMessage
      提供了 JavaScript 上下文之间的异步消息传递机制
    • 5. Origin Concept
      同源:同协议,同域名和同端口
      同源策略是客户端脚本(尤其是Javascript)的重要的安全度量标准。
      它认为自任何站点装载的信赖内容是不安全的,只被允许访问来自同一站点的资源,而不是那些来自其它站点可能怀有恶意的资源。
    • 6. PostMessage Architecture
    • 7. Browser Support for PostMessage
      http://www.findmebyip.com/litmus#target-selector
    • 8. A Original Demo
    • 9. 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)
    • 10. 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
    • 11. API
      client
      var xhr2 = window.XDomainRequest ? new XDomainRequest : new XMLHttpRequest;
      xhr2.onload = function(){console.log(xhr2.responseText);}
      xhr2.open(“GET”,’server..');
      xhr2.send();
      Crossdomain.php
      <?php
      header('Access-Control-Allow-Origin: *');
      echo 'hello world.';
    • 12. Browser Support for XHR2
      Chrome 2.0+
      Firefox 3.5+
      Safari 4.0+
      IE 8.0+ // XDomainRequest
    • 13. A Original Demo
    • 14. Q&A
    • 15. THANKS

    ×