Blazor中阻止Google密码管理器将自动填充密码显示为明文

这个问题是Chrome密码管理器的已知兼容性问题：当用户登录Google账号并使用自动生成密码功能时，浏览器会错误地将确认密码输入框的type属性从password改为text，导致密码明文暴露。以下是几个可行的解决办法：

1. 强制重置输入框的type属性 #

通过Blazor的焦点离开事件，强制将输入框的type属性重置为password：

@inject IJSRuntime JSRuntime

@page "/"
<form>
    <div class="form-group">
        <label for="password-input">Password</label>
        <input type="password" class="form-control" id="password-input" @onfocusout="() => ResetPasswordType("password-input")">
    </div>
    <div class="form-group">
        <label for="confirm-password">Confirm password</label>
        <input type="password" class="form-control" id="confirm-password" @onfocusout="() => ResetPasswordType("confirm-password")">
    </div>
</form>

@code {
    private async Task ResetPasswordType(string elementId)
    {
        await JSRuntime.InvokeVoidAsync("eval", $"document.getElementById('{elementId}').type = 'password';");
    }
}

2. 使用Blazor内置InputText组件 #

Blazor的内置表单组件能更稳定地维护输入框属性，避免浏览器篡改：

@page "/"
<EditForm Model="@registerModel">
    <div class="form-group">
        <label>Password</label>
        <InputText type="password" @bind-Value="@registerModel.Password" class="form-control" />
    </div>
    <div class="form-group">
        <label>Confirm password</label>
        <InputText type="password" @bind-Value="@registerModel.ConfirmPassword" class="form-control" />
    </div>
</EditForm>

@code {
    private RegisterModel registerModel = new();

    public class RegisterModel
    {
        public string Password { get; set; }
        public string ConfirmPassword { get; set; }
    }
}

3. 禁用浏览器密码管理器干预（需权衡体验） #

通过添加autocomplete属性，告诉浏览器不要对该表单进行自动填充或密码生成操作（会影响用户使用密码管理器的体验，需谨慎选择）：

@page "/"
<form autocomplete="off">
    <div class="form-group">
        <label for="password-input">Password</label>
        <input type="password" class="form-control" id="password-input" autocomplete="new-password">
    </div>
    <div class="form-group">
        <label for="confirm-password">Confirm password</label>
        <input type="password" class="form-control" id="confirm-password" autocomplete="new-password">
    </div>
</form>

内容的提问来源于stack exchange，提问作者Milo