Làm thế nào để bạn vô hiệu hóa Trình duyệt tự động hoàn thành trên trường mẫu / thẻ đầu vào?

Làm thế nào để bạn vô hiệu hóa autocompletetrong các trình duyệt chính cho một input(hoặc form field) cụ thể ?

Firefox 30 bỏ qua autocomplete="off"mật khẩu, chọn cách nhắc người dùng thay vào đó liệu mật khẩu có nên được lưu trên máy khách hay không. Lưu ý các bình luận sau đây từ ngày 5 tháng 5 năm 2014:

• Trình quản lý mật khẩu luôn nhắc nếu muốn lưu mật khẩu. Mật khẩu không được lưu mà không có sự cho phép của người dùng.
• Chúng tôi là trình duyệt thứ ba thực hiện thay đổi này, sau IE và Chrome.

Theo tài liệu của Mozilla Developer Network , thuộc tính phần tử biểu mẫu Boolean autocompletengăn dữ liệu biểu mẫu được lưu trong bộ nhớ cache trong các trình duyệt cũ hơn.

<input type="text" name="foo" autocomplete="off" />

Ngoài ra autocomplete=off, bạn cũng có thể đặt tên trường của biểu mẫu của mình một cách ngẫu nhiên theo mã tạo trang, có thể bằng cách thêm một số chuỗi cụ thể theo phiên vào cuối tên.

Khi biểu mẫu được gửi, bạn có thể loại bỏ phần đó trước khi xử lý chúng ở phía máy chủ. Điều này sẽ ngăn trình duyệt web tìm ngữ cảnh cho trường của bạn và cũng có thể giúp ngăn chặn các cuộc tấn công XSRF vì kẻ tấn công sẽ không thể đoán tên trường để gửi biểu mẫu.

Hầu hết các trình duyệt và trình quản lý mật khẩu chính (IMHO) hiện đều bỏ qua autocomplete=off.

Tại sao? Nhiều ngân hàng và các trang web "bảo mật cao" khác được thêm vào autocomplete=offtrang đăng nhập của họ "vì mục đích bảo mật" nhưng điều này thực sự làm giảm tính bảo mật vì nó khiến mọi người thay đổi mật khẩu trên các trang web bảo mật cao này để dễ nhớ (và do đó bị bẻ khóa) kể từ khi tự động hoàn tất đã bị hỏng

Từ lâu, hầu hết các trình quản lý mật khẩu đã bắt đầu bỏ qua autocomplete=offvà bây giờ các trình duyệt bắt đầu làm tương tự chỉ với các đầu vào tên người dùng / mật khẩu.

Thật không may, các lỗi trong quá trình triển khai tự động hoàn thành chèn tên người dùng và / hoặc thông tin mật khẩu vào các trường biểu mẫu không phù hợp, gây ra lỗi xác thực biểu mẫu hoặc tệ hơn là vô tình chèn tên người dùng vào các trường mà người dùng cố tình để trống.

Nhà phát triển web phải làm gì?

• Nếu bạn có thể tự giữ tất cả các trường mật khẩu trên một trang, đó là một khởi đầu tuyệt vời vì dường như sự hiện diện của trường mật khẩu là kích hoạt chính để người dùng / vượt qua tự động hoàn thành để khởi động. Nếu không, hãy đọc các mẹo bên dưới.
• Safari thông báo rằng có 2 trường mật khẩu và vô hiệu hóa tự động hoàn tất trong trường hợp này, giả sử nó phải là một hình thức mật khẩu thay đổi, không phải là một hình thức đăng nhập. Vì vậy, chỉ cần đảm bảo sử dụng 2 trường mật khẩu (mới và xác nhận mới) cho bất kỳ biểu mẫu nào bạn cho phép

• Thật không may, Chrome 34 sẽ cố gắng tự động điền các trường với người dùng / vượt qua bất cứ khi nào nó nhìn thấy một trường mật khẩu. Đây là một lỗi khá tệ mà hy vọng, họ sẽ thay đổi hành vi của Safari. Tuy nhiên, việc thêm phần này vào đầu biểu mẫu của bạn dường như vô hiệu hóa tự động điền mật khẩu:

  <input type="text" style="display:none">
  <input type="password" style="display:none">
  

