คุณจะปิดการใช้งานการเติมข้อความอัตโนมัติของเบราว์เซอร์บนฟิลด์แบบฟอร์มบนเว็บ / แท็กอินพุตได้อย่างไร


2789

คุณจะปิดการใช้งานautocompleteในเบราว์เซอร์หลักสำหรับinput(หรือform field) ที่เฉพาะเจาะจงได้อย่างไร?


2
ในบางระบบที่ผู้ทดสอบต้องป้อนข้อมูลจำนวนมากด้วยตนเองซ้ำไปซ้ำมาอาจเป็นประโยชน์ที่จะมีตัวเลือกที่สามารถกำหนดค่าได้ดังนั้นเมื่อการทดสอบคุณสามารถปิดการใช้งานได้และเพียงแค่กดแท็บ . '
Simon_Weaver

คำตอบ:


2623

Firefox 30 จะละเว้นautocomplete="off"รหัสผ่านโดยเลือกให้ผู้ใช้แทนว่าควรเก็บรหัสผ่านไว้ในไคลเอนต์หรือไม่ หมายเหตุความเห็นต่อไปนี้ตั้งแต่วันที่ 5 พฤษภาคม 2014:

  • เครื่องมือจัดการรหัสผ่านจะแจ้งให้เสมอหากต้องการบันทึกรหัสผ่าน รหัสผ่านจะไม่ถูกบันทึกโดยไม่ได้รับอนุญาตจากผู้ใช้
  • เราเป็นเบราว์เซอร์ที่สามที่ใช้การเปลี่ยนแปลงนี้หลังจาก IE และ Chrome

ตามเอกสารประกอบของMozilla Developer Networkแอตทริบิวต์autocompleteform form ของBoolean จะป้องกันข้อมูลฟอร์มไม่ให้ถูกแคชในเบราว์เซอร์รุ่นเก่า

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

45
สิ่งนี้ไม่ได้ผลสำหรับฉันใน Firefox 3.0.3 ฉันต้องใส่แอตทริบิวต์การเติมข้อความอัตโนมัติใน FORM แทนที่จะใช้ INPUT
Winston Fassett

17
การเติมข้อความอัตโนมัติมีการกำหนดไว้ในมาตรฐาน HTML 5 เท่านั้นดังนั้นจะทำให้การตรวจสอบความถูกต้องใด ๆ ที่คุณใช้กับ HTML 4 เป็นไปไม่ได้ * ...
Jrgns

96
@ Winston คุณควรใส่ทั้งคู่ในแบบฟอร์มและในองค์ประกอบอินพุตเอง วิธีนี้จะครอบคลุมเบราว์เซอร์ที่ไม่เป็นมาตรฐานทั้งหมด
AviD

83
และอย่าลืมปิดใช้งานการเติมข้อความอัตโนมัติอัตโนมัติ = ที่ส่วนขยาย (ถ้าคุณใช้ Chrome) ก่อนที่จะทดสอบเว็บแอป มิฉะนั้นคุณจะรู้สึกโง่เหมือนฉันจริง ;)
Jo Liss


314

นอกจาก autocomplete=offคุณยังสามารถให้ชื่อเขตข้อมูลฟอร์มของคุณถูกสุ่มด้วยรหัสที่สร้างหน้าได้โดยอาจเพิ่มสตริงเฉพาะเซสชันบางรายการไปยังส่วนท้ายของชื่อ

เมื่อมีการส่งแบบฟอร์มคุณสามารถดึงส่วนนั้นออกก่อนประมวลผลทางฝั่งเซิร์ฟเวอร์ สิ่งนี้จะป้องกันเว็บเบราว์เซอร์จากการค้นหาบริบทสำหรับฟิลด์ของคุณและอาจช่วยป้องกันการโจมตี XSRF เนื่องจากผู้โจมตีจะไม่สามารถเดาชื่อฟิลด์สำหรับการส่งแบบฟอร์ม


10
นี่เป็นวิธีที่ดีกว่าเมื่อเปรียบเทียบกับการเติมข้อความอัตโนมัติ = "ปิด" สิ่งที่คุณต้องทำคือสร้างชื่อใหม่ให้กับทุก ๆ หน้าโหลดและบันทึกชื่อนั้นไว้ที่ $ _SESSION สำหรับการใช้ในอนาคต:$_SESSION['codefield_name'] = md5(uniqid('auth', true));
enchance

78
ไม่นี่ไม่ใช่ทางออกที่ดีกว่าเพราะที่มาของการตั้งค่านี้คือตัวแทนผู้ใช้หรือที่รู้จักกันในชื่อเว็บเบราว์เซอร์ มีความแตกต่างระหว่างการสนับสนุนพฤติกรรมบางอย่าง (ซึ่ง HTML 5 พยายามทำ) และบังคับให้ทำโดยการตัดสินใจในนามของผู้ใช้ซึ่งคุณแนะนำว่าเป็น "ทางออกที่ดีกว่ามาก"
amn

15
โซลูชันนี้สามารถทำงานกับเบราว์เซอร์ทั้งหมดได้ดังนั้นในแง่ที่ว่า "ดีกว่า" ถึงกระนั้นถูกต้องแล้วการตัดสินใจปิดใช้งานการเติมข้อความอัตโนมัติในนามของผู้ใช้ของคุณยังไม่เป็นความคิดที่ดี ซึ่งหมายความว่าฉันจะปิดใช้งานการเติมข้อความอัตโนมัติในสถานการณ์ที่เฉพาะเจาะจงเท่านั้นเช่นเมื่อคุณวางแผนที่จะสร้างฟังก์ชันการเติมข้อความอัตโนมัติของคุณเองและไม่ต้องการความขัดแย้งหรือพฤติกรรมแปลก ๆ
macguru2000

