De opties voor het onthullen van wachtwoorden

Heruitgegeven door Plato

volgers: 0

In HTML is er een heel duidelijk invoertype voor het omgaan met wachtwoorden:

<input type="password">

Als je dat gebruikt, krijg je onduidelijke opsommingstekens als je erin typt, zoals:

Dat is het internet dat probeert te helpen met de beveiliging. Als dat niet het geval zou zijn, is het klassieke probleem dat iemand over uw schouder meekijkt en bespioneert wat u invoert. Makkelijker dan kijken naar welke toetsen je vingers indrukken, denk ik.

Maar UX is een beetje geëvolueerd en het is veel gebruikelijker om een optie te hebben zoals:

☑️ Wachtwoord onthullen?

Ik denk dat het idee is dat we een keuze moeten hebben. De meesten van ons kunnen even rondkijken en zien of er nieuwsgierige blikken zijn, en als dat niet het geval is, kunnen we ervoor kiezen ons wachtwoord bekend te maken, zodat we zeker weten dat we typen [e-mail beveiligd] correct en zijn niet gemaakt om de pijn te lijden van het 8 keer verkeerd typen.

Dus! Wat moeten we doen?

Optie 1: Gebruik `type="password"`, en ruil het dan in voor `type="text"` met JavaScript

Dit is wat iedereen nu doet, omdat het momenteel in alle browsers werkt.

const input = document.querySelector(".password-input"); // When an input is checked, or whatever...
if (input.getAttribute("type") === "password") { input.setAttribute("type", "text");
} else { input.setAttribute("type", "password");
}

Het probleem hier – afgezien van het feit dat het gewoon een beetje raar is dat je alleen hiervoor de invoertypen moet veranderen – zijn tools voor wachtwoordbeheer. Ik wou dat ik hier de exacte details over had, maar het verbaast me niet dat knoeien met invoertypen elk hulpmiddel dat specifiek is ontworpen om wachtwoorden te zoeken en vooraf in te vullen, in verwarring kan brengen, misschien zelfs de hulpmiddelen die rechtstreeks in de browsers zelf zijn ingebouwd.

Optie 2: Gebruik `-webkit-text-security` bij CSS

Dit is geen echte optie, omdat je niet zomaar een totale invoer in sommige browsers kunt laten werken en in andere niet. Maar er was duidelijk een wens om deze functionaliteit op een gegeven moment naar CSS te verplaatsen, omdat het in sommige browsers wel werkt.

input[type="password"] { -webkit-text-security: square;
}
form.show-passwords input[type="password"] { -webkit-text-security: none;
}

Optie 3: `input-security` bij CSS

Er is een Editor's Draft-specificatie voor invoerbeveiliging. Het is eigenlijk een schakelwaarde.

form.show-passwords input[type="password"] { input-security: none;
}

Ik vind het leuk. Eenvoudig. Maar ik denk dat geen enkele browser dit nog ondersteunt. Dus redelijk realistisch gezien zitten we voorlopig vast aan optie 1.