ASVS V6.2.6 requires that password input fields use type="password" so the entry is masked. You may let users temporarily reveal the whole value or the last typed character. It is a Level 1 requirement.
Why it matters
People sign in on trains, in offices and during screen shares. A visible password ends up in screenshots and recordings.
Masking is cheap and users expect it. Browsers and password managers also rely on the correct input type to offer saving and autofill, so using the right type helps usability as well.
How to implement it
<label for="pw">Password</label>
<input id="pw" name="password" type="password" autocomplete="current-password">
<button type="button" aria-pressed="false" id="toggle">Show</button>
<script>
const pw = document.getElementById("pw");
const t = document.getElementById("toggle");
t.addEventListener("click", () => {
const show = pw.type === "password";
pw.type = show ? "text" : "password";
t.textContent = show ? "Hide" : "Show";
t.setAttribute("aria-pressed", String(show));
});
</script>
Reset the field to masked on form submit and when the tab loses focus if you can.
How to test it
Load each form that takes a password: login, registration, change, reset. Inspect the element and confirm type="password". If there is a toggle, confirm the default state is masked.
Add one automated check to your end to end suite that loads each form and asserts the input type, so a refactor cannot silently turn a field into plain text. Test on a mobile browser as well, since some custom widgets behave differently there.
Common mistakes
-
Using a text input styled with dots, which breaks password managers.
-
Showing the password by default.
-
Forgetting the confirm and the current password fields.
-
Putting the password into a URL, an alert box or a debug log, which masks nothing.
Quick check
Is a show password button allowed?
Yes, as long as the default is masked and the reveal is temporary.
