Dave Weston Senior SDET Microsoft Corporation

Dave Weston Senior SDET Microsoft Corporation
1/14/2019 4:11 PM APP-929T Best practices for writing safe and secure Metro style apps using HTML5 Dave Weston Senior SDET Microsoft Corporation © 2010 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.

Agenda Isolating untrusted content using local and web contexts
Removing security threats from web data using filters Protecting stored secrets in your app Protecting private data over the network You’ll leave with examples of how to Safely incorporate web content into your app Use certificates to securely connect to remote servers

Integrated web content is a key element of connected and engaging apps, which also need to remain safe and secure.

Windows 8 provides the features to support secure apps, but features are not a replacement for smart development.

demo News demo

Elements of a secure Metro style app
Segregates untrusted from trusted content where possible Validates untrusted data to identify and remove code Protects customer data with secure storage methods Ensures the privacy and integrity of networked data using SSL

Segregating untrusted and trusted content

Problem: segregate trusted and untrusted code
Local Context Trusted Script from Local Package Web Context Untrusted Script from Internet ms-wwa:// Access to Windows Runtime Validation of innerHTML Top level DOM and iframes No Access to Windows Runtime No validation of innerHTML Only in iframes Both have access to W3C API

Solution: place untrusted content in web context
 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Local Context</title> </head> <body> <script type="text/javascript"> var openPicker = new Windows.Storage.Pickers.FileOpenPicker(); // ... </script> <iframe src=“ </iframe> </body> </html> © 2010 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.

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Local Context</title> </head> <body> <script type="text/javascript"> var openPicker = new Windows.Storage.Pickers.FileOpenPicker(); // ... </script> <iframe src=“ </iframe> </body> </html> <iframe src=" © 2010 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.

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Web Context</title> </head> <body> <script type="text/javascript"> var openPicker = new Windows.Storage.Pickers.FileOpenPicker(); // Generates an exception. </script> </body> </html> © 2010 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.

Problem: postMessage spoofing
1/14/2019 4:11 PM Problem: postMessage spoofing src=“ postMessage src="ms-wwa:///default.html" postMessage src= © 2010 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.

Solution: check postMessage origin
Insecure addEventListener(document, 'onmessage', function (e) { div.innerHTML = window.toStaticHTML(e.data); }); Secure addEventListener(document, 'onmessage', function (e) { if (e.origin == 'maps.bing.com') { div.innerHTML = window.toStaticHTML(e.data); } }); © 2010 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.

Problem: prevent untrusted resource sharing
1/14/2019 4:11 PM Problem: prevent untrusted resource sharing ms-wwa and ms-wwa-web share cookies, HTML5 local storage ms-wwa-web:// Web context Remote <script> Include App cookies ms-wwa:// Local context © 2010 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.

Solution: Use state APIs
1/14/2019 4:11 PM Solution: Use state APIs Consider the Windows.Storage.ApplicationData APIs to maintain state separation var localSettings = Windows.Storage.ApplicationData.current.localSettings; localSettings.values[name] = value; var value = localSettings.values[name]; © 2010 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.

Secure data validation

Problem: app integrates untrusted data
1/14/2019 4:11 PM Problem: app integrates untrusted data Untrusted Content Windows Runtime HTML5 Metro style App W3C APIs © 2010 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.

