Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-ui] Spec input-security property #2495

Open
hober opened this issue Apr 3, 2018 · 8 comments

Comments

Projects
None yet
7 participants
@hober
Copy link
Member

commented Apr 3, 2018

An increasing number of sites have switched their login forms from using <input type=password> to <input type=text> for password input, in order to provide the ability to toggle display of the password text. This has the unfortunate side effect of preventing client-side password/account managers from correctly filling the form. We should spec the ability to toggle display of the contents of <input type=password> to help sites avoid breaking such account managers.

WebKit implements <input type=password> styling with a -webkit-text-security property, for which there are several polyfills out there for other browsers (e.g. noppa/text-security), so perhaps it's the right cowpath to pave here.

It's worth noting that it's sometimes desirable to obscure the text of other inputs—<input type=tel>, for instance.

@tabatkins tabatkins added the css-ui-3 label Apr 3, 2018

@FremyCompany

This comment has been minimized.

Copy link
Contributor

commented Apr 3, 2018

I just want to note that Edge allows the text of input type=password to be user-readable on user request, and that solves the use case for which websites convert their input type=password into type=text without introducing a new property.

I'd rather standardize this behavior than standardize the text-security property, to be quite honest. I'm always really surprised when I notice other browsers still don't have a button to show the value of a password textbox on user request.

@FremyCompany

This comment has been minimized.

Copy link
Contributor

commented Apr 3, 2018

image
image

@FremyCompany

This comment has been minimized.

Copy link
Contributor

commented Apr 3, 2018

The button is only available if you are typing the password. Autofilled values and javascript-filled passwords are not accessible through that button (but of course are via the DevTools)

@myakura myakura changed the title [ui] Consider specifying `text-security` property [css-ui] Consider specifying `text-security` property Apr 4, 2018

@frivoal frivoal added css-ui-4 Agenda+ F2F and removed css-ui-3 labels Apr 4, 2018

@fantasai

This comment has been minimized.

Copy link
Collaborator

commented Apr 4, 2018

It seems to me that adding a new value to text-transform would make more sense than adding a new property.

@fantasai fantasai added the css-text-4 label Apr 4, 2018

@jonjohnjohnson

This comment has been minimized.

Copy link

commented Apr 4, 2018

What if text-transform accepted a string, which covers more bases than the styles -webkit-text-security offers? Though less specific to security, it could be useful for "spoiler" visuals?

text-transform: '\0020\00B7\0020';
@frivoal

This comment has been minimized.

Copy link
Collaborator

commented Apr 4, 2018

@jonjohnjohnson Not saying this is the right answer for this particular issue, but if we're talking about allowing authors to define arbitrary text-transforms, I have this proposal: https://specs.rivoal.net/css-custom-tt/

@hober

This comment has been minimized.

Copy link
Member Author

commented Apr 4, 2018