8
เกี่ยวกับการโจมตี XSRF ฉันไม่แน่ใจว่าการโจมตีแบบใดที่คุณกำลังนึกภาพ แต่ผู้โจมตีไม่สามารถดึงส่วนท้ายออกมาได้ในลักษณะเดียวกับที่คุณใช้ฝั่งเซิร์ฟเวอร์เพื่อระบุฟิลด์ หรือหากผู้โจมตีกำลังโพสต์ในฟิลด์พวกเขาไม่สามารถผนวกสตริงแบบสุ่มของตนเองได้เนื่องจากเซิร์ฟเวอร์จะถูกปล้นโดยเซิร์ฟเวอร์หรือไม่
xr280xr

9
@ macguru2000 การสร้างการเติมข้อความอัตโนมัติของคุณเองนั้นเป็นกรณีใช้งานที่ถูกต้องและสมบูรณ์ เบราว์เซอร์ควรทำให้ผู้พัฒนาปิดการเติมข้อความอัตโนมัติได้ง่ายขึ้นเมื่อพวกเขาต้องการแทนที่จะบังคับให้เราใช้แฮ็กแบบนี้
whoadave

235

เบราว์เซอร์หลักและตัวจัดการรหัสผ่านส่วนใหญ่ (อย่างถูกต้อง IMHO) จะไม่สนใจในขณะนี้ autocomplete=offตอนนี้ไม่สนใจ

ทำไม? เพิ่มธนาคารหลายแห่งและเว็บไซต์ "ความปลอดภัยสูง" อื่น ๆautocomplete=offในหน้าเข้าสู่ระบบ "เพื่อความปลอดภัย" แต่นี่เป็นการลดความปลอดภัยเนื่องจากทำให้ผู้คนเปลี่ยนรหัสผ่านบนเว็บไซต์ที่มีความปลอดภัยสูงเหล่านี้เพื่อให้จดจำได้ง่าย ถูกทำลาย

นานมาแล้วผู้จัดการรหัสผ่านส่วนใหญ่เริ่มเพิกเฉย autocomplete=offและตอนนี้เบราว์เซอร์เริ่มทำเช่นเดียวกันสำหรับชื่อผู้ใช้ / รหัสผ่านเท่านั้น

น่าเสียดายที่ข้อผิดพลาดในการใช้งานการเติมข้อความอัตโนมัติใส่ชื่อผู้ใช้และ / หรือข้อมูลรหัสผ่านลงในช่องแบบฟอร์มที่ไม่เหมาะสมทำให้เกิดข้อผิดพลาดในการตรวจสอบแบบฟอร์มหรือแย่กว่านั้นโดยบังเอิญใส่ชื่อผู้ใช้ลงในช่อง

นักพัฒนาเว็บต้องทำอะไร

  • หากคุณสามารถเก็บฟิลด์รหัสผ่านทั้งหมดไว้บนหน้าเว็บด้วยตนเองนั่นเป็นการเริ่มต้นที่ดีเนื่องจากดูเหมือนว่าการปรากฏตัวของฟิลด์รหัสผ่านเป็นตัวกระตุ้นหลักสำหรับการเติมข้อความอัตโนมัติของผู้ใช้ / ส่งผ่านมิฉะนั้นอ่านเคล็ดลับด้านล่าง
  • Safariสังเกตว่ามี 2 ฟิลด์รหัสผ่านและปิดใช้งานการเติมข้อความอัตโนมัติในกรณีนี้สมมติว่ามันต้องเป็นแบบฟอร์มรหัสผ่านการเปลี่ยนแปลงไม่ใช่แบบฟอร์มการเข้าสู่ระบบ ดังนั้นอย่าลืมใช้รหัสผ่าน 2 ฟิลด์ (ใหม่และยืนยันใหม่) สำหรับทุกรูปแบบที่คุณอนุญาต
  • น่าเสียดายที่Chrome 34 จะพยายามป้อนข้อมูลอัตโนมัติด้วยผู้ใช้ / ผ่านทุกครั้งที่เห็นฟิลด์รหัสผ่าน นี่เป็นข้อผิดพลาดที่ไม่ดีที่หวังว่าพวกเขาจะเปลี่ยนพฤติกรรมของ Safari อย่างไรก็ตามการเพิ่มสิ่งนี้ไปที่ด้านบนของแบบฟอร์มของคุณดูเหมือนว่าจะปิดใช้งานการป้อนรหัสผ่านอัตโนมัติ:

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

ฉันยังไม่ได้ตรวจสอบ IE หรือ Firefox อย่างละเอียด แต่ยินดีที่จะอัปเดตคำตอบหากผู้อื่นมีข้อมูลในความคิดเห็น


5
คุณหมายถึงอะไรด้วย "การเพิ่มสิ่งนี้บนหน้าของคุณดูเหมือนจะปิดการใช้งานป้อนอัตโนมัติสำหรับหน้า:"
wutzebaer

5
@wutzebaer Chrome สังเกตเห็นช่องรหัสผ่านที่ซ่อนอยู่และหยุดการทำงานอัตโนมัติ รายงานนี้เพื่อป้องกันเว็บไซต์ขโมยข้อมูลรหัสผ่านโดยไม่แจ้งให้ผู้ใช้ทราบ
David W

6
ตัวอย่างโค้ดของคุณป้องกันการเติมข้อความอัตโนมัติสำหรับฟิลด์การเข้าสู่ระบบใน Chrome, Firefox, IE 8 และ IE 10 ไม่ได้ทดสอบ IE 11 สิ่งที่ดี! คำตอบง่ายๆที่ยังใช้งานได้เท่านั้น
Sam Watkins

