Safari saved passwords are overriding autocomplete="off" in forms

Question

I have done a ton of research towards this issue, but I can't seem to find anything that solves my problem.

I have autocomplete="off" set on my form tag, and all of my input tags as well, yet Safari continues to input auto saved passwords into my form on page load, which is causing an undesired keydown event on the form in my JavaScript.

Any thoughts? I've tried all sorts of hacks like deleting those input fields from the code entirely, and then using javascript and a setTimeout to insert them into the page after a few seconds, but even after that Safari still throws in its saved passwords to my inputs.

I've also tried using the autocorrect="off" and autocapitalize="off" attributes in my and tags.

I've tried Javascript hacks like so (example):

$(function() {
    $('input').attr('autocomplete', 'off');
});

So that every input field on the page on load has this attribute, and yet Safari still inserts its saved passwords into the fields.

Yes, the page is using html5 doctype (Because I know autocomplete won't work without it).

Here is my code:

  - form_for @website, :html => {:class => 'fields', :autocomplete => 'off'}, :url => {:controller => 'signup', :action => 'connect'} do |form|
    %h3 Enter URL
    %ol.fields
      %li
        = form.label :url, "Website URL:"
        = form.text_field :url, :placeholder => "Website URL", :autocomplete => "off", :class => "website_url"
    %h3 Enter Credentials
    - form.fields_for :authentication do |aa|
      %ol.fields
        %li
          = aa.label :hostname, "SFTP/FTP Server:"
          = aa.text_field :hostname, :placeholder => "SFTP", :autocomplete => "off"
        %li
          = aa.label :account, "Username:"
          = aa.text_field :account, :placeholder => 'Username', :autocomplete => "off"
        %li
          = aa.label :password, "Password:"
          = aa.password_field :password, :placeholder => 'Password', :autocomplete => "off"

The above is in haml. It is a ruby application. It is inserting my passwords into the :account input, and the :password input. I have tried wrapping the 'name' part of my :account input in span tags like so:

User<span>n</span>ame

because of the 'name' word being a trigger for autosaved passwords, yet safari still throws its saved passwords into my form after that attempt at solving this.

I would greatly appreciate some new tips I could try. Everything I've found so far for this problem, people just say "use autocomplete="off." I am, but it's not working!

Also, I've been testing this with Safari 6.1.2, but have confirmed this strange behavior with older and newer versions of Safari as well. Link to screenshot of browser inspect, so I do know the autocomplete="off" attribute is properly being added to the elements: http://imgur.com/Sgqn7A4

Answer 1

Looks like Safari, and others have decided to stop honoring this attribute.

https://discussions.apple.com/message/25149138#25149138

http://blog.gerv.net/2013/10/ie-11-ignoring-autocompleteoff

// Override Safari, Chrome and IE11 decision to ignore autocomplete: off
// on form you wish to skip autocomplete, change all password fields to type=private
// requires jQuery

$(function() {
  $('input[type="private"]').focus(function(e){
    $(this).prop('type', 'password');
  });
  $('input[type="private"]').parents('form').submit(function(){
    $(this).find('input[type="password"]').hide().prop('type', 'private');
  });
});

Answer 2

In Mac Safari does not respect autocomplete="off" into tags. It looks for combination of email and password and fills them automatically.

As I had the same problem where I have two fields.

<input type="text" name="email" id="email" value="" placeholder="Enter Email">
<input type="password" name="password" id="password" value="" placeholder="Enter Password">

As safari looks for combination of text and password in this case for autofill the fields with values saved in browser cookies.

You just need to do two things.

<input type="password" name="email" id="email" value="" placeholder="Enter Email" onfocus="this.type='text'">

1. Change email field type to password instead of text when form loads or page loads.
2. For onfocus event with javascript change type for field to be text which is required.

This is just a hack.If anyone else have better solution please post.

Answer 3

@t_itchy's solution fails in Firefox, as it initially prevents the value from being entered, but as soon as you give a password field focus, the password is added to it. The following solution is edited from his, and manipulates the maxlength property to prevent the password from being present. Further, since Firefox behaves oddly when blurring a password field, it also reverts the password field to private on blur if it is empty.

// Override Safari, Chrome and IE11 decision to ignore autocomplete: off
// on form you wish to skip autocomplete, change all password fields to type=private
// requires jQuery

// External function for removing maxlength restriction - apparently required
function removemaxlength(me) {
    window.setTimeout(function() {me.prop('maxlength',100)},100);
}

$(function() {
    $('input[type="private"]').focus(function(e){
        $(this).prop('maxlength',0).prop('type', 'password');
        removemaxlength($(this));
    }).blur(function(e){ // When leaving an empty field ONLY, revert to private
        if (!$(this).val()) $(this).prop('type', 'private');
    });
    // This appears unnecessary, left as comment for completeness
    // $('input[type="private"]').parents('form').submit(function(){
    //  $(this).find('input[type="password"]').hide().prop('type', 'private');
    // });
});