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
   

   View Slide

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
   

   View Slide

3. Copyright Sencha Inc. 2014 3
   This Session
   Introduction to Sencha Space
   Sencha Space Clients
   Sencha Space Admin Console
   Sencha Space API
   

   View Slide

4. Copyright Sencha Inc. 2014 4
   We all love HTML5 apps!
   

   View Slide

5. Copyright Sencha Inc. 2014 5
   We all love HTML5 apps!
   “Storing data within HTML5 applications
   is by it’s nature not really secure.”
   

   View Slide

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…
   

   View Slide

7. Copyright © 2014 Sencha Inc. 7
   Your sensitive data in somebody else’s hands.
   Watch Dogs
   

   View Slide

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!
   

   View Slide

9. Copyright © 2014 Sencha Inc. 9
   Sencha Space | Example of an XSS attack
   

   View Slide

10. Copyright © 2014 Sencha Inc. 10
    Sencha Space | Example of an XSS attack
    

    View Slide

11. Copyright Sencha Inc. 2014 11
    Introducing Sencha Space
    

    View Slide

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
    

    View Slide

13. Copyright Sencha Inc. 2014 13
    DEMO
    

    View Slide

14. Copyright Sencha Inc. 2014 14
    

    View Slide

15. Copyright Sencha Inc. 2014 15
    

    View Slide

16. Copyright Sencha Inc. 2014 16
    

    View Slide

17. Copyright © 2014 Sencha Inc. 17
    Sencha Space | Supported platforms
    Mobiles (phones & tablets)
    Desktops
    

    View Slide

18. Copyright Sencha Inc. 2014 18
    Scenarios
    

    View Slide

19. Copyright © 2014 Sencha Inc. 19
    Sencha Space | Scenario of an enduser
    

    View Slide

20. Copyright © 2014 Sencha Inc. 20
    Scenario of an end user
    Little Britain
    

    View Slide

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)
    

    View Slide

22. Copyright © 2014 Sencha Inc. 22
    Sencha Space | Sencha Space Client
    

    View Slide

23. Copyright © 2014 Sencha Inc. 23
    Sencha Space | Scenario of an enduser
    

    View Slide

24. Copyright © 2014 Sencha Inc. 24
    Scenario of a system administrator
    IT Crowd
    

    View Slide

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
    

    View Slide

26. Copyright © 2014 Sencha Inc. 26
    Sencha Space | Applications
    Sencha Space Admin
    Sencha Space Admin
    

    View Slide

27. Copyright © 2014 Sencha Inc. 27
    Sencha Space | Devices
    Sencha Space Admin
    

    View Slide

28. Copyright © 2014 Sencha Inc. 28
    Sencha Space | Users
    Sencha Space Admin
    

    View Slide

29. Copyright © 2014 Sencha Inc. 29
    Sencha Space | Groups
    Sencha Space Admin
    

    View Slide

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!
    

    View Slide

31. Copyright © 2014 Sencha Inc. 31
    Sencha Space | Settings
    Sencha Space Admin
    

    View Slide

32. Copyright © 2014 Sencha Inc. 32
    Sencha Space | Scenario of a software vendor
    

    View Slide

33. Copyright © 2014 Sencha Inc. 33
    Scenario of a software vendor
    

    View Slide

34. Copyright © 2014 Sencha Inc. 34
    Sencha Space | Cross platform deployment
    One code base.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

37. Copyright © 2014 Sencha Inc. 37
    Sencha Space | Branding your application
    Sencha Space Admin
    

    View Slide

38. Copyright © 2014 Sencha Inc. 38
    Sencha Space | Scenario of a developer
    

    View Slide

39. Copyright © 2014 Sencha Inc. 39
    Scenario of a developer
    Silicon Valley
    

    View Slide

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.
    
    HTML Code
    Ext.onSpaceReady().then(function(){
    // Space APIs
    });
    JavaScript Code
    Wait until Sencha Space has fully initialized
    before making any Space API calls.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

48. Copyright © 2014 Sencha Inc.
    48
    Sencha Space | Debugging
    • http://bit.ly/1tm8IEM
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

52. Copyright Sencha Inc. 2014 52
    Questions?
    

    View Slide

53. Copyright Sencha Inc. 2014 53
    Sencha
    Create amazing apps built on web standards
    lee@sencha.com | ladysign | http://www.speakerdeck.com/savelee
    

    View Slide