3
โน้ตซาฟารีของคุณดูเหมือนจะทำงานบน Chrome ด้วยอย่างน้อยในเดือนธันวาคม 2558 ฉันมีฟิลด์ชื่อผู้ใช้และรหัสผ่านในแบบฟอร์มการลงทะเบียนที่กรอกข้อมูลด้วยข้อมูลอัตโนมัติจากแบบฟอร์มเข้าสู่ระบบ การสร้างสองtype='password'ฟิลด์ในหน้าเดียวทำให้การเติมข้อความอัตโนมัติ "บันทึกรหัสผ่าน" ของเบราว์เซอร์ซึ่งทำให้หมดความรู้สึกทั้งหมดเนื่องจากแบบฟอร์มการลงทะเบียนมักจะถามรหัสผ่านสองครั้งเมื่อแบบฟอร์มเข้าสู่ระบบถามเพียงครั้งเดียว
Matt Fletcher

3
ดูเหมือนจะไม่สามารถใช้งานได้ใน Chrome 55 อีกต่อไปเว้นแต่ว่าจะไม่มีการซ่อนรหัสผ่านพิเศษซึ่งจะทำให้วัตถุประสงค์เสียไป
jokkedk

160

บางครั้งแม้แต่การเติมข้อความอัตโนมัติ = ปิดจะไม่ป้องกันไม่ให้กรอกข้อมูลรับรองลงในฟิลด์ที่ไม่ถูกต้อง แต่ไม่ใช่ฟิลด์ชื่อผู้ใช้หรือชื่อเล่น

วิธีแก้ปัญหานี้นอกเหนือจากโพสต์ของ apinstein เกี่ยวกับพฤติกรรมของเบราว์เซอร์

แก้ไขการป้อนอัตโนมัติของเบราว์เซอร์ในแบบอ่านอย่างเดียวและตั้งค่าการเขียนบนโฟกัส (คลิกและแท็บ)

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

อัปเดต: Mobile Safari ตั้งค่าเคอร์เซอร์ในฟิลด์ แต่ไม่แสดงแป้นพิมพ์เสมือนจริง ใหม่แก้ไขการทำงานเหมือน แต่ก่อนจัดการแป้นพิมพ์เสมือนจริง:

<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();  }" />

การสาธิตสด https://jsfiddle.net/danielsuess/n0scguv6/

// UpdateEnd

เนื่องจากเบราว์เซอร์เติมข้อมูลประจำตัวในฟิลด์ข้อความผิดอัตโนมัติ!

ฉันสังเกตเห็นพฤติกรรมแปลก ๆ นี้ใน Chrome และ Safari เมื่อมีช่องรหัสผ่านในรูปแบบเดียวกัน ฉันเดาว่าเบราว์เซอร์จะมองหาฟิลด์รหัสผ่านเพื่อใส่ข้อมูลรับรองที่คุณบันทึกไว้ จากนั้นมันจะเติมข้อมูลโดยอัตโนมัติ (เพียงเดาเนื่องจากการสังเกต) ฟิลด์ป้อนข้อความที่ใกล้ที่สุดซึ่งปรากฏก่อนฟิลด์รหัสผ่านใน DOM เนื่องจากเบราว์เซอร์เป็นอินสแตนซ์สุดท้ายและคุณไม่สามารถควบคุมได้

การแก้ไขแบบอ่านอย่างเดียวด้านบนนี้เหมาะกับฉัน


8
ตอบถ้าไม่มีจาวาสคริปต์ก็จะทำให้ทั้งฟอร์มล้มเหลว -1
Jimmy Kane

8
@JimmyKane กุญแจสำคัญคือการเพิ่มแอตทริบิวต์โดยใช้ javascript ในตอนแรก (ซึ่งผู้ใช้ไม่ได้ทำอะไรที่นี่ แต่เพียงเพิ่มเพื่อความสมบูรณ์)
trnelson

@tmelson ฉันเข้าใจ แต่ก็ยังใช้ js ทำไมถึงปิดการใช้งาน? ลองหลีกเลี่ยง js สำหรับสิ่งต่าง ๆ ที่สามารถปรับปรุงให้ดีขึ้นได้ ฉันเห็นด้วยกับคุณอีกครั้ง
Jimmy Kane

3
วิธีนี้ใช้ไม่ได้ใน IE8 ฟิลด์รหัสผ่านแบบอ่านอย่างเดียวไม่สามารถแก้ไขได้ในครั้งแรกที่คุณโฟกัสหลังจากที่คุณไม่ได้โฟกัสและโฟกัสอีกครั้ง เป็นแนวคิดที่ดี แต่น่าเสียดายที่มันแฮ็คเกินไปและไม่ปลอดภัยในการใช้
Sam Watkins

สิ่งนี้ไม่ทำงานอย่างถูกต้องในเบราว์เซอร์ทั้งหมด (เช่น IE 11 & IE Edge) ทันทีที่readonlyมีการลบออกการเลือกฟิลด์ที่ตามมาจะส่งผลให้การเติมข้อความอัตโนมัติกลับมา
Gone Coding

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

สิ่งนี้จะทำงานใน Internet Explorer และ Mozilla FireFox ข้อเสียคือมันไม่ได้เป็นมาตรฐาน XHTML


ฉันสังเกตเห็นว่าการเพิ่มลงในองค์ประกอบของฟอร์มไม่ได้ป้องกันไม่ให้มันถูกนำไปใช้กับอินพุตส่วนบุคคลภายในฟอร์ม ดังนั้นจึงควรวางลงบนองค์ประกอบอินพุตโดยตรง
sholsinger

15
จริงๆแล้ว @sholsinger ควรวางทั้งไว้ในแบบฟอร์มและบนองค์ประกอบอินพุตเอง วิธีนี้จะครอบคลุมเบราว์เซอร์ที่ไม่เป็นมาตรฐานทั้งหมด
AviD

2
น่าเศร้าที่เป็นของ IE 11, input type="password"ไมโครซอฟท์ไม่เคารพนี้ หวังว่าจะไม่มีเบราว์เซอร์อื่น ๆ เลือกที่จะลบฟังก์ชั่นนี้
SamHuckaby

การตั้งค่าautocomplete="off"บนformเป็นสิ่งเดียวที่ทำงานสำหรับ Chrome
แอนดรู

106

