<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Web on s20n blog</title><link>https://blog.s20n.dev/tags/web/</link><description>Recent content in Web on s20n blog</description><generator>Hugo 0.150.0</generator><language>en-us</language><lastBuildDate>Sat, 27 Apr 2024 23:04:33 +0530</lastBuildDate><atom:link href="https://blog.s20n.dev/tags/web/index.xml" rel="self" type="application/rss+xml"/><item><title>Keycase: Self-Hostable Cloud Based Password Manager</title><link>https://blog.s20n.dev/posts/keycase-password-manager/</link><pubDate>Sat, 27 Apr 2024 23:04:33 +0530</pubDate><guid>https://blog.s20n.dev/posts/keycase-password-manager/</guid><description>
&lt;p&gt;
&lt;img src="https://blog.s20n.dev/images/keycase-password-manager/banner.png" alt="/images/keycase-password-manager/banner.png" title="/images/keycase-password-manager/banner.png" /&gt;&lt;/p&gt;
&lt;p&gt;
&lt;a href="https://github.com/shriramters/keycase"&gt;Keycase&lt;/a&gt; is a browser based, self-hostable cryptographic password
manager. It is a chrome extension that lets you encrypt and store
passwords securely on firebase.&lt;/p&gt;
&lt;p&gt;
The passwords are encrypted at rest. So only the user&amp;#39;s browser is
able to decrypt them. Even firebase administrators with full
database access cannot decrypt the contents stored.&lt;/p&gt;
&lt;p&gt;
This is because all user data is encrypted with a personal RSA key
(unique to each user). This RSA key is itself encrypted and
stored along with the user record in firebase.&lt;/p&gt;
&lt;div id="outline-container-headline-1" class="outline-2"&gt;
&lt;h2 id="headline-1"&gt;
User Interface
&lt;/h2&gt;
&lt;div id="outline-text-headline-1" class="outline-text-2"&gt;
&lt;p&gt;
Users can sign in to keycase using Google Authentication (Domains
configurable).&lt;/p&gt;
&lt;p&gt;
Keycase requires a master password to decrypt the RSA private key of
the user which is stored in the cloud (firebase). This RSA key is used
to encrypt and decrypt user passwords.&lt;/p&gt;
&lt;p&gt;
&lt;img src="https://blog.s20n.dev/images/keycase-password-manager/welcome.png" alt="/images/keycase-password-manager/welcome.png" title="/images/keycase-password-manager/welcome.png" /&gt;&lt;/p&gt;
&lt;p&gt;
Once the master password is provided, the user is able to decrypt all
their passwords stored in the cloud. All cryptography happens on the
browser using the &lt;a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API"&gt;Browser Crypto API&lt;/a&gt;. This ensures that your data is
only ever decrypted on your computer.&lt;/p&gt;
&lt;p&gt;
&lt;img src="https://blog.s20n.dev/images/keycase-password-manager/passwords.png" alt="/images/keycase-password-manager/passwords.png" title="/images/keycase-password-manager/passwords.png" /&gt;&lt;/p&gt;
&lt;p&gt;
In the above image, we can see the user has five passwords stored. The
user can click on any of them to view details and copy the password.&lt;/p&gt;
&lt;p&gt;
&lt;img src="https://blog.s20n.dev/images/keycase-password-manager/details.png" alt="/images/keycase-password-manager/details.png" title="/images/keycase-password-manager/details.png" /&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div id="outline-container-headline-2" class="outline-2"&gt;
&lt;h2 id="headline-2"&gt;
How it works
&lt;/h2&gt;
&lt;div id="outline-text-headline-2" class="outline-text-2"&gt;
&lt;p&gt;
This is the sequence diagram depicting the workings of keycase. These
are the steps involved:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Login with google authentication&lt;/li&gt;
&lt;li&gt;Receive the AES encrypted RSA private key&lt;/li&gt;
&lt;li&gt;Regenerate the AES key from the user&amp;#39;s master password using PBKDF2&lt;/li&gt;
&lt;li&gt;Decrypt the RSA private key with the re-generated AES key&lt;/li&gt;
&lt;li&gt;Use the decrypted RSA private key and the RSA public keys to add,
update or delete values from the database.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;&lt;img src="https://blog.s20n.dev/images/keycase-password-manager/keycase-sequence.svg" alt="/images/keycase-password-manager/keycase-sequence.svg" title="/images/keycase-password-manager/keycase-sequence.svg" /&gt;&lt;/p&gt;
&lt;div id="outline-container-headline-3" class="outline-3"&gt;
&lt;h3 id="headline-3"&gt;
PBKDF2
&lt;/h3&gt;
&lt;div id="outline-text-headline-3" class="outline-text-3"&gt;
&lt;p&gt;&lt;a href="https://en.wikipedia.org/wiki/PBKDF2"&gt;Password Based Key Derivation Function 2&lt;/a&gt; is a cryptographic function
which can take a string (password) and generate an AES key out of
it. This is useful to us as we can then use this AES key to decrypt
our RSA key which can then be used to perform our operations.&lt;/p&gt;
&lt;div id="outline-container-headline-4" class="outline-4"&gt;
&lt;h4 id="headline-4"&gt;
Why not use the AES key directly
&lt;/h4&gt;
&lt;div id="outline-text-headline-4" class="outline-text-4"&gt;
&lt;p&gt;
Why do we need an RSA pair when we get a perfectly usable AES key from
PBKDF2? If the user wishes to change their master password (for any
reason), then we would have had to decrypt all the passwords and
re-encrypt them with the new AES key generated from the new password.&lt;/p&gt;
&lt;p&gt;
Using an RSA keypair eliminates the need for doing all this mass
re-encryption since we would only need to re-encrypt the RSA private
key with the new AES key.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div id="outline-container-headline-5" class="outline-3"&gt;
&lt;h3 id="headline-5"&gt;
Database Design
&lt;/h3&gt;
&lt;div id="outline-text-headline-5" class="outline-text-3"&gt;
&lt;p&gt;
The database for keycase is of a rather simplistic design. We are
using Cloud Firestore, which is a Document Database like MongoDB. We
have only two collections. viz. Auth and Passwords.&lt;/p&gt;
&lt;div id="outline-container-headline-6" class="outline-4"&gt;
&lt;h4 id="headline-6"&gt;
Auth
&lt;/h4&gt;
&lt;div id="outline-text-headline-6" class="outline-text-4"&gt;
&lt;p&gt;The Auth collection is used to store the user records.&lt;/p&gt;
&lt;p&gt;
&lt;img src="https://blog.s20n.dev/images/keycase-password-manager/auth-collection.png" alt="/images/keycase-password-manager/auth-collection.png" title="/images/keycase-password-manager/auth-collection.png" /&gt;&lt;/p&gt;
&lt;p&gt;
Each document represents one user record. The name of the
document is our user id. In the above image, we can see the user
record of our user with the id &lt;code&gt;QvyjDdGcgVNM3URaAPVswNHwdci1&lt;/code&gt;.
Here we&amp;#39;re storing the following details of the user:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;RSA Public Key&lt;/li&gt;
&lt;li&gt;AES Encrypted RSA Private Key&lt;/li&gt;
&lt;li&gt;Master Password Hash and Salt&lt;/li&gt;
&lt;li&gt;AES key IV&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div id="outline-container-headline-7" class="outline-4"&gt;
&lt;h4 id="headline-7"&gt;
Passwords
&lt;/h4&gt;
&lt;div id="outline-text-headline-7" class="outline-text-4"&gt;
&lt;p&gt;The Passwords collection is used to store all the user passwords.&lt;/p&gt;
&lt;p&gt;
&lt;img src="https://blog.s20n.dev/images/keycase-password-manager/passwords-collection.png" alt="/images/keycase-password-manager/passwords-collection.png" title="/images/keycase-password-manager/passwords-collection.png" /&gt;&lt;/p&gt;
&lt;p&gt;
Each user has one document in this collection where their passwords
will be stored. In the above image you can see the 5 passwords that
were depicted in the earlier screenshot, encrypted and stored as a
list.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div id="outline-container-headline-8" class="outline-2"&gt;
&lt;h2 id="headline-8"&gt;
Closing Words
&lt;/h2&gt;
&lt;div id="outline-text-headline-8" class="outline-text-2"&gt;
&lt;p&gt;
Keycase is a secure, self hostable password manager for your friends
and family. It is by no means perfect. If you find any gaping
blunders, please do reach out to me. My contact information is on this
website. Please also feel free to contribute your code and make
keycase better.&lt;/p&gt;
&lt;p&gt;
Until Next Time!&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;</description></item></channel></rss>