akashaorg / secure-webstore

A secure IndexedDB store with built-in encryption

Secure-webstore

This is a secure, promise-based keyval store that encrypts data stored in IndexedDB.

The symmetric encryption key is derived from the provided passphrase, and then stored in an encrypted form within the provided store name. The encryption key is only used in memory and never revealed.

The IndexedDB wrapper used internally is idb-keyval, while the cryptographic operations are handled by easy-web-crypto, a zero-dependency wrapper around the Webcrypto API available in modern browsers.

Huge thanks to @Jopie64 for Typescriptifying the source!

Installing

Via npm

npm install --save secure-webstore

Via <script> tag

Either host dist/cjs/secure-webstore.js yourself or use a CDN (e.g. jsDelivr) like this:

<script type="application/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cjs/secure-webstore.js"></script>

You can then use window.SecureStore to access the library.

Usage

Initialize

The init step takes care of key derivation and setting up the encryption/decryption key.

// Assuming you have loaded the secure-webstore module in your HTML file <script>
const Store = window.SecureStore.Store

const store = new Store('some-store-name', 'super-secure-passphrase')

store.init().then(() => {
  // store is ready
})

set:

store.set('hello', 'world')

Since this is IDB-backed, you can store anything structured-clonable (numbers, arrays, objects, dates, blobs etc).

All methods return promises:

store.set('hello', 'world')
  .then(() => console.log('It worked!'))
  .catch(err => console.log('It failed!', err))

get:

// logs: "world"
const val = await store.get('hello')
// console.log(val) -> "world"

If there is no 'hello' key, then val will be undefined.

keys:

// logs: ["hello", "foo"]
keys().then(keys => console.log(keys))

del:

store.del('hello')

clear:

store.clear()

destroy:

Completely remove a database.

store.destroy()

updatePassphrase:

Update the passphrase that is used for key derivation. The encryption key used for data will not be affected, just the key that protects it.

store.updatePassphrase(oldPass, newPass)

export:

Export all (encrypted) key/vals as one JSON object.

const dump = await store.export()

import:

// using the dump above
store.import(dump)

That's it!

secure-webstore's Issues

Typescript initialization

How can I init webstore in typescript ?...tutorial doesn't say anything about it...

Im getting error require is not defined

Buffer.from is not a function; Console & unit testing errors

Hi Andrei,

We love your npm package and are using it for a while now.

Error: Buffer.from() is not a function after updating to Angular 12 & removing webpack v4.

We've encountered a bug since we've updated our application to Angular 12. This update enforces webpack v5 via a peer-dependency. And from what we found there is a problem within secure-webstore being unable to find Buffer.from() and therefore it gives this error: `Error: Buffer.from() is not a function. This error occurs in both the console as in the unit-tests.

I searched the web and found something which might be interesting. This 'Buffer' was part of webpack 4. But is removed since webpack 5. And now that we can't use webpack 4 because Angular enforces webpack v5 as a peer-dependency.

I'm not sure how webpack is related to secure-webstore and i'm not sure the issue is really in the area i've just described. I hope you know more about this issue and might know a solution.

To Reproduce
Use secure-website in combination with Angular12 and make sure there is no direct dependency to webpack ( as it is a peer-dependency of @angular-devkit/build-angular )

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots

Desktop (please complete the following information):

• OS : Windows ( but not important for this case i guess.
• Browser: Chrome
• Version of secure-webstore: latest (v1.3.5 - security updates)

Thank you again for your great package. Hope to hear from you.

Kind regards,

Arjen

Getting Master Key not Initilized error

hi,

1. I am Getting Master Key not Initialized error when I released the code to Testing Environment
2. I am only using secure-store.js and including in the bundle (asp.net)
3. shall I include any other library file in my solution because in Localhost it works fine but not when I deployed to QA environment

4. in the init().catch() block below error returned
   

Webstore instance lost on page refresh

I'm using vue js 2. I have a main file with this code:

 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'

const Store = require('secure-webstore').Store

const store = new Store('user_data', 'lachiquichiqui89')

store.init().then(() => {
  // store is ready
})

Vue.prototype.$store = store

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

This is working fine...I already store some data in indexeddb....but when I refresh the page, I think maybe the instance is lost, because I'm getting this error trying to get the store object inside a component:

Error: Master key not initialized
at Store.get key [as key] (secure-webstore.js?ee28:31)
at Store.eval (secure-webstore.js?ee28:87)
at Generator.next (<anonymous>)
at fulfilled (secure-webstore.js?ee28:4)

And data it's ok!!, so I don't know how to solve it...please help!

Throwing Error: Cannot read properties of undefined (reading 'importKey') on Store.init()

Works fine on Local.
But when static hosting from AWS s3, and running then it throws:
Error: Cannot read properties of undefined (reading 'importKey') at Gl.<anonymous> (index-DclS6h2h.js:22:30109) at Generator.throw (<anonymous>) at u (index-DclS6h2h.js:22:29467)
in Store.init()

Not working with vue 2

I try to set up with vue 2, like this:

`

 import Vue from 'vue'
 import './plugins/axios'
 import App from './App.vue'

 const Store = require('secure-webstore')

 const store = new Store('user_data', 'lachiquichiqui89')

 store.init().then(() => {
   // store is ready
 })

