Code with confidence dynamic web content in metro style apps using html5
Download
1 / 27

Code with confidence: dynamic web content in Metro style apps using HTML5 - PowerPoint PPT Presentation


  • 374 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Code with confidence: dynamic web content in Metro style apps using HTML5' - deanna


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Code with confidence dynamic web content in metro style apps using html5 l.jpg

APP-476T

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

John Hazen

Principal Program Manager Lead

Microsoft Corporation


Agenda l.jpg
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


The windows runtime is easy and powerful l.jpg
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…


Users expect d ynamic c ontent l.jpg
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


Innerhtml call l.jpg

demo

innerHTML call


Who do you trust l.jpg
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


Familiar techniques l.jpg
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


Using iframe to separate content l.jpg
Using <iframe> to separate content

Trusted content

from local package

Untrusted content

not in local package

http://

ms-wwa:///


Using iframe to separate content9 l.jpg
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


Using local c ode in a web c ontext l.jpg
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


A familiar communication mechanism l.jpg
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


Using script in a local c ontext l.jpg
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>


Local context vs web context l.jpg

demo

Local context vs. Web context


Recap l.jpg
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:///


Authentication using oauth l.jpg
Authentication using OAuth

  • Easy and consistent user experience

  • Simple APIs for authentication


Web authentication l.jpg

demo

Web authentication

Socialite and MSDK sample


Recap17 l.jpg
Recap

  • Web Authentication Broker

    • Simple invocation

    • Consistent user experience

    • No direct access to user credentials

    • Great samples in the SDK



Dynamic web content enriches your apps when used wisely l.jpg
Dynamic web content enriches your apps when used wisely.


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


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


Build great apps build confidence l.jpg
Build great apps.Build confidence.


Related sessions l.jpg
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


Further reading and documentation l.jpg
Further reading and documentation

  • Secure Development of Metro style apps with HTML5

    • http://go.microsoft.com/fwlink/?LinkId=228386


Feedback and q uestions http forums dev windows com session f eedback http bldw in sessionfeedback l.jpg

thank you

Feedback and questions http://forums.dev.windows.com

Session feedbackhttp://bldw.in/SessionFeedback


Slide26 l.jpg

© 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.


ad