Tôi chưa điều tra kỹ về IE hoặc Firefox nhưng sẽ vui lòng cập nhật câu trả lời nếu những người khác có thông tin trong các bình luận.

Đôi khi, ngay cả autocomplete = off cũng không thể điền thông tin đăng nhập vào các trường sai, nhưng không phải trường người dùng hoặc biệt hiệu.

Cách giải quyết này ngoài bài đăng của apinstein về hành vi của trình duyệt.

sửa lỗi tự động điền trình duyệt ở chế độ chỉ đọc và đặt có thể ghi vào tiêu điểm (nhấp và tab)

 <input type="password" readonly  
     onfocus="this.removeAttribute('readonly');"/>

Cập nhật: Mobile Safari đặt con trỏ trong trường, nhưng không hiển thị bàn phím ảo. Fix mới hoạt động như trước nhưng xử lý bàn phím ảo:

<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
    this.removeAttribute('readonly');
    // fix for mobile safari to show virtual keyboard
    this.blur();    this.focus();  }" />

Bản demo trực tiếp https://jsfiddle.net/danielsuess/n0scguv6/

// Cập nhật

Bởi vì Trình duyệt tự động điền thông tin đăng nhập vào trường văn bản sai!?

Tôi nhận thấy hành vi kỳ lạ này trên Chrome và Safari, khi có các trường mật khẩu ở dạng tương tự. Tôi đoán, trình duyệt tìm trường mật khẩu để chèn thông tin đăng nhập đã lưu của bạn. Sau đó, nó tự động điền (chỉ đoán do quan sát) trường nhập văn bản gần nhất, xuất hiện trước trường mật khẩu trong DOM. Vì trình duyệt là phiên bản cuối cùng và bạn không thể kiểm soát nó,

Sửa chữa chỉ đọc ở trên làm việc cho tôi.

<form name="form1" id="form1" method="post" 
      autocomplete="off" action="http://www.example.com/form.cgi">

Điều này sẽ hoạt động trong Internet Explorer và Mozilla FireFox, nhược điểm là nó không phải là chuẩn XHTML.

Giải pháp cho Chrome là thêm autocomplete="new-password"mật khẩu loại đầu vào. Vui lòng kiểm tra ví dụ dưới đây.

Thí dụ:

<form name="myForm"" method="post">
   <input name="user" type="text" />
   <input name="pass" type="password" autocomplete="new-password" />
   <input type="submit">
</form>

Chrome luôn tự động điền dữ liệu nếu tìm thấy hộp mật khẩu loại , chỉ đủ để chỉ ra hộp đó autocomplete = "new-password".

Công việc này tốt cho tôi.

Lưu ý: đảm bảo F12rằng các thay đổi của bạn có hiệu lực, nhiều lần trình duyệt lưu trang trong bộ nhớ cache, điều này mang lại cho tôi một ấn tượng xấu rằng nó không hoạt động, nhưng trình duyệt không thực sự mang lại thay đổi.

Như những người khác đã nói, câu trả lời là autocomplete="off"

Tuy nhiên, tôi nghĩ rằng đáng để nói rõ tại sao nên sử dụng điều này trong một số trường hợp nhất định vì một số câu trả lời cho câu hỏi này và các câu hỏi trùng lặp đã đề nghị tốt hơn là không nên tắt nó đi.

Dừng trình duyệt lưu trữ số thẻ tín dụng không nên để lại cho người dùng. Quá nhiều người dùng thậm chí sẽ không nhận ra đó là một vấn đề.

Điều đặc biệt quan trọng là tắt nó trên các trường cho mã bảo mật thẻ tín dụng. Như trang này nêu:

"Không bao giờ lưu trữ mã bảo mật ... giá trị của nó phụ thuộc vào giả định rằng cách duy nhất để cung cấp nó là đọc nó từ thẻ tín dụng vật lý, chứng minh rằng người cung cấp nó thực sự giữ thẻ."

