1 / 27

Code with confidence: dynamic web content in Metro style apps using HTML5

APP-476T . Code with confidence: dynamic web content in Metro style apps using HTML5. John Hazen Principal Program Manager Lead Microsoft Corporation. Agenda. Customer expectations for Metro style apps Blending Windows Runtime and dynamic web content

deanna
Download Presentation

Code with confidence: dynamic web content in Metro style apps using HTML5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. APP-476T Code with confidence: dynamic web content in Metro style apps using HTML5 John Hazen Principal Program Manager Lead Microsoft Corporation

  2. Agenda • Customer expectations for Metro style apps • Blending Windows Runtime and dynamic web content • New mechanisms built on familiar concepts • Demo and coding examples You’ll leave with examples of how to • Confidently integrate dynamic web content in your app • Easily authenticate your app with online services using OAuth

  3. The Windows Runtime is easy and powerful Windows Runtime Stored Data Network Access Web Camera User Location Encrypted Data Photo Library USB Drive Home Group And lots more…

  4. Users expect dynamic content Windows Runtime Stored Data Network Access Web Camera Web Services IM User Location Encrypted Data Photo Library Data Cloud Services RSS Feeds USB Drive Home Group And lots more… SMS

  5. demo innerHTML call

  6. Who do you trust? • Content you trust • You generated it • You tested it • You know you are not malicious • Untrusted content • Unknown source • Innocent mistakes • Risk of malicious intent

  7. Familiar techniques Wrap in an iframe • Content you trust • You generated it • You tested it • You know you are not • Untrusted content • Unknown source • Innocent mistakes • Risk of malicious intent

  8. Using <iframe> to separate content Trusted content from local package Untrusted content not in local package http:// ms-wwa:///

  9. Using <iframe> to separate content Local context Trusted content from local package Untrusted content not in local package Web context http:// ms-wwa:/// • Windows Runtime • innerHTML validation • Remote source not permitted • Same as browser <iframes> • No Windows Runtime W3C API

  10. Using local code in a web context Local context Trusted content from local package Trusted content that must interact directly with untrusted content Web context ms-wwa:/// ms-wwa-web:/// • Windows Runtime • innerHTML validation • Remote source not permitted • Same as browser <iframes> • No Windows Runtime W3C API

  11. A familiar communication mechanism Local context Trusted content from local package Untrusted content not in local package Web context http:// http:// ms-wwa:/// postMessage • Windows Runtime • innerHTML validation • Remote source not permitted • Same as browser <iframes> • No Windows Runtime W3C API

  12. Using Script in a local context • innerHTML and related operations • If script elements are found, the operation fails • Blocking accidental inclusion of script • Intent to use script can be expressed in code • Remote source references not permitted • Use web context iframes for remote code • <script src=http://contoso.com/script.js>

  13. demo Local context vs. Web context

  14. Recap • Local context • Full access to Windows Runtime • Default context for your app • Helps avoid accidental script execution • ms-wwa:// protocol • Web context • Works like the browser • No access to Windows Runtime • http:// and https://, as well as ms-wwa-web:///

  15. Authentication using OAuth • Easy and consistent user experience • Simple APIs for authentication

  16. demo Web authentication Socialite and MSDK sample

  17. Recap • Web Authentication Broker • Simple invocation • Consistent user experience • No direct access to user credentials • Great samples in the SDK

  18. Review

  19. Dynamic web content enriches your apps when used wisely.

  20. Windows 8 makes is easy to separate code you trust from code you don’t trust.

  21. Windows 8 provides simple mechanisms for proper authentication to great services.

  22. Build great apps.Build confidence.

  23. Related sessions • APP-512T : The web-to-Windows journey: turning your web assets into a Windows app • APP-929T: Best practices for writing safe and secure Metro style apps using HTML5 • APP-740T : Metro style apps using HTML5 from start to finish • PLAT-894T: Seamlessly interacting with web and local data • APP-784T: Power your app with Live services • PLAT-581T: Making apps social and connected with HTTP services

  24. Further reading and documentation • Secure Development of Metro style apps with HTML5 • http://go.microsoft.com/fwlink/?LinkId=228386

  25. thank you Feedback and questions http://forums.dev.windows.com Session feedbackhttp://bldw.in/SessionFeedback

  26. © 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

More Related