รูปแบบความมืดที่ป้อนอัตโนมัติ

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

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

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

การโต้ตอบนั้น (ที่มีปัญหา) ได้เน้นย้ำถึง ความเสี่ยงอย่างหนึ่งของการใช้คุณลักษณะการเติมข้อความอัตโนมัติ

เติมข้อความอัตโนมัติและป้อนอัตโนมัติ

อาจฟังดูคล้ายกัน แต่ autocomplete และการป้อนอัตโนมัติไม่ใช่สิ่งเดียวกัน แม้ว่า จะมี ความสัมพันธ์กันอย่างใกล้ชิด:

• ป้อนอัตโนมัติเป็นคุณลักษณะของเบราว์เซอร์ที่ช่วยให้ผู้ใช้สามารถบันทึกข้อมูล (บนเบราว์เซอร์หรือระบบปฏิบัติการ) และใช้งานบนเว็บฟอร์มได้
• autocomplete เป็นแอตทริบิวต์ HTML ที่ให้แนวทางแก่เบราว์เซอร์เกี่ยวกับวิธีการป้อนอัตโนมัติ (หรือไม่) ในช่องในแบบฟอร์มบนเว็บ

เราสามารถพูดได้ว่าการป้อนข้อความอัตโนมัติคือ "อะไร" ในขณะที่การเติม "วิธีการ" ให้เติมข้อความอัตโนมัติ เช่น การกรอกข้อมูล autofill จะเก็บข้อมูลและพยายามจับคู่ข้อมูลในเว็บฟอร์ม (ตาม name ฟิลด์ type หรือ id ) และ autocomplete จะนำทางเบราว์เซอร์ เกี่ยวกับวิธีการทำ (ข้อมูลที่คาดหวังในแต่ละฟิลด์)

การเติมข้อความอัตโนมัติเป็นคุณลักษณะที่มีประสิทธิภาพพร้อมตัวเลือกมากมายที่ช่วยให้ระบุค่าประเภทต่างๆ ได้:

• ส่วนบุคคล : ชื่อ ที่อยู่ โทรศัพท์ วันเดือนปีเกิด;
• การเงิน : หมายเลขบัตรเครดิต ชื่อ วันหมดอายุ
• ข้อมูลประชากร : สถานที่ อายุ เพศ ภาษา;
• มืออาชีพ : บริษัท และตำแหน่งงาน

ป้อนอัตโนมัติเป็นคุณลักษณะที่แพร่หลายไม่ว่าจะโดยการเลือกหรือโดยบังเอิญ: ใครบ้างที่ไม่ยินยอมให้เบราว์เซอร์บันทึก/ใช้ข้อมูลแบบฟอร์มบนเว็บ ไม่ว่าจะโดยตั้งใจหรือโดยไม่ได้ตั้งใจ และนั่นอาจเป็นปัญหาได้ โดยเฉพาะอย่างยิ่งเมื่อใช้ร่วมกับการ autocomplete ที่ไม่เหมาะสม (และจำนวนอีเมลฟิชชิ่งและข้อความ SMS ที่เพิ่มขึ้นอย่างมากในปัจจุบัน)

ความเสี่ยงด้านความเป็นส่วนตัว

คุณลักษณะทั้งสองนี้มีความเสี่ยงหลักสองประการ (อย่างน้อย) สำหรับผู้ใช้ ทั้งที่เกี่ยวข้องกับข้อมูลส่วนบุคคลและความเป็นส่วนตัว:

1. มีการเติมฟิลด์ที่มองไม่เห็น (ซึ่งไม่เหมือนกับฟิลด์ที่มีประเภทที่ซ่อนอยู่);
2. ข้อมูลที่เติมอัตโนมัติสามารถอ่านได้ผ่าน JavaScript ก่อนที่ผู้ใช้จะส่งแบบฟอร์ม

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

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

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

การทดลองเล็กๆ

ฉันทำการทดลองเล็กน้อยโดยสร้างแบบฟอร์มที่มีหลายช่องและแนบแอตทริบิวต์ autocomplete ด้วยค่าต่างๆ จากนั้นฉันเล่นเล็กน้อยกับโครงสร้างของแบบฟอร์ม:

• ฉันซ่อนฟิลด์ส่วนใหญ่โดยวางไว้ในคอนเทนเนอร์นอกจอ (แทนที่จะใช้ hidden หรือ type="hidden" );
• ฉันลบฟิลด์ที่ซ่อนอยู่ด้วยสายตาออกจากลำดับแท็บ (เพื่อให้ผู้ใช้คีย์บอร์ดมองข้ามฟิลด์ที่ซ่อนอยู่);
• ฉันพยายามจัดเรียงฟิลด์ในลำดับที่ต่างออกไป (และต้องแปลกใจที่สิ่งนี้ส่งผลต่อการป้อนอัตโนมัติ!)