@fantasai sure, adding a value to text-transform seems reasonable to me. While -webkit-text-security takes several values (offhand there's disc, square, and circle), I think we only need one, which means "please obscure the text in the manner of a native password field" or the like.

@hober hober changed the title [css-ui] Consider specifying `text-security` property [css-text][css-ui] Consider specifying `text-security` property Apr 4, 2018

@hober hober changed the title [css-text][css-ui] Consider specifying `text-security` property [css-text][css-ui] Add value to `text-transform` for obscuring text; use it to explain `<input type=password>` styling Apr 4, 2018

@css-meeting-bot

This comment has been minimized.

Copy link
Member

commented Apr 11, 2018

The Working Group just discussed obscuring text for `<input type=password>` styling, and agreed to the following resolutions:

  • RESOLVED: input-security: auto|none in UI 4 and applies to input type=password only
The full IRC log of that discussion <dael> Topic: obscuring text for `<input type=password>` styling
<fantasai> emilio: Your induction should include reading http://rhodesmill.org/brandon/2012/one-sentence-per-line/ :)
<dael> github: https://github.com//issues/2495
<emilio> fantasai: hah, thanks for the tip, will do :)
<fantasai> emilio, http://fantasai.inkedblade.net/weblog/2011/inside-csswg/ is likely also useful :)
<dael> myles: Currently input type=password has at least 2 different behaviors. One is password managers use this to do autofill. Another is the text you see is obscured. WE'd like to separate those things because we've seen content stop using input type=password because they want to control the obscure.
<dael> myles: Means password managers don't work.
<dael> myles: We'd like to split this. In the thread suggestion is to use text-transform so you can have a text-transform to say please obscure. Seems reasonable way to achieve this.
<dael> florian: Alternative was a dedicated property.
<dael> TabAtkins: If text-transform is used any existing password-inputs that have the text-transform applied would become unobscured.
<dael> TabAtkins: Might be small enough to not matter.
<dael> myles: I don't think we're amrried to a solution. But we could handle that case separately.
<dael> florian: Wouldn't that defeat the point, that people want to remove it so we want to allow people to not apply.
<dael> fantasai: You apply in UA stylesheet and text-transform:none turns it off. This breaks inheritance already.
<dael> emilio: Should we say only some kind of elements it applies to?
<dael> fantasai: text-transform option it applies to all. A sep text-security property you can say it's only that.
<dael> emilio: I'm not sure how easy it is to input
<dael> tantek: Additional use case in the issue mentions spoilers. We're seeing that with content warnings. text-security property might be worth exploring. THe cow path here is webkit introduced a new property for this, it's another data point.
<dbaron> I'm glad that <input type="text" style="text-transform: uppercase"> works today, as shown in http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A%3Cinput%20type%3D%22text%22%20style%3D%22text-transform%3A%20uppercase%22%3E
<dael> myles: We're interested in a solution we can all agree to.
<dael> florian: An earlier point, if we do this through txt-transform we want to allow them to use this value on other and do it on password fields. But if you accidently do text-transform:uppercase to a password field you unobscure. IS that rare enough it doesn't occur?
<dael> tantek: Even if it's rare the bad side is too high
<dael> myles: Could accept a set.
<dael> fantasai: Wouldn't fix the problem.
<dael> dbaron: If UA style sheet has obscure on input type password I think it's low-ish. Also given how mobile works I don't think it's horrible if someone messed that up in the past. In mobile you can kind of see the password.
<dael> eae: Interaction we're talking about is some way of showing the password I just typed in. Stikes me that's a feature that should be built in by the browser.
<dael> fremy: That's what we do.
<dael> myles: Impetus for this whole thing
<myles> q+
<dael> fremy: We already do it and it's better then if you do JS. We make sure you can only do it if it's not auto fill. WE do it better then any property. But I'm not opposed to saying if you have input type=pin you can't want that level of security.
<dael> florian: Authors are doing it because most browsers don't have this.
<dael> myles: We're bringing this up because it is happening today
<Rossen> q?
<myles> q-
<dael> fremy: If we're talking about changing browsers it's an option. It'll stop completely. It gets the feature that people want and I'm puzzled other browsers don't do that.
<dael> fremy: I agree why not spend the time to have this code. Then authors won't need to do this.
<dael> plinss: Raises and issue that there are number of controls where if peole show the password button and if browser gives it we should be able to remove it.
<dael> Rossen: When we originally shipped you can detect if the action is visible and based on this don't show yours. Or hide ours and put yours. We do the same for search.
<dael> tantek: supports can detect.
<dael> Rossen: In the beginning we had silly cases with two xs. People that cared either used our or theirs. In either case nothing else needed. For what fremy said in the beginning for all the pre-auto-full you can't show. So if I come to your computer and go to facebook I can't see your password.
<richr> eae above was me (richr)
<dael> plinss: For me using extensible web manifesto it would be ideal to have a mech to control and expose these features and then have css properties to set. Something you can polyfill.
<Rossen> q?
<dael> florian: You said some authors hide yours and use theirs for theirs having the property would be useful.
<dael> plinss: Let's explain native behavior we've had by css properties. Let's control the hide and pretend it's always on in the UA stylesheet. Let's build it from what we have.
<dael> myles: Question on Edge impl, one common UI is to show the character afte ryou type for 100ms. Can you do that?
<rego> it seems text-transform is not inherited in <input>: https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=5886
<dael> Rossen: Yeah. Behavior you desc we have for mobile when you're on touch. Idea is you're typing fairly slowly. We don't have it on by default. Feature is supported.
<dael> myles: Desktop?
<dael> Rossen: That's not exposed.
<dael> tantek: You don't want that responsibility on the website.
<dael> Rossen: We're not going to let people fiddle with our settings.
<dael> myles: So WG says make better password fields?
<dael> plinss: I think we need CSS to make those better out of CSS so other authors can reason with it.
<dael> tantek: WE want authors to use input type=password. That hooks into password managers and such like so authors can impl show me your password. For authros to turn input type=text into a password field I don't want to do that. Because then you have to hook into password managers.
<dael> plinss: I don't think we want type-text to take a password but we want type=password to be better.
<dael> fantasai: I think if you were wanting to obscure input type=numbers you don't want the spinner, you just want to restrict to numbers and there's ability for that. You use type=password and restrict to numbers.
<dael> plinss: Points to a flaw in input where type=password should be orthogonal to data type. I should be able to put in a number field that asks like a password.
<dael> tantek: And then you end up with a new attribute to the dom
<dael> plinss: I think it should be done, not here.
<dael> TabAtkins: Request to have password be manipulatable, given what the browsers attach it should be a separate text-security property.
<dael> plinss: And you might want an obscure with count of characters in the future.
<tantek> or obscure WITHOUT count of characters or implied number of characters (one "dot" • per pw char)
<dael> fantasai: issue with this. If we're giving the author abilityt o make password field no longer obscure we run into fremy problem where you auto-fill a password and that becomes visible.
<dael> TabAtkins: If you have visible access to a computer then you own it.
<dael> myles: It's an argument for not text transform so the browser can say it's a property and it's auto fill so we'll obscure anyway.
<dael> TabAtkins: Text-seurity
<dael> fantasai: no effect on anything other then password.
<dael> TabAtkins: Yes. We'll handle spoiler case differently.
<dael> myles: We want this only to apply to password related things.
<dael> tantek: Related use case
<dael> florian: Spoilers are reasonable for text-transforms.
<dael> plinss: We can remove restiction later.
<tantek> no, spoilers are not reasonable for text-transform
<dael> myles: inherited I guess.
<dael> fantasai: If it's inherited you want it to not ever expand in scope because people will set at root.
<dael> tantek: UA could still override it.
<dael> plinss: If someone turns on text security at the root and expect it to cascade if we expand you obscure the whole page.
<dael> TabAtkins: This isn't for spoilers. This is to involke UA password mechanism. It's for passwords.
<dael> smfr: And also not effect placeholder text, just password content.
<dael> Rossen: Which we all support.
<TabAtkins> s/visible access/physical access/
<dael> tantek: WE need to spec it's only password inputs
<dael> all: yes
<tantek> s/it's only/it only applies to
<dael> fantasai: Why aren't people impl by siwtching type to text and back?
<dael> tantek: Have you tried?
<dael> smfr: Password fields have special behavior, switching may have side effects.
<dael> myles: Not inherited?
<dael> TabAtkins: If it's inherited it won't do anything.
<dael> myles: Spec?
<dael> TabAtkins: UI
<dael> fantasai: I would say initial value is what browsers do by default. Why would UI style sheet set it?
<dael> TabAtkins: That's true. WE can make it inherit.
<dael> florian: I don't think it should be.
<dael> TabAtkins: What's cleaper? Not. Make it not inherited.
<dael> myles: New property with auto and 'do not obscure'
<dael> tantek: name is text-security
<dael> myles: text-security auto|??
<dael> florian: none
<dael> tantek: make it obvious.
<dael> fantasai: visible and hidden?
<dael> myles: always visible.
<dael> tantek: You might want to obscure the number of charater to plinss point. You can have different varients in the future.
<dael> florian: WE need to name adiquetly.
<dael> plinss: Auto is a good set up. None is fine for show as if there's no secity.
<dael> myles: We're satisfied.
<dael> tantek: What's the webkit value?
<dael> myles: I'll look.
<dael> fremy: If it's only password I'd like it called password-security.
<dael> fantasai: Makes sense.
<dael> tantek: Intent to broaden later?
<fantasai> password-visibility: visible | hidden
<dael> Rossen: It's such a specific feature tied in to so much internal logic so we want to have the ability to circumvent all complexity and let authors toggle. I think keeping it specific makes sense.
<dael> myles: Webkit we impl accepts disc, circle, square, none.
<dael> TabAtkins: That's the 3 bullet styles.
<dael> tantek: Why have the 3 styles?
<dael> myles: I don't think we should read into the design of this.
<dael> tantek: So auto?
<TabAtkins> password-security: auto | none
<dael> myles: password-security: auto|none
<dael> fantasai: What does none do? Other effects then what it looks like?
<astearns> +1
<dael> tantek: It sounds semantic, not visual. It's an argument for text-prefix.
<dael> fremy: [missed]
<leaverou> Would this work on other elements too?
<dael> tantek: You don't want to enable copy/paste
<dael> TabAtkins: Why not?
<fremy> s/[missed]/we want to enable copy and paste
<TabAtkins> leaverou, no, this is just for turning off password obscuration
<dael> plinss: If you can see it you can copy. What's the harm in control-c
<tantek> that seems like a bad idea from a security perspective
<dael> Rossen: password-securty:auto|none
<leaverou> TabAtkins: So it would do nothing when applied on <input />? That seems a bit confusing.
<dael> plinss: Maybe input-security?
<dael> plinss: Passwords, PINs and CVV are commenly secured. SSN
<dael> leaverou: bank account
<dael> myles: treating those as a password is okay
<dael> leaverou: then browser offers to save.
<dael> tantek: You don't want password type for CVV.
<dael> dbaron: I get asked that a lot.
<dael> myles: I think that's a feature.
<dael> leaverou: But then it overrites your password for the site.
<dael> myles: Use a better manager.
<dael> fantasai: Do you want SSN in auto fill or password maanger.
<dael> tantek: And now it's something password like again
<fantasai> s/maanger./manager?
<dael> plinss: There's policies about not retaining CVV for example. Let's not get into health and medical laws. Something slightly broader then passwrod is reasonable.
<dael> fantasai: secure-text
<Rossen> security: none
<fantasai> Florian: Disables https :)
<dael> myles: We have one proposal and a wish
<dael> plinss: input-type-security
<leaverou> text-redacted?
<dael> Rossen: Say it's only for input type=password only. If we need to extend it we may.
<astearns> s/-type-/-
<dael> Rossen: input-security: auto|none
<dael> Rossen: Objections?
<dael> rune_: none password fields?
<dael> Rossen: only input-type password.
<cbiesinger> s/rune_/cbiesinger/
<dael> Rossen: Let's re-cap. WE are designing a feature which will allow people to reveal or hide characters in an input type password element for now. There have been suggestions that type=password might not be the only type people want to hide information on. CVV and credit card numbers are common input form elements that want to obscure or not. Currently all browsers obscure input type=password and we want this to work. That's why we started with password-security
<tantek> I've also seen bank web UIs obscure *part* of "normal" text inputs, e.g. only showing first 3 letters of username (obscuring the rest), only showing last 4 digits of a credit card number (obscuring the first part)
<tantek> I prefer input-security or text-security over password-security
<dael> Rossen: Because other applications we wanted a door and say input-security: auto|none if we want to allow this in the future on type=text. That's the reasoning behind the naming. I agree with you for now, and we're going to spec it's password type only for now and if we change out mind there's a way out. If we don't the name isn't too terrible. It does have a bit more meaning.
<tantek> to allow expansion to other non-pw inputs
<tantek> s/expansion/sensible expansion
<dael> myles: Auto is just whatever is normal.
<dael> leaverou: security in the name seems weird for newbies, yOu're opening a security hole in the website.
<dael> Rossen: That's what you're doing.
<dael> myles: Cool.
<dael> Rossen: Objections to input-security: auto|none in UI 4 and applies to input type=password only
<dael> RESOLVED: input-security: auto|none in UI 4 and applies to input type=password only
<TabAtkins> (Well, it will apply to "password inputs", defined by the host language; HTML only defines <input type=password> to be that.

@hober hober changed the title [css-text][css-ui] Add value to `text-transform` for obscuring text; use it to explain `<input type=password>` styling [css-ui] Spec input-security property Apr 11, 2018

@frivoal frivoal self-assigned this Jun 6, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.