appsmith
appsmith copied to clipboard
appsmithorg
[Bug]-[263]:Input widget set as password type will show the value while inspect even if it is masked
Is there an existing issue for this?
- [X] I have searched the existing issues
Description
I have a login form for authenticating my application. In that form password field is masked in the UI. But while I am inspecting the input widget , I can see the password value .
Steps To Reproduce
1.Open a page and include input widget as type password. 2.enter a value and inspect the page.
Public Sample App
No response
Version
Self hosted v1.7.4
Seem like the way we have implemented this is the challenge, A password field does not expose the value attribute in html source. But since we are all converting this to text type such that the end user can see what they typed, this is not working properly.
Here, is shows that editing a password field does not expose the value attribute because of -webkit-text-security: disc !important. We need to find out what our implementation will be
@somangshu can we ever solve this problem fully? Because let's say we fix the problem and don't show the value the user can still convert it to input type text in the console and see the password, which is again not preventable.
@dilippitchika the problem I think is with the html element in the source showing the password value. Not a web standard. The user explicitly taking the action to see it is fine, but this value attribute should not be exposed. This could easily lead to a breach if someone has a way to read the source.
@somangshu then is this a bug that can be fixed? or does it need a new property to be exposed to fix this like if our devs have a choice to disable show password only then this will work?
@dilippitchika Short answer: this is a bug. This is an implementation challenge, should be fixed internally, we dont need any additional property or config here
@AthiraVijayan21 thanks for commenting here. This is not yet prioritised, we have not yet figured out the right solution for this
cc @dilippitchika
Greetings @vickydonor-99 thanks for showing interest 🎉 , This is all your. Assigning this to you now.
Please don't forget to read the Contribution Guidelines. Would appreciate if you can open a PR within the next 2 days. let us know here
The point of a password field is to hide what you're typing in from anyone looking over your shoulder (which is why some password fields even allow you to unhide the password so that you can see what you're typing), not to make the information absolutely secret even to the web-inspector, which is basically impossible. Heck, it's always available via $0.value on the field.
On your local computer, you can always get the typed password, value property or not, even if your site uses TLS via HTTPS.
It's not actually hidden just because it's not visually in the markup on the Chrome element tab: it's literally a normal prop on the element in the console, on all sites. ($0.value)
The only password you can find through this method, though, is your own: in a field, you've just typed it into but not submitted. Obscurity is not security here, and obscuring the password in an html form is just a measure to avoid anyone looking over your shoulder to see it as you type it in, not to conceal it from the client browser, let alone its developer tools!
Thanks for the comment @iSatVeerSingh, its an interesting take from the user POV, I agree to your thought process.
One catch is that the source can actually hide the password as its shown in the MDN docs, seeing it on the console is however unavoidable and probably makes the point moot.
After a brief internal discussion, we have decided to go with the above suggestion, this is not really a bug.
We however want to give an option to the app dev to have an option to show / hide the eye icon visible to their end users. This property will be enabled by default.
@ginjojohny please let us know if that does not work in some way for you. We are open to hearing how this could be a challenge for you
@somangshu you are right. The password field value is hidden in the HTML source in inspect element. Although, it is always accessible on the client side as I explained above($0.value).
After a little bit of exploration on my own react project, I found that the problem is with react controlled component. When we add an onChange event listener on the input element in react and update the value of the input with the useState hook, this creates the value attribute in the source and sets the value we typed. That is why it exposes the password in inspect element. This does not happen in normal cases. Only with react controlled component.
Greetings @Vishrut19, thanks for showing interest 🎉 , You can definitely work on the issue, Please go though the thread to get an understanding of the requirement and let us know if you are confused. Assigning this to you for now,
Please don't forget to read the Contribution Guidelines. Would appreciate if you can open a PR within the next 2 days and let us know here.
Closing this issue for now as it does not pose any risk. We will look into this once to are working on any change in the implementation