Vấn đề là, nếu đó là một máy tính công cộng (quán cà phê ảo, thư viện, v.v.) thì người dùng khác có thể dễ dàng lấy cắp thông tin thẻ của bạn và ngay cả trên máy của bạn, một trang web độc hại có thể đánh cắp dữ liệu tự động hoàn tất .

Tôi đã giải quyết cuộc chiến bất tận với Google Chrome bằng việc sử dụng các ký tự ngẫu nhiên. Khi bạn luôn kết xuất tự động hoàn thành với chuỗi ngẫu nhiên, nó sẽ không bao giờ nhớ bất cứ điều gì.

<input name="name" type="text" autocomplete="rutjfkde">

Hy vọng rằng nó sẽ giúp cho những người khác.

Tôi phải cầu xin khác với những câu trả lời để tránh vô hiệu hóa tự động hoàn thành.

Điều đầu tiên đưa ra là tự động hoàn thành không bị vô hiệu hóa rõ ràng trên các trường mẫu đăng nhập là một lỗi PCI-DSS. Ngoài ra, nếu máy cục bộ của người dùng bị xâm phạm thì mọi dữ liệu tự động hoàn thành có thể bị kẻ tấn công lấy một cách tầm thường do nó được lưu trữ rõ ràng.

Chắc chắn có một đối số cho khả năng sử dụng, tuy nhiên có một sự cân bằng rất tốt khi nói đến trường nào nên tự động hoàn thành bị vô hiệu hóa và trường nào không nên.

Ba lựa chọn: Thứ nhất:

<input type='text' autocomplete='off' />

Thứ hai:

<form action='' autocomplete='off'>

Thứ ba (mã javascript):

$('input').attr('autocomplete', 'off');

Trên một liên quan hoặc thực sự, trên lưu ý hoàn toàn ngược lại -

"Nếu bạn là người dùng của biểu mẫu đã nói ở trên và muốn kích hoạt lại chức năng tự động hoàn tất, hãy sử dụng bookmarklet 'nhớ mật khẩu' từ trang bookmarklets này . Nó sẽ xóa tất cả các autocomplete="off"thuộc tính khỏi tất cả các biểu mẫu trên trang. Hãy tiếp tục chiến đấu tốt! "

Chúng tôi thực sự đã sử dụng ý tưởng của sasb cho một trang web. Đó là một ứng dụng web phần mềm y tế để điều hành văn phòng bác sĩ. Tuy nhiên, nhiều khách hàng của chúng tôi là các bác sĩ phẫu thuật đã sử dụng rất nhiều máy trạm khác nhau, bao gồm cả các thiết bị đầu cuối bán công khai. Vì vậy, họ muốn đảm bảo rằng một bác sĩ không hiểu hàm ý của mật khẩu được lưu tự động hoặc không chú ý có thể vô tình để thông tin đăng nhập của họ dễ dàng truy cập. Tất nhiên, điều này đã có trước ý tưởng duyệt web riêng tư bắt đầu được đề cao trong IE8, FF3.1, v.v. Thậm chí, nhiều bác sĩ buộc phải sử dụng trình duyệt trường học cũ trong bệnh viện với CNTT sẽ không thay đổi.

Vì vậy, chúng tôi đã có trang đăng nhập tạo tên trường ngẫu nhiên chỉ hoạt động cho bài đăng đó. Vâng, nó không thuận tiện, nhưng nó chỉ đánh vào đầu người dùng về việc không lưu trữ thông tin đăng nhập trên các thiết bị đầu cuối công cộng.

Không có giải pháp nào làm việc cho tôi trong cuộc trò chuyện này.

Cuối cùng tôi đã tìm ra một giải pháp HTML thuần túy không yêu cầu Javascript , hoạt động trong các trình duyệt hiện đại (ngoại trừ IE; phải có ít nhất 1 lần bắt, phải không?) Và không yêu cầu bạn tắt tự động hoàn thành cho toàn bộ biểu mẫu.

Chỉ cần tắt tự động hoàn tất trên formvà sau đó BẬT nó cho bất kỳ inputbạn muốn nó hoạt động trong biểu mẫu. Ví dụ:

