Prevent user to find password through Firebug/Chrome Dev Tools

Question

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?

Amritsar

I am not sure if I understand why you want to prevent a user seeing his password if she wishes to. Is there a use case that needs you to encrypt the user's password from the user himself? – Steinmetz

I would like the encryption from the website end for the browser. – Amritsar

But why do you want to encrypt it? The user can see her own password if she wishes to, can't she? Is there a use case when someone would need to reveal it in such a hack, unless for fun? – Steinmetz

If there is a form filler activated like Roboform or the password is saved in the browser due to 'Remember me', any user who has access to his/her computer can get the password easily. – Amritsar

Could autocomplete=off help you out in your situation? – Steinmetz

Thanks for the suggestion but it seems is ignored in modern browsers: #3868799 – Amritsar

Maybe something can be done in the password manager, to require the user to enter their local password before it will let the browser get the website password. – Cartography

@ManojKumar - What do you think of the answer? We can discuss this further if you can provide feedback. – Steinmetz

I will have to wait till the bounty period is over. I need some more answers from other's perspective. Maybe that have something to add to this. – Amritsar

The points are just a graphical representation of the characters for a password input, the value can be manipulated with document.getElementById('pass').value as well – Showplace

@ManojKumar: If that form filler or password manager does give the passwords to everyone who has access to the computer, then there is nothing - repeat, nothing - that your website can do against this. Your website isn't even involved in that attack vector. – Gilbert

@ManojKumar I updated my answer. The solutions provided here won't work for your use case. And again, most of the developers said it, you cannot prevent that. I know you try hard and you want to believe that there is a solution, but believe me: There is not with the browsers we use. – Steinmetz

@ManojKumar The answer is not correct and you should not have accepted it. I added a comment. – Steinmetz

@Elyasin: suppose a user's manager happens to log into the system to teach him a given feature, logging in with his (the manager) credentials. Now assume they are interrupted in the process, and the manager forgets to continue, leaving that window opened where it was. This is just an example. True, we are talking about edge cases, but this was a huge suprise for me, in terms of the vulnerability it offers. (By the way, this came to my knowledge after being reported by one of our clients.) – Matey

@Matey I don't doubt the use case, but I doubt there is a totally secure solution on client side – Steinmetz

Answer 1

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.

Esterify

Sad to see, that you believe that this is a workable solution. It won't work. I set a breakpoint in the debugger and read the value before any obfuscation. This is not a workable solution. Encryption or hashing has to take place on server side. – Steinmetz

It's sad to see you didnt understand I mean that the hash is generated server-side. – Esterify

I think you could have stated that more clearly. Maybe edit the answer to clarify. Passwords on server side are always stored in encrypted format. I don't see what you mean really. – Steinmetz

Answer 2

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:

1. There is no viable solution on client side. So your solution must work on server side.
2. On server side you can encrypt or hash the function. Please see this question for more details. I will discuss this further in the rest of this answer. You can opt for either solution, however implementation differs.

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.

Steinmetz

Answer 3

As it is clientside, there is no real way to prevent this. In terms of a security model: we can't trust the client. On the other hand, however, there is no real way to implement this differently without the use of a third party device.

If you're willing to go through the trouble of having a third party device assist in authentication: have the website generate and show a random seed, have the device ask for the seed and password to generate a hash, and authenticate on the site using the hash. Of course, the hash will still be visible if you use a web debugger, but at least there's no point in storing/reading it as the hash will differ for each session. This isn't completely secure either, by the way, as this method is prone to chosen plaintext attack.

Kudos if you're willing to go through all this trouble though. I suppose you could write an app for this to have a smartphone function as the third party device.

Sealy