ทางออกสำหรับ Chrome คือการเพิ่มautocomplete="new-password"รหัสผ่านประเภทการป้อนข้อมูล โปรดตรวจสอบตัวอย่างด้านล่าง

ตัวอย่าง:

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

Chrome จะเติมข้อมูลให้โดยอัตโนมัติหากพบกล่องรหัสผ่านประเภทเพียงพอที่จะระบุสำหรับกล่องautocomplete = "new-password"นั้น

มันใช้งานได้ดีสำหรับฉัน

หมายเหตุ: ตรวจสอบให้แน่ใจF12ว่าการเปลี่ยนแปลงของคุณมีผลบังคับใช้หลายครั้งที่เบราว์เซอร์บันทึกหน้าเว็บไว้ในแคชสิ่งนี้ทำให้ฉันประทับใจว่ามันใช้งานไม่ได้ แต่เบราว์เซอร์ไม่ได้นำการเปลี่ยนแปลงมาใช้จริง


2
สิ่งนี้ใช้ได้ใน Chrome สำหรับฟิลด์ประเภทอื่นเช่นกันไม่ใช่แค่พิมพ์ = "รหัสผ่าน"
Jake

ฉันใช้มันกับรหัสผ่านอีเมลและประเภทข้อความและใช้งานได้ ฉันใช้มันแบบนี้ง่ายๆ: autocomplete = "new"
Crak_mboutin

autocomplete = "nope" name = "pswd" และใช้ <input name = "dummyPassword" type = "รหัสผ่าน" style = "display: none;"> ก่อนหน้าฟิลด์ป้อนรหัสผ่านจริง สิ่งนี้ใช้ได้สำหรับฉัน
Denuka


นี้ทำงานในเกือบทุกเบราว์เซอร์ในขณะนี้ไม่ได้เป็นเพียง Chrome: เติมข้อความอัตโนมัติ # Browser_compatibility
Andrew Morton

60

อย่างที่คนอื่นพูดคำตอบก็คือ autocomplete="off"

อย่างไรก็ตามฉันคิดว่ามันมีค่าพอที่จะระบุว่าทำไมมันจึงเป็นความคิดที่ดีที่จะใช้สิ่งนี้ในบางกรณีเป็นคำตอบสำหรับเรื่องนี้และทำซ้ำคำถามที่ได้แนะนำว่าอย่าปิดเครื่อง

การหยุดเบราว์เซอร์ที่จัดเก็บหมายเลขบัตรเครดิตไม่ควรปล่อยให้กับผู้ใช้ ผู้ใช้จำนวนมากเกินไปจะไม่ตระหนักว่าเป็นปัญหา

เป็นสิ่งสำคัญอย่างยิ่งที่จะต้องปิดในฟิลด์สำหรับรหัสความปลอดภัยของบัตรเครดิต ตามที่หน้านี้ระบุ:

"อย่าเก็บรหัสความปลอดภัย ... ค่าของมันขึ้นอยู่กับข้อสันนิษฐานว่าวิธีเดียวที่จะให้มันคือการอ่านจากบัตรเครดิตทางกายภาพพิสูจน์ได้ว่าบุคคลที่ให้มันถือบัตรจริง ๆ "

ปัญหาคือถ้าเป็นคอมพิวเตอร์สาธารณะ (ไซเบอร์คาเฟ่ห้องสมุด ฯลฯ ) ผู้ใช้รายอื่นจะขโมยรายละเอียดบัตรของคุณและแม้แต่ในเครื่องของคุณเองเว็บไซต์ที่เป็นอันตรายอาจขโมยข้อมูลที่เติมข้อความอัตโนมัติได้


7
ถ้าฉันไปที่ไซต์และจำการ์ดของฉันในรายการแบบหล่นลงฉันจะไม่มีความสุขมาก id เริ่มสงสัยว่าพวกเขาจะประมาทได้อย่างไร
Simon_Weaver

8
ง่ายกว่า / สำคัญกว่ากรณีมาก เมื่อฉันไปที่หน้าผู้ใช้ในส่วนผู้ดูแลระบบของเว็บไซต์ของฉันก็พยายามตั้งชื่อผู้ใช้และรหัสผ่านให้เป็นชื่อผู้ใช้และรหัสผ่านของผู้ดูแลระบบของฉันไม่สามารถบอกได้ว่านี่ไม่ใช่แบบฟอร์มเข้าสู่ระบบ ฉันต้องการให้จดจำรหัสผ่านผู้ดูแลระบบของฉันได้ แต่เป็นข้อผิดพลาดร้ายแรงที่พยายามใช้ชื่อผู้ใช้ / รหัสผ่านที่จดจำไว้กับผู้ใช้ที่ฉันแก้ไขแล้ว
rjmunro

34

ฉันได้แก้ไขการต่อสู้ที่ไม่สิ้นสุดกับ Google Chrome ด้วยการใช้อักขระแบบสุ่ม เมื่อคุณแสดงผลการเติมข้อความอัตโนมัติด้วยสตริงสุ่มเสมอมันจะไม่จดจำสิ่งใดเลย

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

หวังว่ามันจะช่วยให้คนอื่น


