How to secure your data with Sencha Space

How to secure your data with Sencha Space
We all love HTML5 apps! Nowadays they perform so well, and they all can run across multiple devices with just one single code base! There is just one thing, which is often a bottleneck for (large) enterprises. The reason why these companies can’t choose their solution in HTML5 is because of data security! Local Storage, Session Storage, local databases, app cache and even cookies… they are not secure. Think about XSS attacks, stolen devices or your digital downloads available for purchase are for free available on torrent sites. A security breach can be easily made!
Introducing Sencha Space; the secure platform to deploy your HTML5 apps in. Let's see how to encrypt and develop code to optimize your apps for Sencha Space!

Transcript

1. Copyright Sencha Inc. 2014 1 How to secure your data with Sencha Space Lee Boonstra
2. Copyright Sencha Inc. 2014 2 lee@sencha.com ladysign http://www.ladysign-apps.com http://speakerdeck.com/savelee Lee Boonstra Sales Engineer & Technical Trainer
3. Copyright Sencha Inc. 2014 3 This Session Introduction to Sencha Space Sencha Space Clients Sencha Space Admin Console Sencha Space API
4. Copyright Sencha Inc. 2014 4 We all love HTML5 apps!
5. Copyright Sencha Inc. 2014 5 We all love HTML5 apps! “Storing data within HTML5 applications is by it’s nature not really secure.”
6. Copyright © 2014 Sencha Inc. 6 Sencha Space | Data in HTML5 apps App Cache Cookies Local & Session Storage Web SQL File System IndexedDB We all save data offline…
7. Copyright © 2014 Sencha Inc. 7 Your sensitive data in somebody else’s hands. Watch Dogs
8. Copyright © 2014 Sencha Inc. 8 Sencha Space | A security breach Hackers attacked your website with cross-site scripting (XSS) Your iPhone got stolen, or you lost your tablet A download saved to the file system is available a week later on a torrent site A security breach!
9. Copyright © 2014 Sencha Inc. 9 Sencha Space | Example of an XSS attack
10. Copyright © 2014 Sencha Inc. 10 Sencha Space | Example of an XSS attack
11. Copyright Sencha Inc. 2014 11 Introducing Sencha Space
12. Copyright Sencha Inc. 2014 12 Sencha Space | What is Sencha Space? Develop Deploy Manage Reduce the cost of developing secure, cross- platform mobile apps. Simplify app deployment for testing and production. Enforce policies to secure your users, data, and applications
13. Copyright Sencha Inc. 2014 13 DEMO
14. Copyright Sencha Inc. 2014 14
15. Copyright Sencha Inc. 2014 15
16. Copyright Sencha Inc. 2014 16
17. Copyright © 2014 Sencha Inc. 17 Sencha Space | Supported platforms Mobiles (phones & tablets) Desktops
18. Copyright Sencha Inc. 2014 18 Scenarios
19. Copyright © 2014 Sencha Inc. 19 Sencha Space | Scenario of an enduser
20. Copyright © 2014 Sencha Inc. 20 Scenario of an end user Little Britain
21. Copyright © 2014 Sencha Inc. 21 Sencha Space | Sencha Space Client Browser Download the Sencha Space Client iOS: http://bit.ly/1bvUxot Android: http://bit.ly/1aBKsrI Windows Phone: http://bit.ly/TK05J0 (or Windows & Mac desktop)
22. Copyright © 2014 Sencha Inc. 22 Sencha Space | Sencha Space Client
23. Copyright © 2014 Sencha Inc. 23 Sencha Space | Scenario of an enduser
24. Copyright © 2014 Sencha Inc. 24 Scenario of a system administrator IT Crowd
25. Copyright © 2014 Sencha Inc. 25 Sencha Space | Sencha Space Admin Console Browser Open the admin console http://manage.space.sencha.com Sencha Space Admin Log in to Sencha Space
26. Copyright © 2014 Sencha Inc. 26 Sencha Space | Applications Sencha Space Admin Sencha Space Admin
27. Copyright © 2014 Sencha Inc. 27 Sencha Space | Devices Sencha Space Admin
28. Copyright © 2014 Sencha Inc. 28 Sencha Space | Users Sencha Space Admin
29. Copyright © 2014 Sencha Inc. 29 Sencha Space | Groups Sencha Space Admin
30. Copyright © 2014 Sencha Inc. 30 Sencha Space | VPN Sencha Space Admin Setup VPN access, map applications to 
 setup a secure tunnel Great for applications behind firewalls!