Vue.prototype.$store = store

new Vue({
 router,
 render: h => h(App)
}).$mount('#app')`

But gives me this error Uncaught TypeError: Store is not a constructor

get all the records stored in the store

Hi,
how can i get all the records stored the object store in a single go.
ex: in plain javascript terms getAll() will give me all the records stored in the objectstore in a single go

The future of secure-webstore

Hi @Jopie64 and @Arjen-1! I'm really glad to know you find this lib useful. Would you like to get in touch to discuss its future? For instance what you would like to see improved, any new features (e.g. support for other encryption algorithms, etc.).

You can contact me at [email protected].

Losing reference to the existing Store object on memory

We are currently using the library to some user specific data in indexed db in encrypted form, but when the page is refreshed, although initialising the store again references the store with the same name and passphrase stored in the IDB but a new encryption key is generated and thus cant decrypt the existing encrypteddata in IDB. Any way to get the same key with the same passphrase everytime the store object is initialised? Currently we are thinking of storing the store object somehwere but that wouldnt be very secure.

"Promise { <state>: "pending" }" after try to get data

I finally could create a DB and it's working fine: caption . But there is a problem when I try to get data in vue 2 project.

First when I try: await store.get('info') . I get error "can not use await outside async function".
So I try this:

    let data = (async () => { await self.$store.get('info') })();
    console.log(data)`

And it seems to pass, except by the console that prints this:
Promise { "pending" } ​ <state>: "fulfilled" ​ <value>: undefined

So I can't get the data from my DB, I hope you can help me, thanks!!

Blob question

Hi Guys,

Thank you for a great library. Having some trouble with blobs and wondering anyone can point me in the right direction. I am creating a valid blob that can be played via HTML5 audio tag using URL.createObjectURL(). The issue I am having is that when I store the blob and then get() it, the object returned is not a blob. Wondering if blobs need to be handled differently in any way? I can set() a string "json" and get() it just fine, issue is only with blobs.

let blob = new Blob(chunks, { 'type': mimeType });

store.set(id, blob)
  .then(() => console.log('Audio saved!'))
  .catch(err => console.log('Audio save failed!', err))
   
store.get(id).then((data) => {
	// data returned is Object but not a valid blob
})

Thanks

Add method to delete database

Support for TypeScript

See issue AKASHAorg/easy-web-crypto#6 for the rationale. Actually this would be the same issue if it weren't 2 separate projects.

How to load client-side in a browser?

When I load the script in a browser, I get the error below?

<script type="application/javascript" src="./secure-webstore.js"></script>

ReferenceError: Can't find variable: require

What else is needed to load the script client-side?