2
มันใช้งานได้ดียิ่งขึ้น คุณสามารถเพิ่ม JS ขนาดเล็กที่สร้างรหัสแบบสุ่มสำหรับการโหลดหน้าเว็บทุกครั้งและเพิ่มรหัสนั้นในฟิลด์อินพุต: <code> function autoId () {var autoId = ""; var dict = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; สำหรับ (var i = 0; i <12; i ++) {autoId + = dict.charAt (Math.floor (Math.floor (Math.random () * dict.length)); } ส่งคืน autoId; } $ ('. autocompleteoff'). attr ('autocomplete', autoId ()); </code> คุณสามารถเพิ่มautocompleteoffคลาสในฟิลด์อินพุตที่คุณต้องการ
Raghuram Kasyap

ไม่ทำงานใน chrome ของฉันเวอร์ชัน 68.0.3440.106 (รุ่นเป็นทางการ) (64 บิต)
Sukanya Purushothaman

Chrome ได้รับการแก้ไขให้ใช้การ "ปิด" แบบมาตรฐานในขณะนี้
MacK

1
น่าเศร้าที่ใช้งานได้ดีกว่าสิ่งที่เรียกว่ามาตรฐานบนโครเมี่ยม
Nour Lababidi

1
วันนี้ฉันพบว่า Chrome จะเขียนทับสตริงแบบสุ่มด้วย "ปิด" ฉันไม่อยากจะเชื่อเลยว่านักพัฒนา Chrome ที่ทำสิ่งนี้ไม่ดีและไม่สามารถควบคุมได้ ทำไมฉันถึงได้
ขั้นตอน

33

ฉันต้องขอให้แตกต่างกับคำตอบที่พูดเพื่อหลีกเลี่ยงการปิดใช้งานการทำให้สมบูรณ์อัตโนมัติ

สิ่งแรกที่ต้องพิจารณาคือการเติมข้อมูลอัตโนมัติไม่ถูกปิดใช้งานอย่างชัดเจนในฟิลด์แบบฟอร์มเข้าสู่ระบบคือ PCI-DSS ล้มเหลว นอกจากนี้หากเครื่องท้องถิ่นของผู้ใช้ถูกบุกรุกข้อมูลการเติมข้อความอัตโนมัติใด ๆ สามารถรับได้โดยผู้โจมตีเนื่องจากการจัดเก็บไว้ในที่ชัดเจน

แน่นอนมีข้อโต้แย้งสำหรับการใช้งาน แต่มีความสมดุลที่ดีมากเมื่อมันมาถึงเขตข้อมูลแบบฟอร์มที่ควรจะปิดใช้งานการเติมข้อความอัตโนมัติและที่ไม่ควร


มันเพิ่งมาถึงความสนใจของฉันที่ IE ไม่เรียกเหตุการณ์ onChange เมื่อคุณกรอกข้อความโดยใช้การเติมข้อความอัตโนมัติ เรามีหลายสิบรูปแบบและกิจกรรม onChange กว่าพันรายการ (การตรวจสอบอินพุต, ตรรกะทางธุรกิจ) กระจายอยู่ทั่ว เมื่อเร็ว ๆ นี้เราได้อัพเกรด IE เป็นเวอร์ชันที่ใหม่กว่าและสิ่งแปลก ๆ ก็เริ่มเกิดขึ้น โชคดีที่เรากำลังเรียกใช้แอปอินทราเน็ตและการเติมข้อความอัตโนมัติไม่ใช่ปัญหา UX สำหรับเรามันง่ายกว่าที่จะปิด
Robotron

3
หากผู้ใช้เครื่องท้องถิ่นถูกบุกรุกพวกเขาจะเมาระยะเวลา มันอาจมีการติดตั้ง keylogger มันอาจมีการเพิ่มใบรับรอง SSL ปลอมและทุกอย่างที่ส่งผ่านพร็อกซีปลอม ฯลฯ ฉันมีเหตุผลที่แท้จริงในการปิดใช้งานการเติมข้อความอัตโนมัติ - เมื่อฉันเข้าสู่ระบบในฐานะผู้ดูแลระบบและไปที่หน้าแก้ไขผู้ใช้ ผู้ใช้นั้นชื่อผู้ใช้และรหัสผ่านผู้ดูแลระบบของฉัน ฉันต้องการป้องกันพฤติกรรมนี้
rjmunro

1
ผู้ขายเบราว์เซอร์ดูเหมือนจะมองหาความสนใจของตนเอง รหัสผ่านที่บันทึกไว้ = การล็อคอินของผู้ใช้ และการเปิด / ปิดการเติมข้อความอัตโนมัตินั้นง่ายเกินไป - ทำไมไม่มาตรฐานที่ซับซ้อนของคำใบ้ความหมาย ( html.spec.whatwg.org/multipage/ ...... ) ซึ่งโดยทางเบราว์เซอร์จะช่วยให้เบราว์เซอร์รวบรวมข้อมูลความหมายที่มีค่าจากเว็บไซต์แต่ละแห่ง ผู้ใช้เยี่ยมชม?
aro_tech

กรณีการใช้งานเฉพาะที่ฉันพยายามแก้ไขคือ: พวกเขาลงชื่อเข้าใช้แล้ว แต่ตอนนี้พวกเขากำลังจะเข้าถึงสิ่งที่สำคัญยิ่งกว่า ฉันต้องการแสดงบทสนทนาที่ทำให้พวกเขารับรองความถูกต้องอีกครั้งกับความเป็นไปได้ที่พวกเขาเดินออกไปเพื่อมีควันและคนเลวนั่งลงบนเก้าอี้ ได้ลองใช้เทคนิคหลายอย่างเพื่อกำจัดการเติมข้อความอัตโนมัติและไม่มีอะไรทำงาน ตอนนี้ฉันกำลังคิดว่าอย่างน้อยก็ควรใช้ 'รหัสผ่าน = window.prompt ("โปรดป้อนรหัสผ่านของคุณอีกครั้ง") พร้อมด้วยชื่อผู้ใช้ในเซสชันและลองตรวจสอบสิทธิ์นั้น
David

31

สามตัวเลือก: ครั้งแรก:

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

ประการที่สอง:

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

ที่สาม (รหัสจาวาสคริปต์):

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

2
ตัวเลือกแรกและตัวเลือกที่สองควรเป็นตัวเลือกหนึ่งเนื่องจากจะแตกต่างกันไปตามวิธีที่เบราว์เซอร์จัดการกับสิ่งนี้
rybo111

พยายาม $ formElement.attr ('เติมข้อความอัตโนมัติ', 'ปิด'); และมันไม่ทำงาน
เบ็นซินแคลร์

22

บนที่เกี่ยวข้องหรือที่จริงแล้วในบันทึกตรงข้ามอย่างสมบูรณ์ -

"หากคุณเป็นผู้ใช้ของแบบฟอร์มข้างต้นและต้องการเปิดใช้งานฟังก์ชั่นเติมข้อความอัตโนมัติอีกครั้งให้ใช้ bookmarklet 'จำรหัสผ่าน' จากหน้า bookmarklet นี้มันจะลบautocomplete="off"คุณสมบัติทั้งหมดจากทุกรูปแบบในหน้าต่อไปสู้สู้ต่อไป! "


20

จริง ๆ แล้วเราใช้sasbของสำหรับเว็บไซต์เดียว มันเป็นเว็บแอพพลิเคชั่นซอฟต์แวร์ทางการแพทย์เพื่อเปิดสำนักงาน อย่างไรก็ตามลูกค้าของเราหลายคนเป็นศัลยแพทย์ที่ใช้เวิร์คสเตชั่นที่แตกต่างกันมากมายรวมถึงอาคารผู้โดยสารกึ่งสาธารณะ ดังนั้นพวกเขาต้องการตรวจสอบให้แน่ใจว่าแพทย์ที่ไม่เข้าใจความหมายของรหัสผ่านที่บันทึกอัตโนมัติหรือไม่ให้ความสนใจไม่สามารถเข้าถึงข้อมูลการเข้าสู่ระบบของพวกเขาได้โดยไม่ตั้งใจ แน่นอนว่าก่อนหน้านี้ความคิดในการท่องเว็บแบบส่วนตัวที่เริ่มให้ความสำคัญใน IE8, FF3.1 เป็นต้นดังนั้นแพทย์จำนวนมากจึงถูกบังคับให้ใช้เบราว์เซอร์ของโรงเรียนเก่าในโรงพยาบาลด้วยเทคโนโลยีที่ไม่เปลี่ยนแปลง

ดังนั้นเราจึงมีหน้าเข้าสู่ระบบสร้างชื่อฟิลด์สุ่มที่จะใช้งานได้เฉพาะสำหรับโพสต์นั้น ใช่มันสะดวกน้อยกว่า แต่มันกระทบผู้ใช้มากกว่าหัวเกี่ยวกับการไม่จัดเก็บข้อมูลการล็อกอินบนเครื่องสาธารณะ


20

ไม่มีวิธีแก้ปัญหาใดที่เหมาะกับฉันในการสนทนานี้

ในที่สุดฉันก็พบโซลูชัน HTMLที่ไม่ต้องใช้Javascriptทำงานในเบราว์เซอร์สมัยใหม่ (ยกเว้น IE ต้องมีอย่างน้อย 1 catch ใช่ไหม?) และไม่ต้องการให้คุณปิดใช้งานการเติมข้อความอัตโนมัติสำหรับทั้งฟอร์ม

เพียงปิดการเติมข้อความอัตโนมัติในformแล้วเปิดใช้สำหรับสิ่งที่inputคุณต้องการให้ทำงานภายในแบบฟอร์ม ตัวอย่างเช่น:

<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>

ทั้งหมดนี้เป็นสิ่งที่ฉันกำลังมองหา!
Marco

20

autocomplete="off"ชุดเพียง มีเหตุผลที่ดีมากสำหรับการทำเช่นนี้: คุณต้องการให้ฟังก์ชันการเติมข้อความอัตโนมัติของคุณเอง!


20

ฉันได้ลองวิธีแก้ปัญหาที่ไม่มีที่สิ้นสุดแล้วฉันพบสิ่งนี้:

แทนที่จะautocomplete="off"ใช้เพียงแค่autocomplete="false"

เรียบง่ายเช่นนั้นและใช้งานได้อย่างมีเสน่ห์ใน Google Chrome เช่นกัน!


ตามที่คุณพูดในโครเมี่ยมค่าปิดไม่ทำงาน ต้องเป็น "false"
azuax

ใช้งานได้กับ Chrome 44.0.2403.130
GuiGS

1
พยายามทำสิ่งนี้: $ formElement.attr ('เติมข้อความอัตโนมัติ', 'เท็จ'); ขอโทษไม่ทำงาน
เบ็นซินแคลร์

20

มันใช้งานได้สำหรับฉัน

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

นอกจากนี้เรายังสามารถใช้กลยุทธ์นี้ในการควบคุมอื่น ๆ เช่นข้อความเลือก ฯลฯ


นี่ควรเป็นคำตอบล่าสุด คำตอบเดียวที่ใช้ได้กับฉันใน chrome ล่าสุด
Nick Chan Abdullah

19

ฉันคิดว่าautocomplete=offรองรับ HTML 5

ถามตัวเองว่าทำไมคุณถึงต้องการทำสิ่งนี้ - มันอาจจะสมเหตุสมผลในบางสถานการณ์ แต่อย่าทำเพื่อผลประโยชน์เท่านั้น

สะดวกสำหรับผู้ใช้น้อยกว่าและไม่ใช่แม้แต่ปัญหาด้านความปลอดภัยใน OS X (พูดถึงโดย Soren ด้านล่าง) หากคุณกำลังกังวลเกี่ยวกับคนที่มีรหัสผ่านของตนที่ถูกขโมยจากระยะไกล - autcomplete=offคนตัดไม้การกดแป้นพิมพ์ยังคงสามารถทำมันได้แม้ว่าการใช้งานแอปของคุณ

ในฐานะผู้ใช้ที่เลือกให้เบราว์เซอร์จดจำข้อมูลของฉัน (ส่วนใหญ่) ฉันจะพบว่ามันน่ารำคาญหากเว็บไซต์ของคุณจำไม่ได้ว่าเป็นของฉัน


17

นอกจาก

autocomplete="off"

ใช้

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

สำหรับปัจจัยการผลิตที่คุณไม่ต้องการให้พวกเขาจำข้อมูลในแบบฟอร์ม ( username, passwordฯลฯ ) ที่แสดงด้านล่าง:

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

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

หวังว่านี่จะช่วยได้


1
สำหรับฉันใน IE11 ฉันไม่สามารถพิมพ์ลงในกล่องข้อความได้แม้หลังจากที่ onfocus ลบแอ็ตทริบิวต์แบบอ่านอย่างเดียว อย่างไรก็ตามหากฉันคลิกครั้งที่สองในกล่องข้อความฉันสามารถพิมพ์ได้
mcallahan

ฉันพบปัญหาเดียวกันกับ IE11 (พิมพ์ไม่ได้จนกว่าจะโฟกัสที่สอง) การเพิ่มความพร่ามัวและโฟกัสอีกครั้ง $(document).on('focus', 'input:password[readonly="readonly"]', function () { $(this).prop('readonly', false).blur().focus(); });
palmsey

@ อันด์แน่นอนคุณสามารถ นี่คือหลักการหลักในการเอาชนะปัญหานี้และฉันยังเพิ่มการปรับปรุงที่มีตัวอย่างโค้ดเต็ม)
Murat Yıldız

