For the passport input field:
<input type="text" required="" tabindex="2" class="std_textbox" placeholder="Enter your account password." id="pass" name="pass">
When the <input type="password">
is changed to <input type="text">
The password is revealed. This can be risky in systems which have saved passwords or generated from Password managers.
Can client side encryption be used in here? How can it be implemented?
You can't. It's an input field. The value property of an input field is going to be visible through the inspect element option of the dev tools.
Short answer: It can not be prevented, unfortunately. This is because all client-side code (JavaScript) is modifiable by the client itself - thus making a client-based security system vulnerable.
The only workable solution I can think of, is to store a hashed representation of the password, instead of the raw password. This will (if you disregard hash-bruteforce attacks) keep the raw password safe.
A hash is a representation of the original text, and is non-reversable. That is, the original string of characters can not be retrieved by any algorithm, using only the hash. Examples of hash' is MD5 and SHA. This technique is commonly used in routers, where password often is stored in the browser.
Clarification: Never store your passwords in plain-text, and if you want to adopt this technique of pre-entered password; the hashing and/or encryption must occur on server side.
I saw solutions in different answers. In all of them, it is just harder to see the password, but it does not prevent someone from seeing it.
Note: On client side JavaScript objects can be manipulated and inspected. In the solutions provided in other answers I could easily access the password information.
As others stated, you cannot prevent the user from viewing the password using developer tools on client side.
I could not think of a use case, but you mentioned automatic form filler and the Remember me option.
Automatic form filler, as far as I know are master password protected. They should be; I would not use one if I could not switch it on or off securely. In this case it is my responsibility to log out, whenever I am in situation of sharing a computer.
Remember me option, as often promoted by web sites, should only be used when it is your personal computer and you do not expect to share your device with another person. Don't use it or make sure no one else uses your account. Again, it is your responsibility.
Now, you still see a need to prevent such an attack. All I can come up with is the following:
If you use encryption, then you can always decrypt.
That might help you in the following scenario: Keep the password always encrypted. They should always match. However, when the user wants to change his password it will be clear text. The user cannot type it in an encrypted form. You have to solve that. There are solutions. I am sure you get that.
If you use (encrypted) hashing, then it is very hard to crack. You cannot decrypt it.
This might help you in the following scenario: The server sends only the hashed version. This way no attacker can use this information. You need to design it accordingly, but I imagine you figure that out too.
Having said that, I really don't see an acceptable use case for your requirement.
Let me explain why. You want to prevent an attacker from seeing the password in case a user remembers the passwords or uses an automatic form filler. Well, if an attacker is able to access a user's computer he would be able to simply log in, why bother seeing the password?
There is a reason why companies like Google or Facebook did not bring in a solution for your use case. The went another path and trying to push for increased security by 2-factor authentication
If you can use that, do it. It does not solve the issue completely, but you can expect it to increase security. In particular it is harder for an attacker.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With