ในที่สุดรหัสสำหรับแบบฟอร์มจะมีลักษณะดังนี้:

 <form method="post" action="javascript:alertData()"> <label for="name">Full name</label><input name="name" autocomplete="name" /><br/> <label for="email">Email</label><input name="email"/><br/> <label for="postal-code">ZIP</label><input name="postal-code" autocomplete="postal-code"/> <div class="hide-this"> <!-- Hidden --> <label for="firstname">First name</label><input tabindex="-1" type="hidden" name="firstname" autocomplete="given-name" /><br/> <label for="lastname">Last name</label><input tabindex="-1" name="lastname" autocomplete="family-name" /><br/> <label for="honorific-prefix">honorific-prefix</label><input tabindex="-1" name="honorific-prefix" autocomplete="honorific-prefix"/><br/> <label for="organization">Organization</label><input tabindex="-1" name="organization" /><br/> <label for="phone">Phone</label><input tabindex="-1" name="phone" autocomplete="tel" /><br/> <label for="address">address</label><input tabindex="-1" name="address" autocomplete="street-address" /><br/> <label for="city">City</label><input tabindex="-1" name="city" autocomplete="address-level2" /><br/> <label for="state">State</label><input tabindex="-1" name="state" autocomplete="address-level1" /><br/> <label for="level3">Level3</label><input tabindex="-1" name="state" autocomplete="address-level3" /><br/> <label for="level4">Level4</label><input tabindex="-1" name="state" autocomplete="address-level4" /><br/> <label for="country">Country</label><input tabindex="-1" name="country" autocomplete="country" /><br/> <label for="birthday">Birthday</label><input tabindex="-1" name="birthday" autocomplete="bday" /><br/> <label for="language">Language</label><input tabindex="-1" name="language" autocomplete="language" /><br/> <label for="sex">Sex</label><input tabindex="-1" name="sex" autocomplete="sex" /><br/> <label for="url">URL</label><input tabindex="-1" name="url" autocomplete="url" /><br/> <label for="photo">Photo</label><input tabindex="-1" name="photo" autocomplete="photo" /><br/> <label for="impp">IMPP</label><input tabindex="-1" name="impp" autocomplete="impp" /><br/> <label for="username">Username</label><input tabindex="-1" name="username" autocomplete="username" /><br/> <label for="password">Password</label><input tabindex="-1" name="password" autocomplete="password" /><br/> <label for="new-password">Password New</label><input tabindex="-1" name="new-password" autocomplete="new-password" /><br/> <label for="current-password">Password Current</label><input tabindex="-1" name="current-password" autocomplete="current-password" /><br/> <label for="cc">CC#</label><input tabindex="-1" name="cc" autocomplete="cc-number" /><br/> <label for="cc-name">CC Name</label><input tabindex="-1" name="cc-name" autocomplete="cc-name" /><br/> <label for="cc-expiration">CC expiration</label><input tabindex="-1" name="cc-expiration" autocomplete="cc-expiration" /><br/> <label for="cc-zipcode">CC Zipcode</label><input tabindex="-1" name="cc-zipcode" autocomplete="cc-postalcode" /><br/> </div> <button>Submit</button> </form>

หมายเหตุ: ฉันสร้างการสาธิตนี้มาระยะหนึ่งแล้ว และมาตรฐานคือเอกสารที่มีชีวิต ตั้งแต่นั้นมา ชื่อเติมข้อความอัตโนมัติบางชื่อก็เปลี่ยนไป ตัวอย่างเช่น ตอนนี้เราสามารถระบุ new-password current-password หรือรายละเอียดเพิ่มเติมสำหรับที่อยู่หรือบัตรเครดิตที่ไม่เคยมีมาก่อน

แบบฟอร์มนั้นมีสามช่องที่มองเห็นได้ ( name email และ zipcode ) แม้ว่าแบบฟอร์มดังกล่าวจะพบเห็นได้ทั่วไปในบริษัทประกันภัย บริษัทเคเบิล และผู้ให้บริการรายอื่นๆ แต่ก็อาจไม่แพร่หลายมากนัก ดังนั้นฉันจึงลดแบบฟอร์มนี้ให้เหลือเพียงฟิลด์อีเมลเดียว เราเห็นว่าทุกแห่งในการสมัครเว็บไซต์ จดหมายข่าว หรืออัปเดต คุณสามารถดูการสาธิตการทำงานได้ที่นี่:

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

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

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

