I need to be able to prevent the Save Password bubble from even showing up after a user logs in.
Autocomplete=off is not the answer.
I have not come across a post that offers a secure solution for this issue. Is there really no way to disable the password bubble in Chrome??
I found there is no "supported" way to do it.
What I did was copy the password content to a hidden field and remove the password inputs BEFORE submit.
Since there aren't any passwords fields on the page when the submit occurs, the browser never asks to save it.
Here's my javascript code (using jquery):
function executeAdjustment(){
$("#vPassword").val($("#txtPassword").val());
$(":password").remove();
var myForm = document.getElementById("createServerForm");
myForm.action = "executeCreditAdjustment.do";
myForm.submit();
}
password.val(""); password.attr("type", "text");. –
Rehm After hours of searching, I came up with my own solution, which seems to work in Chrome and Safari (though not in Firefox or Opera, and I haven't tested IE). The trick is to surround the password field with two dummy fields.
<input type="password" class="stealthy" tabindex="-1">
<input type="password" name="password" autocomplete="off">
<input type="password" class="stealthy" tabindex="-1">
Here's the CSS I used:
.stealthy {
left: 0;
margin: 0;
max-height: 1px;
max-width: 1px;
opacity: 0;
outline: none;
overflow: hidden;
pointer-events: none;
position: absolute;
top: 0;
z-index: -1;
}
Note: The dummy input fields can no longer be hidden with display: none as many have suggested, because browsers detect that and ignore the hidden fields, even if the fields themselves are not hidden but are enclosed in a hidden wrapper. Hence, the reason for the CSS class which essentially makes input fields invisible and unclickable without "hiding" them.
Add <input type="password" style="display:none"/> to the top of your form. Chrome's autocomplete will fill in the first password input it finds, and the input before that, so with this trick it will only fill in an invisible input that doesn't matter.
The best solution is to simulate input password with input text by replacing value with asterisks or dots manually.
I handled this with the following markup.
#txtPassword {
-webkit-text-security: disc;
}<form autocomplete="off">
<input type="text" name="id" autocomplete="off"/>
<input type="password" id="prevent_autofill" autocomplete="off" style="display:none" tabindex="-1" />
<input type="password" name="password" id="txtPassword" autocomplete="off"/>
<button type="submit" class="login100-form-btn">Login</button>
</form><input type="textbox" id="UserID" />
<input type="password" style="display:none"/>
<input type="textbox" id="password" />
<script>
function init() {
$('#password').replaceWith('<input type="password" id="password" />');
}
</script>
tested in Firefox and chrome working as expected.
I found no alternative with all the benefits I need so, created a new one.
HTML
<input type="text" name="password" class="js-text-to-password-onedit">
jQuery (replace with vanilla JS with same logic if you don't use jQuery)
$('.js-text-to-password-onedit').focus(function(){
el = $(this);
el.keydown(function(e){
if(el.prop('type')=='text'){
el.prop('type', 'password');
}
});
// This should prevent saving prompt, but it already doesn't happen. Uncomment if nescessary.
//$(el[0].form).submit(function(){
// el.prop('readonly', true);
//});
});
Benefits:
First of all I wanna tell you something.
When you take [input type="text"] and also [input type="password"]
Major browsers give you popup for that.
Now, replace [input type="password"] to [input type="text"]
then there is css for that
#yourPassTextBoxId{
-webkit-text-secutiry:disc
}
I've subverted this by using 2 regular text boxes. One to contain the actual password and one to function as a mask. I then set the password box's opacity to 0 and the mask text box is disabled - but the background color is set to white making it appear enabled. Then I place the password box on top of the mask box. In a jscript function I update the mask's text value to display a string of '*' characters with each keypress in the password box. Two drawbacks: the blinking cursor might now show depending on your browser. It shows in IE, but not Chrome or Firefox. There's a bit of a delay as the user is typing.
My code snippet is in asp:
$(window).ready(function() {
var pw = $('#txtPassword');
var mask = $('#txtMask');
$(pw).css('opacity', '0');
$(pw).keyup(function() {
var s = '';
for (var i = 0; i < $(pw).val().length; i++)
s = s + '*';
mask.val(s);
})
});style... .password {
font-family: monospace;
position: absolute;
background-color: white;
}Asp.net code:
<asp:TextBox runat="server" CssClass="password" Width="300" ID="txtMask" ClientIDMode="Static" MaxLength="30" Enabled="false" />
<asp:TextBox runat="server" CssClass="password" Width="300" ID="txtPassword" ClientIDMode="Static" MaxLength="30" />I had two issues with how browsers force their password behavior on you when working on a support-only login page within a regular page (the support login should never be saved):
So I combined two solutions I found on various stackoverflow posts and thought I'd post them here. I'm using jQuery, but the principle can be translated into regular JavaScript as well.
First, have your password field start as a text field and have JavaScript change it later - this gives a decent chance that the browser won't offer a saved password.
Second, just before submitting the form, set the password form back to being a text field, but hide it first so the password can't be seen. This could be made to look prettier by adding another text field when the password field disappears, but that's cosmetic only.
<form id="techForm" action="...">
<input type="text" id="username" name="username">
<input type="text" id="password" name="password"> <!-- this needs to start as a text field -->
<input type="submit" name="submit" value="submit">
</form>
<script type="text/javascript">
$(function()
{
$('#password').on('focus', function()
{
$(this).prop('type', password'); // this stops pre-saved password offers
});
$('#techForm').on('submit', function()
{
$('#password').hide().prop('type', 'text'); // this prevents saving
});
});
</script>
This worked for me on Firefox and Chrome as of 9/12/2017.
The only thing worked for me was adding a space to input's value after document ready and then deleting the space when user focused on the input.
$('.login-input').val(' ');
$('.login-input').on('focus', function() {
$(this).val('');
});
Simple and easy. Works on Chrome 64. In Firefox all you need is adding autocomplete="off" attribute to the input.
My own solution jQuery with PrimeFaces. Tested work in Chrome and Internet Explorer but in mozilla firefox (though not in Firefox)
<script type="text/javascript" charset="utf-8">
$(function(){
$('#frmLogin').on('submit',function(e){
$(PrimeFaces.escapeClientId('frmLogin:usuario')).replaceWith('<label id="frmLogin:usuario1" type="text" name="frmLogin:usuario1" autocomplete="off" class="form-control" maxlength="8" tabindex="2"/>');
$(PrimeFaces.escapeClientId('frmLogin:password')).replaceWith('<label id="frmLogin:password1" type="password" name="frmLogin:password1" autocomplete="off" value="" tabindex="3" class="form-control"/>');
$(PrimeFaces.escapeClientId('frmLogin:password1')).attr("autocomplete","off");
$(PrimeFaces.escapeClientId('frmLogin:usuario1')).attr("autocomplete","off");
$(PrimeFaces.escapeClientId('frmLogin:password_hid')).attr("autocomplete","off");
$(PrimeFaces.escapeClientId('frmLogin:usuario_hid')).attr("autocomplete","off");
});
});
</script>
<h:inputSecret id="password" value="#{loginMB.password}" class="form-control"
placeholder="Contraseña" tabindex="3" label="Contraseña" autocomplete="off" disabled="#{loginMB.bdisabled}"/>
<p:inputText value="#{loginMB.password_hid}" id="password_hid" type="hidden" />
If you choose to let Google Chrome save website passwords, you'll see a prompt every time you sign in to a new website. If you click Never for this site in the prompt, your password for the site is not saved and the site is added to a list of passwords that are never saved.
You can edit this list AND DISABLE THE PROMPT:
Click the Chrome menu Chrome menu on the browser toolbar. Select Settings. Click Show advanced settings. Click Manage saved passwords. In the Passwords dialog that appears, scroll down to the "Never saved" section at the bottom. To remove a site from this list, select it and click the X that appears the end of the row. Now revisit the website and you should see the prompt to save your password information again, if you've allowed Google Chrome to show the prompt.
© 2022 - 2024 — McMap. All rights reserved.
autocomplete=offis a bad idea, and that's just that. You cannot get around the problem because the Chrome people explicitly don't want you to. More info. – Subservience