ฉันได้เพิ่มเข้าไปด้วยonfocusout="this.setAttribute('readonly', 'readonly');"
rinatdobr

16

ทางออกที่ดีที่สุด:

ป้องกันชื่อผู้ใช้เติมข้อความอัตโนมัติ (หรืออีเมล) และรหัสผ่าน:

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

ป้องกันการเติมข้อความอัตโนมัติในฟิลด์:

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

คำอธิบาย: autocompleteยังคงทำงานใน<input>, autocomplete="off"ไม่ทำงาน แต่คุณสามารถเปลี่ยนเป็นสตริงสุ่มเช่นoffnope

ทำงานใน:

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

  • Firefox: 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57 และ 57


2
ฉันพบสิ่งนี้เพื่อใช้ในการทดสอบเบื้องต้น แปลกมากที่ "ปิด" ไม่ทำงาน
Craig Jacobs

สิ่งนี้ใช้ไม่ได้กับ Chrome บน Android ฉันได้ลองตั้งค่าสตริงสำหรับautocompleteแอตทริบิวต์แล้วและยังคงแสดงรายการก่อนหน้านี้เป็นคำแนะนำการเติมข้อความอัตโนมัติภายใต้อินพุต
tebs1200

@ tebs1200 อันไหน? ช่องรหัสผ่านหรือช่องข้อความ?
Cava