Solution: parse securely
Insecure var url = " WinJS.xhr({ url: url }).then( function (request) { var myObject = eval('(' + request.responseTxt + ')'); }, //error handling }); Secure var url = " WinJS.xhr({ url: url }).then( function (request) { var myObject = JSON.Parse(request.responseTxt); }, //error handling }); © 2010 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.

Solution: Use filtered APIs
1/14/2019 4:11 PM Solution: Use filtered APIs APIs that operate on markup and script are validated with the engine for window.toStaticHTML. innerHTML, outerHTML insertAdjacentHTML document.write() / writeln() DOMParser pasteHTML © 2010 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.

Solution: defend script sinks
1/14/2019 4:11 PM Solution: defend script sinks These explicit script sinks are not filtered The following should be used with care eval() execScript() setTimeout() setInterval() function() msWWA.execUnsafeLocalFunction() © 2010 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.

When in doubt, filter Choice 1: Make data content static
1/14/2019 4:11 PM When in doubt, filter Choice 1: Make data content static Make data static with createTextNode(), innerText Use an allow-list based routine to encode special characters Choice 2: Filter dynamic content window.toStaticHTML() Keeps safe content, throws away dangerous elements © 2010 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.

toStaticHTML Pre-Filter Post-Filter <!DOCTYPE html>
<html xmlns=" <head> <title></title> </head> <body> <div onclick="callToUnsafeCode();"> Safe markup content </div> <img src=" onclick="callToUnsafeCode();" /> </body> </html> <!DOCTYPE html> <html xmlns=" <head> <title></title> </head> <body> <div> Safe markup content </div> <img src=" </body> </html> © 2010 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.

Use safe APIs Insecure Secure
var myDiv = document.createElement("div"); myDiv.innerHTML = xhr.responseText; document.body.appendChild(myDiv); Secure // Approach 1 var myDiv= document.createElement("div"); myDiv.innerText = xhr.responseText document.body.appendChild(myDiv); // Approach 2 var myData= document.createTextNode(xhr.responseText); document.body.appendChild(myData); © 2010 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.

demo Validating data

Protecting stored secrets

1/14/2019 4:11 PM Problem: data leakage Connected Metro style apps authenticate to powerful online services and access user data Storing “raw” data and credentials can give attackers usernames and password in the event of a compromise Storing user data in the clear can lead to private information leaks © 2010 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.

Solution: Store data securely
1/14/2019 4:11 PM Solution: Store data securely Password vault A place to store small secrets, such as passwords and OAuth tokens Vault data can also roam with a users Connected Account. Vault data is safer if a security issue occurs in your app. Metro style apps in HTML5 support first class authentication OAuth Microsoft Account © 2010 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.

Server side authentication
1/14/2019 4:11 PM Server side authentication Security best practices for backend servers still apply Continue to require authentication for server side content Don’t assume apps are trusted clients Protect server side data This data will reach your app © 2010 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.

Protecting data in transit

Problem: unencrypted data is accessible
1/14/2019 4:11 PM Problem: unencrypted data is accessible Web Server Consumer Attacker © 2010 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.

Solution: forcing SSL connections
1/14/2019 4:11 PM Solution: forcing SSL connections Using SSL protects data on untrusted networks Sensitive user data is protected from snooping Network data is protected from tampering Forcing SSL-only in your Metro style apps is easy! New ms-https-connections-only META tag <meta name="ms-https-connections-only" value="true"/> Navigations to non-SSL content will raise an exception © 2010 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.

Solution: SSL with packaged certificates
Apps can take advantage of SSL connections, even without CA-provided certificates Package trusted certificates in your package Add a reference to the certificate in the package manifest SSL connections to the server are validated using the package certificate Windows also supports multi-factor authentication, with strong credentials such as smartcards

Using packaged certificates
demo Using packaged certificates

Elements of a secure Metro style app
Segregates untrusted from trusted content where possible Validates untrusted data to identify and remove code Ensures the privacy and integrity of networked data using SSL Protects customer data with secure storage methods

Security best practices are crucial for a safe and secure Metro style app in HTML5.

Windows 8 gives you everything you need to build a safe and secure Metro style app developed with HTML5.

Build great apps. Build confidence.

Related sessions [APP-476T] Code with confidence: dynamic web content in Metro style apps using HTML5 [APP-512T] The web-to-Windows journey: turning your web assets into a Windows app [PLAT-581T] Making apps social and connected with HTTP services Further reading Secure Development of Metro style Apps with HTML5 Creating a Metro style App for Banking

thank you Feedback and questions http://forums.dev.windows.com
Session feedback

1/14/2019 4:11 PM © 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. © 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.

Dave Weston Senior SDET Microsoft Corporation

Similar presentations

Presentation on theme: "Dave Weston Senior SDET Microsoft Corporation"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Dave Weston Senior SDET Microsoft Corporation

Similar presentations

Presentation on theme: "Dave Weston Senior SDET Microsoft Corporation"— Presentation transcript:

Similar presentations

About project

Feedback