This actually could work in the browser. You could hash the password on the fly without actually storing the password value. However, you run into the problem of passing the hash over the wire, which is arguably more dangerous than passing the plaintext password (if you're using the same hash function on the server). Even then, as you said, someone smart could simply alter the code through the dev console. – Grizzle

Answer 4

Absolutely not. You can't prevent the end user to manipulate the DOM from Developer tools or firebug.

Use of any client side trick can't prevent user to do that. Until or unless the browser restrict user's from doing that.

Cramped

Answer 5

    I believe the issue you are facing is multiple people using the same computer, and if one user saves their password on your site, then any one else that visits the site on the same pc will be able to manipulate the field to reveal the password.

    One way of preventing this from happening is to disable the auto-complete. autocomplete="off" Place this code in the input element and even if the password is saved, it shouldn't show up. <input autocomplete="off" type="text" required="" tabindex="2" class="std_textbox" placeholder="Enter your account password." id="pass" name="pass">

Pros
You don't have to worry about users sharing computers, and passwords being revealed for the most part.
Cons
Users may think their passwords are saved (and they can still save passwords) but when they get to your site, it will not show up.
NOTE This isn't the full-proof way of preventing users form manipulating the form and retrieving other users passwords.

As a side note, if the site does not refresh after entering a password and user name the web browser will not ask to save the password. For example, using an ajax call in stead of form submit.

You can use JavaScript to erase the text inside the password field when the page loads. A better style would be adding the field when the page loads with JavaScript like so:var x = document.createElement("INPUT"); x.setAttribute("type", "password");

An alternative to the autocomplete="off" autocomplete alternative It involves generating a name from the backend and using it as the name of the fields so that the autocomplete will never know where to put your users saved data

Prefatory

Thanks for the explanation but autocomplete=off seems to be ignored by modern browsers: #3868799 – Amritsar

You can use JavaScript to erase the text inside the password field when the page loads. A better style would be adding the field when the page load with JavaScript like so:var x = document.createElement("INPUT"); x.setAttribute("type", "password"); – Prefatory

I found an alternative to the autocomplete="off" autocomplete alternative It involves generating a name from the backend and using it as the name of the fields so that the autocomplete will never know where to put your users saved data. – Prefatory

Answer 6

Well it is not possible with current technology. Like others stated, you still can inspect all the client side code and try to manipulate the DOM.

The other solution is to implement like banking login. Randomise the password sequence every time user login. For example if password length is 10, give user three password fields, ask the sequence of password eg. 3rd, 5th, 10th. This will change every time user try to login. And in the server side you compare them.

Attach

Answer 7

Note: I think you should avoid doing this as it will break basic browser functionality.

But if you insist, you could make it harder for someone to reveal the password by "delegating" the typing to another input field and populating the password field with random characters.

Below is an example of one way to do so. Keep in mind that by no means does it prevent someone from retrieving the password from the request body directly or if they find your 'hidden' delegate element.

!function() {

    var passwordEl, delegateEl;

    function syncPassword() {
        passwordEl.value = 
            Array(delegateEl.value.length + 1).join('*');
    }

    function createDelegate() {
        delegateEl = document.createElement('input');
        delegateEl.style.position = 'absolute';
        delegateEl.style.top = '-9999px';

        delegateEl
            .addEventListener('keyup', syncPassword, false);

        document.body.appendChild(delegateEl);
    }

    window.addEventListener('load', function() {
        passwordEl = document.getElementById('passwordId');
        createDelegate();

        // steal the focus from the password input
        passwordEl.addEventListener('focus', function(e) {
            e.preventDefault();
            delegateEl.focus();
        }, false);

        syncPassword(); // clear if was auto completed

    }, false);
}();

Now you have the option of re-filling your password input with the correct password on form submit, or simply have your server expect the password to arrive from the delegated field.

If you fancy, you could add the appropriate styling to the password field when the delegate field is focused and thus give the user the impression that they are still focused on the password field itself.

But don't.

Outoftheway

Answer 8

As already said, having a password in an input element will let the user easily reveal password.

...And as @Elyasin asks, you really should let us know what your use-case is.

Being in the dark about your use-case, let's assume you have a website that users can subscribe to for a fee and you don't want multiple users sharing one person's login to get around paying your subscription fee.

You might use cookie authentication to check that a user is subscribed to your site.

1. When a new user subscribes, send them an email containing a link to a special registration page on your website.

2. When the user follows that link, place a cookie on the user's computer indicating they are a valid subscriber.

3. Create a landing page on your site. This landing page will read the cookie from the user's computer and authenticate that they are indeed a valid subscriber.

4. All other pages on your site must redirect users to the landing page if those users don't have the validating cookie.

5. Since un-subscribed users may be redirected to the landing page, you might offer to let them become subscribers on the landing page.

6. If a subscribed user's subscription has expired, you take the cookie off the (now unsubscribed) user's computer the next time they visit your site. Like any unsubscribed user, you redirect them to the landing page.

While it's true that cookies can be intercepted or stolen, it's usually beyond the casual user's ability to do so.

If you want more security using cookies, you can capture a user's IP address when they initially subscribe. Then you can verify that the user both has a validating cookie and also is accessing from the same IP address they originally subscribe from. Of course, this limits the subscribe to using only their original IP address to access your site.

Florin

Answer 9

You can use a simple Javascript code to store the password value in a variable onblur and then restore it onfoucs or/and onsubmit.

Look at the following demo code and its online demo here:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
<script>
password = '';
function setPasswordBack(){
  showPassword();
}
function hidePassword(){
  p = document.getElementById('pass');
  password = p.value;
  p.value = '*********';
}
function showPassword(){
  p = document.getElementById('pass');  
  p.type= "password"; 
  p.value = password;
}
</script>
</head>
<body>
<form action="" method="get" onsubmit="setPasswordBack()">
<input type="password" value="" name="password" id="pass" onblur="hidePassword()" onfocus="showPassword()" />
<input type="submit" />
</form>
</body>
</html>

It is clear that solution is JavaScript dependent solution, so in the case of disabling javascript, you may use noscript asking for JavaScript enabled browser.

Centrosymmetric

That's a really good try. Appreciate it, but still I can find the password by changing password to text and then click on the input element again. – Amritsar

@ManojKumar Look at the edit of showPassword() which applies change type to password again – Centrosymmetric

At this stage this solution is so simple, you can make it more complex by adding event listener to the field instead of using inline events and also getting it from external script file. – Centrosymmetric

The demo show that it submits the password as it is. look at the query string after press submit. – Centrosymmetric

Yes I saw the query string. Please also see Jacob's new comment. The logic seems same as your solution i.e. Setting a dummy password. I am analyzing both solutions. – Amritsar

The only drawback that I may see in this solution, is the deactivation of Javascript in the browser before loading the page. For this case, you may make obligatory Javascript enabled to access that page. i.e using something like <noscript> – Centrosymmetric

This does not solve your problem @ManojKumar. In Dev Tools go to console and simply type in 'password' to read the value. – Steinmetz

So, the only reasonable solution is using my solution to destroy the password. i.e don't set it to variable. @ManojKumar – Centrosymmetric

@sємsєм What do you mean with destroy exactly? If, by any means, the password is sent to the browser you cannot hide it really. You can only make it harder. I would set a breakpoint with the debugger and read the value before you can even hide or manipulate the password. – Steinmetz

The origin of this task is to hide the password from someone is not the owner of this password. The situation, exactly, may be demonstrated as someone use public computer, in cyber coffee for example, has been entered the password and for some reason, urgent phone call for example, the submit button has not be clicked and the computer has been left by the user, so this action is made to prevent others to view that password. Building on this fact, the destroying of the password entered is regarded. – Centrosymmetric

Answer 10

Well, you can't.

But then again. There is one way of course to prevent user never seeing it using Developer console - never display the INPUT field which has the password.

The alternative would be to emulate the field's behaviour so that it seems to be there, but isn't. I have not found a technically sound solution yet how it could be done, but here is one example how it might be done: (updated) http://jsfiddle.net/858kef4h/

In this example, the idea is to create a DIV based pseudofield which looks like password INPUT and is listening keypresses from the user and saving the value to a JavaScript variable

<div class="pwField">
  <div class="pwData"></div>
  <div class="cursor"><div class="tfarea"></div></div>
</div>

This simple hack just has three state variables for password, focus state and the hidden textarea

var pw = "", bHasFocus = false, tfArea;

The "cursor" class is toggled on / off using JavaScript to emulate real cursor

setInterval( function() {
   $(".cursor").toggleClass("blink");
},600);

When the div is clicked it creates a textarea at the place of the cursor and focuses to it.

$(".pwField").on("click", function() {
    // enable cursor and create element if needed
    $(".pwField").addClass("active");
    if(tfArea) { // if already created, just focus to the field
        tfArea.focus(); 
        bHasFocus = true;
        return;
    }
    tfArea = document.createElement("textarea");
    tfArea.value="";
    $(".tfarea").append(tfArea);
    tfArea.focus();   
    bHasFocus = true;
    $(tfArea).on("blur", function() {
        // disable cursor and exit
        $(".pwField").removeClass("active");
        bHasFocus = false; 
    });
});

Then you can listen to keyup/keydown and record the values

$(document).keydown(function(  ) {
    if(!bHasFocus) return;
    pw = tfArea.value;
    // print asterisks
    $(".pwData").html( asterisks( pw.length ) );
});

And when you are ready to login, the value is in the "pw" variable.

This dynamically created TEXTAREA may go unnoticed by the automatic password managers, because it is not the kind of INPUT -field the Password Managers are expecting to see.

The user which edits the field can naturally inspect the value of this element using the Chrome Developer tools, but the point here is, if the PW manager does not consider that field as a password -field it is not filling it with the password of the previous user.

I don't recommend using this, this was just made out of curiosity. The idea was to show that even though you can not prevent the user from seeing the elements, you may still be able hide the result from Password Managers. But like the old saying goes, "you can fool some of them some of the time, but not all of them all of the time".

The user experience is not the same as with standard input, but it could be improved. One problem is also that, even though you wanted to prevent the password to be shown, that may be what the users really want. They may want to user the Password Manager. But in this case you are out of luck anyway.

There may also be problems with the click, focus and blur with different browsers, they may not work with mobile devices as you expect. If this kind of hack is ever used, you should carefully tested. It could be used, if you know exactly what kind of browsers the users are using and you know they have JavaScript enabled.

EDIT: I tested the approach with some mobile devices and it seemed to somewhat work, but with iPad, and noticed that placing the hidden textarea will still create a visible cursor and change the zoom, so now the hidden textarea is placed inside the pseudocursor DIV and the zoom should follow it.

Intermix

Answer 11

You can't, and you shouldn't. This is not a security issue you should be tackling on your website. It's up to the user to keep their passwords safe. If I have the ability to use the dev console or otherwise inject javascript on your page, no matter what you do the user's passwords will still be compromised.

If a user chooses to save their passwords in their browser, then it's up to them to prevent them from falling into wrong hands, and there's absolutely nothing you can do about it on your site. In fact, if you're using Chrome and have passwords saved, navigate to chrome://settings/passwords and click on some password fields.

Other answers talk about hashing passwords etc. That's something you should definitely do, but on your server. You could of course hash or encrypt a password before sending it to your server (and you really should too, using https), but that's a completely different issue.

Calvinism

Answer 12

The premise of this question is that the client computer is compromised and is being used by someone who should not have access. Assuming that a password manager is in use (such as Chrome's) which does not require a master password before each login form auto-fill, there is nothing you can do to prevent the attacker from gaining access to accounts.

You are trying to solve a problem at the application level when the access problem is deeper than that.

Suppose Bob forgets to log out of his computer. An attacker (Eve) stumbles upon his open Windows session and wants to gain access to his PayPal account. Bob uses a password manager for multiple accounts, including his Gmail, Paypal, and Reddit accounts. Suppose PayPal took application level precautions to prevent Eve from learning Bob's password from a password manager's auto-filling. Eve thinks she will only be able to have control of Bob's PayPal account for as long as it takes for Bob to return. But then, Eve notices PayPal's password reset link feature. Bob's email account is also compromised because his password for it is also in the password manager. With access to Bob's email account, Eve can reset any of Bob's passwords that she wants. She could maintain access by installing a keylogger on Bob's computer.

Bottom line, the security concerns you are trying to address are beyond your power to address (assuming a conventional username password model). Even without assuming anything about your application, Eve has physical access to Bob's computer, so she could compromise it in a multitude of ways.

If you make your users use two factor authentication (send them a code via text message via Twilio), make them carry around a hardware usb key, etc...you will increase security and avoid the password manager problem at hand.

But ultimately, you face a trade-off of security and usability. If Bob is too lazy/forgetful/apathetic/negligent to log out of his PC, no amount of JavaScript you write can save him.

Doloresdolorimetry

Answer 13

Well , in 2019 there is a tricky way .. you can generate forms with JavaScript / jQuery over a div and you can put them on READ ONLY. If the attacker will disable JavaScript then the gen code will not work then will not be any form at well...

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <title>Basic security for mr. Hacker</title>
 </head>
 <body>
 <div id="ticketAF0122"></div><!-- it is assumed that id is generated every time !!!  -->
 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
 <script>
    $(document).ready(function(){
        function readonly(){
            $('div#ticketAF0122').html('My password<form method="post" action=""><input type="password" name="password"><input type="submit"></form>');
        }
        readonly()
        $('div#ticketAF0122').bind("DOMSubtreeModified", function(){
            readonly();
        });
    });
    /*

    Basicly you can load this part from an encoding external php file:
    <script src="page.php?ticket=ticketAF0122">< /script>

    and the php file generate something like:
    $(document).ready(function(){
        function readonly(){
            $('div#ticketAF0122').html('My password<form method="post" action=""><input type="password" name="password"><input type="submit"></form>');
        }
        readonly()
        $('div#ticketAF0122').bind("DOMSubtreeModified", function(){
            readonly();
        });
    });

    */

 </script>
 </body>
</html>

i already check this on xampp /windows 10 with firefox and changing with the inspector from type="password" to type="text" the script will "repair" again the things

in EDGE works buggy : when with Inspector i modify that stuff then all form is strip then inserted above html document

Unintelligible

Can you expose your local URL so that I can see? – Amritsar

@Amritsar not relevant anymore. . . . that was 2019 now they secure patch almost every browser so can be a problem that trick will work, so consider that history ... obsolete anyway was localhost/something but in chrome if you want to use this link you should replace http with https and to accept the security issue to work on a windows apache server for develop. in firefox isn`t any problem with localhost – Unintelligible

@Amritsar i am not looking tools to hide by change udp tuneling,using vpn,proxies or other stuff: I use a special protection and I can damage the update amazon certificate by hiding or staying nline anonymously and that will be an damage.I also using virtual OS layers traps for mr Hacker to study him for fun :) cheers ! – Unintelligible