<form autocomplete="off">
    <!-- these inputs will not allow autocomplete and chrome 
         won't highlight them yellow! -->
    <input name="username"  />
    <input name="password" type="password" />
    <!-- this field will allow autocomplete to work even 
         though we've disabled it on the form -->
    <input name="another_field" autocomplete="on" />
</form>

Chỉ cần đặt autocomplete="off". Có một lý do rất tốt để làm điều này: Bạn muốn cung cấp chức năng tự động hoàn thành của riêng bạn!

Tôi đã thử các giải pháp vô tận, và sau đó tôi thấy điều này:

Thay vì autocomplete="off"chỉ đơn giản là sử dụngautocomplete="false"

Đơn giản như vậy và nó cũng hoạt động như một cơ duyên trong Google Chrome!

Điều này làm việc cho tôi.

<input name="pass" type="password" autocomplete="new-password" />

Chúng tôi cũng có thể sử dụng chiến lược này trong các điều khiển khác như văn bản, chọn vv

Tôi nghĩ rằng autocomplete=offđược hỗ trợ trong HTML 5.

Tự hỏi bản thân tại sao bạn muốn làm điều này mặc dù - nó có thể có ý nghĩa trong một số tình huống nhưng đừng làm điều đó chỉ vì lợi ích của việc đó.

Nó không thuận tiện cho người dùng và thậm chí không phải là vấn đề bảo mật trong OS X (được đề cập bởi Soren bên dưới). Nếu bạn lo lắng về việc mọi người bị đánh cắp mật khẩu từ xa - một trình ghi nhật ký gõ phím vẫn có thể làm điều đó mặc dù ứng dụng của bạn sử dụng autcomplete=off.

Là người dùng chọn để có một trình duyệt ghi nhớ (hầu hết) thông tin của tôi, tôi sẽ thấy khó chịu nếu trang web của bạn không nhớ thông tin của tôi.

Ngoài

autocomplete="off"

Sử dụng

readonly onfocus="this.removeAttribute('readonly');"

cho các đầu vào mà bạn không muốn họ nhớ dữ liệu mẫu ( username, password, vv) như hình dưới đây:

<input type="text" name="UserName" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" >

<input type="password" name="Password" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" >

Hi vọng điêu nay co ich.

Giải pháp tốt nhất:

Ngăn chặn tên người dùng tự động hoàn thành (hoặc email) và mật khẩu:

<input type="email" name="email"><!-- Can be type="text" -->
<input type="password" name="password" autocomplete="new-password">

Ngăn tự động hoàn thành một trường:

<input type="text" name="field" autocomplete="nope">

Giải thích: autocompletetiếp tục làm việc <input>, autocomplete="off"không hoạt động, nhưng bạn có thể thay đổi offthành một chuỗi ngẫu nhiên, như nope.

Hoạt động trong:

• Chrome: 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63 và 64

• Firefox: 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57 và 58

Một chút muộn của trò chơi ... nhưng tôi chỉ gặp phải vấn đề này và đã thử một vài lần thất bại, nhưng điều này làm việc với tôi được tìm thấy trên MDN

Trong một số trường hợp, trình duyệt sẽ tiếp tục đề xuất các giá trị tự động hoàn thành ngay cả khi thuộc tính tự động hoàn thành được đặt thành tắt. Hành vi bất ngờ này có thể khá khó hiểu cho các nhà phát triển. Mẹo để thực sự buộc không hoàn thành là gán một chuỗi ngẫu nhiên cho thuộc tính như vậy:

autocomplete="nope"

Thêm

autocomplete="off"

vào thẻ biểu mẫu sẽ vô hiệu hóa trình duyệt tự động hoàn thành (những gì trước đây được nhập vào trường đó) từ tất cả các inputtrường trong biểu mẫu cụ thể đó.

Đã thử nghiệm trên:

• Firefox 3.5, 4 BETA
• Internet Explorer 8
• Trình duyệt Chrome

Thêm autocomplete="off"sẽ không cắt nó.

Thay đổi thuộc tính loại đầu vào thành type="search".
Google không áp dụng tự động điền vào các đầu vào với một loại tìm kiếm.

