I have a web app that includes third party websites in iframes. The 3rd party websites require user to be logged in them. Option A is to require the user to login to each website individually via iframes and rely on cookies to remember the user. That however is quite inconvenient and some users would definitely prefer a one login for all websites so that's my option B:
It relies almost entirely on frontend security and encryption.
First, storing the password. Every user has a password (main password) to my web app. The password, besides being used for logging in to my website, would also be used to encrypt user credentials from user's websites. So credentials are encrypted using the main password on my server and only the user could decrypt them. This is where I have a question, would I just need to encrypt it using the password alone, or some magic secret keys or some stuff could be used to strengthen encryption?
Overall process:
- User logs in to my web app.
- Main password is stored in browser memory for further use
Pulling encrypted credentials from server and decrypting it on the frontend, using the main password
decrypted credentials are stored in browser memory
open login iframe and send credentials using postMessage to the login iframe (origin validation included)
log in automatically (I have integration plugin for the sites, that's why I would be able to do it).
Note that logging in to web app and decrypting credentials are 2 different processes. If the user refreshes website, is still logged in, he cannot access the credentials. He will be asked for the password again. That's not a problem, since the session from third party websites will be remembered by the browser anyway.
So the frontend data would be protected from iframes by web security and as long as I make sure there are no XSS sinks on the web app, there's no way these passwords are leaking, am I right? Even if the server was compromised.
The only way I see it, if the server was compromised and someone edited the frontend code to be malicious and grab the passwords. But that is something that would always be dangerous, even if I didn't implement autologin at all.
I just want your opinion if that's a secure way to store and use passwords and what could potentially go wrong. Especially, is it safe to store passwords in javascript memory and how to encrypt credentials - use just the user password or maybe add some secret token to that password (don't know if that makes sense). Anything that would make it more secure. Any help appreciated.