This post is a part 33 of Intel XDK Complete Tutorial post series.
In this tutorial I will show how to secure your local data by encrypting. Encrypting local data is important for every apps perspective.
Securing Cookies, LocalStorage, IndexedDB and SessionStorage Data
Intel XDK Apps usually store a lots of data locally i.e., using Cookies, WebSQL, LocalStorage, IndexedDB and SessionStorage. The data stored using these mechanisms is not trusted. There are many different ways hackers can exploit our app and read the information stored in these places. Therefore we should encrypt all the data we store using these mechanisms.
We can use Gibberish AES JavaScript encryption library to encrypt data. Here is an example how we can encrypt data using this library
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
@-ms-viewport { width: 100vw ; zoom: 100% ; }
@viewport { width: 100vw ; zoom: 100% ; }
@-ms-viewport { user-zoom: fixed ; }
@viewport { user-zoom: fixed ; }
</style>
<script src="lib/ft/fastclick.js"></script>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<script src="intelxdk.js"></script>
<script src="cordova.js"></script>
<script src="xhr.js"></script>
<script src="js/app.js"></script>
<script src="js/init-app.js"></script>
<script src="js/init-dev.js"></script>
<script src="https://cdn.rawgit.com/mdp/gibberish-aes/master/dist/gibberish-aes-1.0.0.min.js"></script>
<script>
var encrypted_message = GibberishAES.enc("This sentence is super secret", "key");
var deccrypted_message = GibberishAES.dec(encrypted_message, "key");
</script>
</script>
</body>
</html>
<html>
<head>
<title></title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
@-ms-viewport { width: 100vw ; zoom: 100% ; }
@viewport { width: 100vw ; zoom: 100% ; }
@-ms-viewport { user-zoom: fixed ; }
@viewport { user-zoom: fixed ; }
</style>
<script src="lib/ft/fastclick.js"></script>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<script src="intelxdk.js"></script>
<script src="cordova.js"></script>
<script src="xhr.js"></script>
<script src="js/app.js"></script>
<script src="js/init-app.js"></script>
<script src="js/init-dev.js"></script>
<script src="https://cdn.rawgit.com/mdp/gibberish-aes/master/dist/gibberish-aes-1.0.0.min.js"></script>
<script>
var encrypted_message = GibberishAES.enc("This sentence is super secret", "key");
var deccrypted_message = GibberishAES.dec(encrypted_message, "key");
</script>
</script>
</body>
</html>
Do not hardcode the encryption key. Hacker can reverse engineer your app and find the key. The key must be different for every user i.e., it should be produced based on user credentials. To decrypt or encrypt the stored message you can retrieve the key from server using TLS protected HTTP connection or else take the key input from user.
You can also send the encrypted data to your server and decrypt it there using Gibberish AES PHP encryption library
Securing Application Storage Files
Every Intel XDK apps gets a application storage space to store its files. The www directory is also stored in application storage. Files which we create our self using JavaScript can be encrypted by us. We need to encrypt the file data and then store it in the file. JavaScript files also have some critical application information. We cannot encrypt them as browser will not be able to decrypt automatically while interpreting. So avoid storing important information in JavaScript files.