@Cava ขอโทษที่ตอบกลับล่าช้า ช่องข้อความ ไม่สำคัญว่าฉันautocompleteจะตั้งค่าไว้ที่ใดฉันยังคงได้รับข้อเสนอแนะแบบเลื่อนลงตามค่าที่ป้อนก่อนหน้านี้ ไม่เป็นไรบนเดสก์ท็อป แต่ไม่ใช่สำหรับ Chrome Android
tebs1200

14

สายไปที่เกมเล็กน้อย ... แต่ฉันเพิ่งพบปัญหานี้และพยายามล้มเหลวหลายครั้ง แต่สิ่งนี้เหมาะสำหรับฉันที่พบในMDN

ในบางกรณีเบราว์เซอร์จะยังคงแนะนำค่าการเติมข้อความอัตโนมัติแม้ว่าแอตทริบิวต์การเติมข้อความอัตโนมัติจะถูกตั้งค่าเป็นปิด พฤติกรรมที่ไม่คาดคิดนี้สามารถทำให้ผู้พัฒนาสับสนได้ เคล็ดลับในการบังคับให้การไม่สำเร็จคือการกำหนดสตริงแบบสุ่มให้กับแอตทริบิวต์ดังนี้:

autocomplete="nope"

13

กำลังเพิ่ม

autocomplete="off"

ไปที่แท็กฟอร์มจะปิดใช้งานการเติมข้อความอัตโนมัติของเบราว์เซอร์ (สิ่งที่เคยพิมพ์ลงในฟิลด์นั้น) จากทั้งหมด inputฟิลด์ภายในฟอร์มนั้น

ทดสอบเมื่อ:

  • Firefox 3.5, 4 BETA
  • Internet Explorer 8
  • โครเมียม

13

การเพิ่มautocomplete="off"ไม่ใช่การตัด

type="search"เปลี่ยนประเภทการป้อนข้อมูลแอตทริบิวต์
Google ไม่ใช้การป้อนอัตโนมัติกับอินพุตด้วยการค้นหาประเภทหนึ่ง


4
มันเป็นแฮ็ค ฟิลด์นี้ไม่ใช่ช่องค้นหา ในอนาคตอาจทำให้เกิดปัญหาได้
Roel

12

ใช้ชื่อและรหัสที่ไม่เป็นมาตรฐานสำหรับฟิลด์ดังนั้นแทนที่จะเป็น "name" มี "name_" เบราว์เซอร์จะไม่เห็นว่าเป็นฟิลด์ชื่อ ส่วนที่ดีที่สุดเกี่ยวกับเรื่องนี้คือคุณสามารถทำสิ่งนี้กับบางฟิลด์ แต่ไม่ใช่ทั้งหมดและมันจะเติมข้อมูลให้บางส่วนโดยอัตโนมัติ แต่ไม่ใช่ทั้งหมด


ปัญหานี้คือถ้าเว็บไซต์อื่น ๆ ใช้ "name_" เพื่อให้บรรลุวัตถุประสงค์เดียวกันคุณจะกลับไปที่จตุรัสหนึ่ง
ConroyP

3
ดังนั้นให้ "mysite_name" ถ้าใครอื่นใช้ที่ผมถามคำถามพวกเขา ...
สตีฟ Perks

สิ่งนี้ทำให้โปรแกรมอรรถประโยชน์การเติมข้อมูลอัตโนมัติเหล่านั้นเกิดความยุ่งเหยิงขึ้นบ้าง
Simon_Weaver