Sử dụng tên và id không chuẩn cho các trường, thay vì "name" có "name_". Các trình duyệt sau đó sẽ không xem nó là trường tên. Phần tốt nhất về nó là bạn có thể làm điều này với một số nhưng không phải tất cả các trường và nó sẽ tự động hoàn thành một số nhưng không phải tất cả các trường.

Để tránh XHTML không hợp lệ, bạn có thể đặt thuộc tính này bằng cách sử dụng javascript. Ví dụ sử dụng jQuery:

<input type="text" class="noAutoComplete" ... />

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

Vấn đề là người dùng không có javascript sẽ có được chức năng tự động hoàn thành.

hãy thử những điều này nếu autocomplete="off"nó không hoạt động:

autocorrect="off" autocapitalize="off" autocomplete="off"

Tôi không thể tin rằng đây vẫn là một vấn đề rất lâu sau khi nó được báo cáo. Các giải pháp trên không hiệu quả với tôi, vì safari dường như biết khi nào phần tử không được hiển thị hoặc ngoài màn hình, tuy nhiên những điều sau đây đã làm việc với tôi:

<div style="height:0px; overflow:hidden; ">
  Username <input type="text" name="fake_safari_username" >
  Password <input type="password" name="fake_safari_password">
</div>

Hy vọng điều đó hữu ích cho ai đó!

Vì vậy, đây là:

function turnOnPasswordStyle() {
  $('#inputpassword').attr('type', "password");
}

<input oninput="turnOnPasswordStyle()" id="inputpassword" type="text">

Đây là một vấn đề bảo mật mà các trình duyệt bỏ qua bây giờ. Trình duyệt xác định và lưu trữ nội dung bằng tên đầu vào, ngay cả khi nhà phát triển coi thông tin là nhạy cảm và không nên được lưu trữ. Đặt tên đầu vào khác nhau giữa 2 yêu cầu sẽ giải quyết vấn đề (nhưng vẫn sẽ được lưu trong bộ đệm của trình duyệt và cũng sẽ tăng bộ đệm của trình duyệt). Yêu cầu người dùng kích hoạt hoặc hủy kích hoạt các tùy chọn trong cài đặt trình duyệt của nó không phải là một giải pháp tốt. Vấn đề có thể được khắc phục trong phần phụ trợ.

Đây là sửa chữa của tôi. Một cách tiếp cận mà tôi đã thực hiện trong khuôn khổ của tôi. Tất cả các yếu tố tự động hoàn thành được tạo ra với một đầu vào ẩn như thế này:

<? $r = rmd5(rand().mocrotime(TRUE)); ?>
<form method="POST" action="./">
    <input type="text" name="<? echo $r; ?>" />
    <input type="hidden" name="__autocomplete_fix_<? echo $r; ?>" value="username" />
    <input type="submit" name="submit" value="submit" />
</form>

Máy chủ sau đó xử lý các biến bài như thế này:

foreach ($_POST as $key => $val)
{
    if(preg_match('#^__autocomplete_fix_#', $key) === 1){
        $n = substr($key, 19);
        if(isset($_POST[$n]))$_POST[$val] = $_POST[$n];
    }
}

Giá trị có thể được truy cập như bình thường

var_dump($_POST['username']);

Và trình duyệt sẽ không thể đề xuất thông tin từ yêu cầu trước hoặc từ người dùng trước.

Tất cả hoạt động như một sự quyến rũ, ngay cả khi trình duyệt cập nhật, muốn bỏ qua tự động hoàn thành hay không. Đó là cách tốt nhất để khắc phục vấn đề cho tôi.

Không có bản hack nào được đề cập ở đây làm việc cho tôi trong Chrome. Có một cuộc thảo luận về vấn đề ở đây: https://code.google.com.vn/p/chromium/issues/detail?id=468153#c41

Thêm phần này vào trong <form>tác phẩm (ít nhất là bây giờ):

<div style="display: none;">
    <input type="text" id="PreventChromeAutocomplete" name="PreventChromeAutocomplete" autocomplete="address-level4" />
</div>

Bạn có thể sử dụng trong đầu vào.

Ví dụ;

<input type=text name="test" autocomplete="off" />