How to protect (encrypt) data stored by webkit/local store

Question

I'm developing an app that uses the PhoneGap framework, and therefore is just a plain web-app that uses HTML5. As with many web-apps, my customer also wants data available when the device is offline. For those situations, I want to store data in the local store of the browser.

However, the customer also wants the data to be encrypted, so in case of a device loss no sensitive data gets into wrong hands. My current research brought up 2 possible approaches:

1) Encrypt any data using a JS encryption framework before storing in the local store. Since my app requires a user login, I could use the user password to derive encryption keys (user password is stored in the iOS keychain)

2) User iOS' data protection mechanisms https://www.apple.com/business/docs/iOS_Security_Guide.pdf

For 2), is it correct that enabling data protection in the developer portal (App IDs section) does not actually encrypt anything, but rather enables the possibility to encrypt specific files using the appropriate NSData or NSFileManager operations? Or can the whole sandbox be encrypted (including browser local store!) by enabling data protection on the App ID/provisioning profile level?

Is there any other recommended approach to secure the stored data in the browser's local store?

Answer 1

The first option works cross-device.

Two solid JS Encryption frameworks I found in my research are

• Stanford Javascript Crypto Library
• CryptoJS (faster than SJCL in my tests using AES-256)

Whatever you do, make sure the possible data used for deriving an encryption key (password in your example) is stored safely.