31. Copyright © 2014 Sencha Inc. 31 Sencha Space | Settings Sencha Space Admin
32. Copyright © 2014 Sencha Inc. 32 Sencha Space | Scenario of a software vendor
33. Copyright © 2014 Sencha Inc. 33 Scenario of a software vendor
34. Copyright © 2014 Sencha Inc. 34 Sencha Space | Cross platform deployment One code base.
35. Copyright © 2014 Sencha Inc. 35 Sencha Space | Cross platform deployment Deploying with Sencha Space means no longer you have to deal with browser differences.
36. Copyright © 2014 Sencha Inc. 36 Sencha Space | Eliminate app store deployment The review process of various app stores can take a lot of time! Sencha Space can deliver directly to all end users. Eliminate native packaging.
37. Copyright © 2014 Sencha Inc. 37 Sencha Space | Branding your application Sencha Space Admin
38. Copyright © 2014 Sencha Inc. 38 Sencha Space | Scenario of a developer
39. Copyright © 2014 Sencha Inc. 39 Scenario of a developer Silicon Valley
40. Copyright © 2014 Sencha Inc. 40 Sencha Space | Getting started with the Sencha Space API if(Ext.isSpace) { // Space Specific } else { // Fallback } JavaScript Code Check to see if your app is running inside Sencha Space Include the Sencha Space API in your HTML5 project. <script src="http://space.sencha.io/space.js"></script> HTML Code Ext.onSpaceReady().then(function(){ // Space APIs }); JavaScript Code Wait until Sencha Space has fully initialized before making any Space API calls.
41. Copyright © 2014 Sencha Inc. 41 Sencha Space | Ext.Promise function getCustomResults() { var promise = Ext.Promise(); //code while pending, //for example a preloaded } JavaScript Code Ext.Promise is an Asynchronous API based on the Promises A+ spec. var success: function(result) { promise.fulfill(result); //code, to display the //promised result } JavaScript Code var failure: function(reason) { promise.reject(reason); //code, an error message with //the reason why it failed } JavaScript Code getCustomResults().then(success, failure); JavaScript Code Fulfill the promise or reject it. Now, let’s execute the method.
42. Copyright © 2014 Sencha Inc. 42 Sencha Space | Ext.space.Invoke Ext.space.Invoke.get('photos').then(send, failure); JavaScript Code The Invoke API allows Applications running inside a Sencha Space client
 to communicate. Applications can securely exchange 
 data with each other.
43. Copyright © 2014 Sencha Inc. 43 Sencha Space | Ext.space.Camera var promise = Ext.space.Camera.capture({ quality: 75, width: 200, height: 200, destination: 'file' }); promise.then(function(image){ //either URI to the image or data URI of the selected image. }); JavaScript Code Use the device camera.
44. Copyright © 2014 Sencha Inc. 44 Sencha Space | Ext.space.Downloads // list some details when the download completes function onComplete(download) { console.log("File finished: " + download.url); console.log("Size: " + download.totalBytes); console.log("Saved to: " + download.fileName); } Ext.space.Downloads.download({ url: “http://www.sencha.com/" }).then(onComplete); JavaScript Code Space API for downloading files. Downloadable objects become instances of: Ext.space.files.Download
45. Copyright © 2014 Sencha Inc. 45 Sencha Space | Ext.space.files.Collection //Create a collection of files var myCollection = Ext.space.SecureFiles.get(“secrets"); //To retrieve the file contents myCollection.get("someFile.txt").then(function(contents) { // got 'em }); //To write file contents myCollection.set("someFile.txt", "My new contents").then(function(file) { // `file` is the Ext.space.files.File that was written }); JavaScript Code Key/Value store for files. A collection represents a flat grouping of files in an application's file system, and it allows you to do basic CRUD operations on the files contained therein. Files become instances of: Ext.space.files.File. http://space.sencha.io/docs/api/Ext.space.files.Collection.html
46. Copyright © 2014 Sencha Inc. 46 Sencha Space | Ext.space.SecureFiles var files = Ext.space.SecureFiles.get('secrets'); files.get('myKey').then(function(contents){ // do something with the content of the file. }); //or query for files Ext.space.SecureFiles.query({ name: "*.txt" }).then(function(files) { // got 'em }); JavaScript Code Key/Value store for files. Files stored using this API are encrypted automatically using Sencha Space's security infrastructure.
47. Copyright © 2014 Sencha Inc. 47 Sencha Space | Ext.space.SecureLocalStorage var secrets = Ext.space.SecureLocalStorage.get('secrets'); secrets.set('myKey',object).then(function(){ //do something when done. }); secrets.get('myKey').then(function(object){ var a = object.field; }); secrets.forEach(function(key, value){}).then(function(){ // done. }); JavaScript Code Secure Local Storage is a key value store modeled around html5 localstorage, but it’s encrypted and not limited to 2-3mb.
48. Copyright © 2014 Sencha Inc. 48 Sencha Space | Debugging • http://bit.ly/1tm8IEM
49. Copyright Sencha Inc. 2014 49 Sencha Space | Much more Device API Connection API Notifications Push Notifications Orientation BarCode Application Fullscreen API Focus API Window API Profile API Storage SecureSQL Uploads File transfers
50. Copyright © 2014 Sencha Inc. 50 Sencha Space | Conclusion Sencha Space is a secure, cross-platform environment for the deployment of your desktop and mobile web apps. Data can be encrypted, and because you have an administrator panel, you can report, monitor and maintain application, user and device access. Applications within the Sencha Space can: • get access to the local stored and encrypted data. • get access to device APIs such as camera, downloads, etc.. • applications can invoke each other.
51. Copyright © 2014 Sencha Inc. 51 Sencha Space | Resources Sencha Space http://www.sencha.com/space Sench Space API examples https://github.com/sencha/SpaceExamples Sencha Space Guides: http://docs.sencha.com/space Sencha Space webinar: http://vimeo.com/86939052 Sencha Space blog posts: http://docs.sencha.com/space/1.0.0/sencha_blog.html
52. Copyright Sencha Inc. 2014 52 Questions?
53. Copyright Sencha Inc. 2014 53 Sencha Create amazing apps built on web standards lee@sencha.com | ladysign | http://www.speakerdeck.com/savelee