ซาฟารี

เมื่อคุณคลิกที่ตัวควบคุมฟอร์ม Safari จะแสดงไอคอนที่ด้านขวาของฟิลด์ การคลิกจะแสดงป๊อปอัปพร้อมข้อมูลที่เบราว์เซอร์จะแชร์กับแบบฟอร์ม:

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

เมื่อฉันลดแบบฟอร์มให้เหลือแค่ช่องอีเมล Safari ก็ทำสิ่งที่น่าสนใจ ป๊อปอัปป้อนอัตโนมัติแตกต่างกัน:

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

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

เป็นเรื่องตลกที่เบราว์เซอร์แยกข้อมูลส่วนบุคคลออกจากข้อมูลบัตรเครดิต แต่ Safari เติมข้อมูลบัตรเครดิตบางส่วนตามข้อมูลส่วนบุคคล (ชื่อและ ZIP)

Firefox

การใช้การป้อนอัตโนมัติใน Firefox นั้นซับซ้อนกว่าเล็กน้อย มันไม่อัตโนมัติเหมือนใน Chrome และไม่มีไอคอนเหมือนใน Safari ผู้ใช้จะต้องเริ่มพิมพ์หรือคลิกครั้งที่สองเพื่อดูป๊อปอัปป้อนอัตโนมัติซึ่งจะมีบันทึกย่อสำหรับทุกหมวดหมู่ที่เบราว์เซอร์จะกรอก ไม่ใช่แค่ฟิลด์ที่มองเห็นได้:

การทดสอบด้วยแบบฟอร์มอีเมลเท่านั้น Firefox นำเสนอป๊อปอัปป้อนอัตโนมัติแบบเดียวกันโดยระบุว่าฟิลด์ใดที่จะเติม ไม่มีความแตกต่างแต่อย่างใด

และเช่นเดียวกับเบราว์เซอร์อื่นๆ หลังจากการป้อนอัตโนมัติ เราสามารถอ่านค่าทั้งหมดด้วย JavaScript

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

ผู้ใช้แป้นพิมพ์สามารถเลือกการป้อนข้อความอัตโนมัติโดยไม่รู้ตัว โดยการเข้าไปในกรอบป๊อปอัปและกดปุ่มแท็บ

โครเมียม

แล้วก็ถึงคราวของ Chrome (ในที่นี้ฉันใช้ “Chrome” แต่ผลลัพธ์ก็คล้ายกันสำหรับเบราว์เซอร์ที่ใช้ Chromium หลายตัวที่ทดสอบ) ฉันคลิกที่ฟิลด์และป๊อปอัปป้อนอัตโนมัติแสดงขึ้นโดยไม่มีการโต้ตอบใดๆ เพิ่มเติม แม้ว่า Firefox และ Safari จะมีหลายอย่างที่เหมือนกัน แต่ Chrome นั้นแตกต่างอย่างสิ้นเชิง: แสดงเพียงสองค่าเท่านั้น และทั้งสองค่าจะมองเห็นได้

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

การทดสอบกับแบบฟอร์มเวอร์ชันที่สองไม่ได้ดีไปกว่านี้มากนัก:

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

และทันทีที่ผู้ใช้คลิกที่ปุ่มป้อนอัตโนมัติ ข้อมูลจะพร้อมให้นักพัฒนาอ่านด้วย JavaScript:

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

ปัญหาสองข้อแรกนั้นพบได้ทั่วไปในเบราว์เซอร์ทั้งหมด/หลายตัว จนถึงจุดที่อาจถูกพิจารณาว่าเป็นคุณลักษณะ อย่างไรก็ตาม ปัญหาที่สามเป็นเอกสิทธิ์ของเบราว์เซอร์ Chromium และช่วยให้รูปแบบสีเข้มสมบูรณ์

ลักษณะการทำงานนี้จะเป็นเพียงเรื่องเล็ก ๆ น้อย ๆ และไม่ใช่ปัญหาหากไม่ใช่เพราะ Chrome ใช้ส่วนแบ่งการตลาดของเบราว์เซอร์ออนไลน์เป็นจำนวนมาก (รวมถึง Chrome และ Chromium)

รูปแบบความมืด

อย่างที่คุณอาจทราบแล้ว รูปแบบสีเข้มคือรูป แบบ UX ที่หลอกลวง ซึ่งหลอกให้ผู้ใช้ทำสิ่งที่พวกเขาอาจไม่ต้องการทำจริงๆ

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