12

เพื่อหลีกเลี่ยง XHTML ที่ไม่ถูกต้องคุณสามารถตั้งค่าคุณลักษณะนี้โดยใช้ javascript ตัวอย่างการใช้ jQuery:

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

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

ปัญหาคือผู้ใช้ที่ไม่มี javascript จะได้รับฟังก์ชันการเติมข้อความอัตโนมัติ


38
นี่ไม่ได้เป็นการหลีกเลี่ยง xhtml ที่ไม่ถูกต้อง แต่เพียงเพิ่มบิตที่ไม่ถูกต้องแบบไดนามิกหลังจากที่คุณตรวจสอบแล้วมันประกาศว่ามันถูกต้อง!
Andiih

@Andiih: มีวิธีทำให้การเติมข้อความอัตโนมัติทำงานใน xhtml หรือไม่
cherouvim

1
ทำงาน (หรือหยุดทำงานซึ่งเป็นเป้าหมาย): ใช่ดังกล่าว แต่ใช้ได้ - ไม่
Andiih


11

ฉันไม่อยากเชื่อเลยว่านี่จะยังคงเป็นปัญหาอยู่นานหลังจากมีการรายงานแล้ว การแก้ปัญหาข้างต้นไม่ได้ผลสำหรับฉันเนื่องจากดูเหมือนว่าซาฟารีจะรู้ว่าองค์ประกอบไม่แสดงหรือปิดหน้าจออย่างไรก็ตามสิ่งต่อไปนี้ใช้งานได้สำหรับฉัน:

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

หวังว่ามีประโยชน์สำหรับใครบางคน!


1
ดังนั้นการวางก่อนหน้าฟิลด์ชื่อผู้ใช้และรหัสผ่านที่แท้จริง เบราว์เซอร์เติมเต็มสิ่งเหล่านั้นและไม่ใช่ของจริง
Andrew

11

ดังนั้นนี่คือ:

function turnOnPasswordStyle() {
  $('#inputpassword').attr('type', "password");
}
<input oninput="turnOnPasswordStyle()" id="inputpassword" type="text">


1
ดูเหมือนความคิดที่ดีถ้ากล่องข้อความสไตล์เพื่อป้องกันแฟลชของรหัสผ่านที่มองเห็นได้
Andrew

1
ขอบคุณมากนี่เป็นงานที่ +1 การเปลี่ยนแปลงของฉันในโซลูชันของคุณคือการทำโดยบรรทัดเดียว: <input oninput = "this.type = 'รหัสผ่าน'" id = "inputpassword" type = "text">
Hasnaa Ibraheem

@HasnaaIbraheem ขอบคุณ (: บางครั้งสามารถอ่านได้ดีกว่าจะดีกว่า
Stav Bodik

11

นี่เป็นปัญหาด้านความปลอดภัยที่เบราว์เซอร์ไม่สนใจในขณะนี้ เบราว์เซอร์ระบุและจัดเก็บเนื้อหาโดยใช้ชื่ออินพุตแม้ว่าผู้พัฒนาจะพิจารณาว่าข้อมูลนั้นมีความละเอียดอ่อนและไม่ควรจัดเก็บ การป้อนชื่อที่แตกต่างกันระหว่าง 2 คำขอจะช่วยแก้ปัญหาได้ (แต่จะยังคงบันทึกไว้ในแคชของเบราว์เซอร์และจะเพิ่มแคชของเบราว์เซอร์ด้วย) ขอให้ผู้ใช้เปิดใช้งานหรือปิดการใช้งานตัวเลือกในการตั้งค่าเบราว์เซอร์ไม่ใช่ทางออกที่ดี ปัญหาสามารถแก้ไขได้ในแบ็กเอนด์

นี่คือการแก้ไขของฉัน วิธีการที่ฉันได้นำไปใช้ในกรอบงานของฉัน องค์ประกอบการเติมข้อความอัตโนมัติทั้งหมดถูกสร้างขึ้นด้วยอินพุตที่ซ่อนอยู่เช่นนี้

<? $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>

เซิร์ฟเวอร์ประมวลผลตัวแปรโพสต์เช่นนี้:

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

ค่าสามารถเข้าถึงได้ตามปกติ

var_dump($_POST['username']);

และเบราว์เซอร์จะไม่สามารถแนะนำข้อมูลจากคำขอก่อนหน้านี้หรือจากผู้ใช้ก่อนหน้านี้

ทุกอย่างใช้งานได้อย่างมีเสน่ห์ถึงแม้ว่าเบราว์เซอร์จะอัปเดตก็ตามต้องการละเว้นการเติมข้อความอัตโนมัติหรือไม่ นั่นเป็นวิธีที่ดีที่สุดในการแก้ไขปัญหาสำหรับฉัน


10

ไม่มีการแฮ็กที่กล่าวถึงที่นี่ทำงานได้สำหรับฉันใน Chrome มีการอภิปรายปัญหาที่นี่: https://code.google.com/p/chromium/issues/detail?id=468153#c41

การเพิ่มสิ่งนี้ภายใน<form>ผลงาน (อย่างน้อยตอนนี้):

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

1
โปรดทราบว่าการใช้เทคนิคนี้ FireFox จะยังคงป้อนฟิลด์ที่ซ่อนอยู่ซึ่งจะรวมอยู่ในขณะที่ส่งแบบฟอร์ม อาจเป็นไปได้ว่ารหัสผ่านจะถูกถ่ายโอนผ่านการเชื่อมต่อที่ไม่ปลอดภัย โชคดีที่การเพิ่มmaxlength="0"จะป้องกันไม่ให้ firefox กรอกข้อมูลอัตโนมัติ
Mikal Schacht Jensen

9

คุณอาจใช้ในการป้อนข้อมูล

ตัวอย่างเช่น;

<input type=text name="test" autocomplete="off" />
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.