— แฮร์รี่ Brignull, darkpatterns.org

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

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

ตราบใดที่รูปแบบสีเข้มยังคงดำเนินไป มันอาจจะผิดกฎหมายก็ได้ เนื่องจากเป็นการฝ่าฝืนหลักการหลายประการที่เกี่ยวข้องกับการประมวลผลข้อมูลส่วนบุคคลที่ระบุไว้ในมาตรา 5 ของ European General Data Protection Regulation (GDPR):

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

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

การแก้ปัญหาที่เป็นไปได้

เพื่อหลีกเลี่ยงปัญหา นักแสดงทุกคนต้องมีส่วนร่วมและช่วยแก้ไขปัญหา:

1. ผู้ใช้
2. นักพัฒนาและนักออกแบบ
3. เบราว์เซอร์

1. ผู้ใช้

สิ่งเดียวที่ด้านผู้ใช้คือต้อง แน่ใจว่าข้อมูลที่แสดงในป๊อปอัปป้อนอัตโนมัตินั้นถูกต้อง

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

2. นักพัฒนาและนักออกแบบ

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

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

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

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

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

3. เบราว์เซอร์

งานส่วนใหญ่จะต้องทำจากฝั่งเบราว์เซอร์ (โดยเฉพาะที่ฝั่ง Chromium) แต่ให้ฉันเริ่มด้วยการระบุว่าไม่ใช่ทั้งหมดที่ไม่ดีกับวิธีที่เว็บเบราว์เซอร์จัดการกับการป้อนอัตโนมัติ/เติมข้อความอัตโนมัติ หลายๆ อย่างก็ดี ตัวอย่างเช่น:

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

อย่างไรก็ตาม เว็บเบราว์เซอร์หลายๆ ตัวหรือทั้งหมดสามารถปรับปรุงบางสิ่งได้

แสดงฟิลด์ทั้งหมดที่จะเติมข้อความอัตโนมัติ

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

Firefox ทำงานได้อย่างยอดเยี่ยม ณ จุดนี้ Safari ทำงานได้ดีโดยทั่วไป และ Chrome นั้นด้อยกว่าเมื่อเทียบกับอีกสองตัว

อย่าทริกเกอร์เหตุการณ์ onChange เมื่อป้อนอัตโนมัติ

นี่อาจเป็นคำขอที่มีปัญหา เนื่องจากพฤติกรรมนี้เป็นส่วนหนึ่งของคำนิยามการป้อนอัตโนมัติในมาตรฐาน HTML:

“กลไกการเติมข้อความอัตโนมัติจะต้องดำเนินการโดยตัวแทนผู้ใช้ซึ่งทำหน้าที่เสมือนว่าผู้ใช้ได้แก้ไขข้อมูลของตัวควบคุม [...]”

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

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

ไม่อนุญาตให้ Devs อ่านช่องที่เติมข้อความอัตโนมัติก่อนส่ง

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

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

การแสดงรายการช่อง/ค่าทั้งหมดที่เบราว์เซอร์จะแชร์กับแบบฟอร์มอย่างชัดเจนจะเป็นการก้าวไปข้างหน้าที่ดี อีกสองคนเหมาะเจาะแต่มีเป้าหมายที่ยืดยาวมากกว่า ยังคงเป็นความคิดริเริ่มที่จะปรับปรุงความเป็นส่วนตัวอย่างมาก

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

บทสรุป

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

แล้วเราก็มีปัญหาเรื่องลายเข้ม สามารถหลีกเลี่ยงได้หากทุกคนทำหน้าที่ของตน:

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

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

อ่านเพิ่มเติมเกี่ยวกับ Smashing Magazine

• การออกแบบรูปแบบที่ดีขึ้น: หนึ่งสิ่งต่อหน้า (กรณีศึกษา), Adam Silver
• ความกังวลทั่วไปและความเป็นส่วนตัวในเว็บฟอร์ม Vitaly Friedman
• ทำให้รูปแบบแบบฟอร์มง่ายขึ้นด้วย accent-color , Michelle Barker
• ประเภทอินพุต HTML5: ตอนนี้พวกเขาอยู่ที่ไหน Drew McLellan
• แบบฟอร์มและการตรวจสอบความถูกต้องในปฏิกิริยาอิออน, Jerry Navi
• แนวทางปฏิบัติที่ดีที่สุดสำหรับการออกแบบฟอร์มมือถือ Nick Babich