weschool - خصائص input في html




كيف يمكنك تعطيل الإكمال التلقائي للمتصفح في حقل/علامة إدخال نموذج الويب؟ (20)

أعتقد أن autocomplete=off معتمد في HTML 5.

اسأل نفسك عن سبب رغبتك في القيام بذلك - قد يكون ذلك منطقيًا في بعض المواقف ولكن لا تفعل ذلك لمجرد القيام بذلك.

إنه أقل ملاءمة للمستخدمين وليس مشكلة أمنية في نظام التشغيل X (المذكورة من قبل Soren أدناه). إذا كنت قلقًا بشأن سرقة الأشخاص عن بُعد عن بُعد - لا يزال بإمكان مسجل المفاتيح أن يفعل ذلك على الرغم من أن التطبيق يستخدم autcomplete=off .

كمستخدم يختار أن يتذكر متصفح (معظم) معلوماتي ، أجدها مزعجة إذا لم يتذكر موقعك موقعي.

كيف يمكنك تعطيل autocomplete في المتصفحات الرئيسية input محدد (أو form field


أفضل حل:

منع اسم مستخدم الإكمال التلقائي (أو البريد الإلكتروني) وكلمة المرور:

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

منع الإكمال التلقائي للحقل:

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

Explanation: autocomplete مستمر في العمل في <input> ، autocomplete="off" لا يعمل ، لكن يمكنك التغيير الى سلسلة عشوائية ، مثل nope .

يعمل في:

  • 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 و 58


بالإضافة إلى autocomplete=off ، يمكنك أيضًا اختيار أسماء حقول النموذج الخاصة بك بطريقة عشوائية من خلال الكود الذي ينشئ الصفحة ، ربما عن طريق إضافة بعض السلسلة الخاصة بجلسة إلى نهاية الأسماء.

عند إرسال النموذج ، يمكنك تجريد ذلك الجزء قبل معالجته من جانب الخادم. هذا سيمنع مستعرض الويب من العثور على سياق لحقلك وقد يساعد أيضًا في منع هجمات XSRF لأن المهاجم لن يكون قادرًا على تخمين أسماء الحقول لتقديم نموذج.


تتجاهل الآن معظم برامج التصفح الرئيسية ومديري كلمات المرور (بشكل صحيح ، IMHO) autocomplete=off .

لماذا ا؟ أضافت العديد من البنوك ومواقع الويب الأخرى "عالية الأمان" autocomplete=off إلى صفحات تسجيل الدخول الخاصة بهم "لأغراض أمنية" ، لكن هذا يقلل من الأمان نظرًا لأنه يتسبب في تغيير كلمة المرور للأشخاص على هذه المواقع ذات الأمان العالي (وبالتالي كسرها ) منذ تم إلغاء الإكمال التلقائي.

منذ وقت طويل ، بدأ معظم مديري كلمات المرور في تجاهل autocomplete=off ، والآن بدأت المتصفحات تفعل الشيء نفسه بالنسبة لإدخالات اسم المستخدم / كلمة المرور فقط.

لسوء الحظ ، تقوم الأخطاء في تطبيقات الإكمال التلقائي بإدخال معلومات اسم المستخدم و / أو كلمة المرور في حقول النماذج غير المناسبة ، مما يتسبب في حدوث أخطاء في التحقق من صحة النموذج ، أو ما هو أسوأ من ذلك ، بإدخال أسماء المستخدمين بطريق الخطأ في الحقول التي تركها المستخدم فارغًا عن قصد.

ما المطور على شبكة الإنترنت أن تفعل؟

  • إذا كان بإمكانك الاحتفاظ بجميع حقول كلمة المرور على الصفحة بمفردها ، فهذه بداية رائعة ، حيث يبدو أن وجود حقل كلمة المرور هو المشغل الرئيسي لإكمال المستخدم / مرور الإكمال التلقائي. وإلا ، اقرأ النصائح أدناه.
  • يلاحظ Safari وجود حقلين لكلمة المرور وتعطيل الإكمال التلقائي في هذه الحالة ، على افتراض أنه يجب أن يكون نموذج تغيير كلمة المرور ، وليس نموذج تسجيل دخول. لذلك تأكد فقط من استخدام حقلي كلمة مرور (جديد وتأكيد جديد) لأي نماذج تسمح بها
  • سيحاول Chrome 34 ، للأسف ، ملء الحقول تلقائيًا بالمستخدم / المرور كلما رأى حقل كلمة مرور. هذا خطأ سيئ جدًا ونأمل أن يغيروا سلوك Safari. ومع ذلك ، يبدو أن إضافة هذا إلى أعلى النموذج الخاص بك تعطيل الملء التلقائي للكلمة:

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

لم أحقق بعد في IE أو Firefox بدقة ولكن سأكون سعيدًا بتحديث الإجابة إذا كان لدى الآخرين معلومات في التعليقات.


حاول أن تضيف

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');" >


تحديث: هنا مثال كامل أدناه بناءً على هذا النهج الذي يمنع السحب والإفلات ، النسخ ، اللصق ، إلخ.

<input type="text" name="UserName" style="text-transform:lowercase;" placeholder="Username" 
    autocomplete="off" readonly onfocus="this.removeAttribute('readonly');" 
    oncopy="return false" ondrag="return false" ondrop="return false" 
    onpaste="return false" oncontextmenu="return false" > 

<input type="password" name="Password" placeholder="Password" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" oncopy="return false" ondrag="return false" 
    ondrop="return false" onpaste="return false" oncontextmenu="return false" >

تم اختباره على أحدث إصدارات المتصفحات الرئيسية مثل Google Chrome و Mozilla Firefox و Microsoft Edge وما إلى ذلك والعمل دون أي مشكلة. أتمنى أن يساعدك هذا...


على صلة أو في الواقع ، على العكس تماما -

"إذا كنت مستخدم النموذج المذكور أعلاه وتريد إعادة تمكين وظيفة الإكمال التلقائي ، فاستخدم إشارة مرجعية" تذكر كلمة المرور "من صفحة الإشارات المرجعية هذه. إنها تزيل جميع سمات autocomplete="off" من جميع النماذج على الصفحة. خوض معركة جيدة! "


كما قال الآخرون ، الإجابة هي autocomplete="off"

ومع ذلك ، أعتقد أنه يجدر ذكر السبب في أنه من الجيد استخدام هذا في بعض الحالات ، حيث إن بعض الإجابات على هذا السؤال duplicate الأسئلة تشير إلى أنه من الأفضل عدم إيقاف تشغيله.

لا ينبغي ترك إيقاف المتصفحات التي تخزن أرقام بطاقات الائتمان للمستخدمين. لن يدرك الكثير من المستخدمين أنها مشكلة.

من المهم بشكل خاص إيقاف تشغيله في الحقول الخاصة برموز أمان بطاقة الائتمان. كما تنص هذه الصفحة :

"لا تقم أبدًا بتخزين رمز الأمان ... تعتمد قيمته على افتراض أن الطريقة الوحيدة لتزويده هي قراءته من بطاقة الائتمان المادية ، مما يثبت أن الشخص الذي يزودها به يحمل البطاقة بالفعل".

تكمن المشكلة في أنه إذا كان جهاز كمبيوتر عامًا (مقهى إنترنت ، مكتبة إلخ) ، فمن السهل على المستخدمين الآخرين سرقة تفاصيل بطاقتك ، وحتى على جهازك الخاص يمكن أن يسرق موقع ويب ضار بيانات الإكمال التلقائي .


لا تؤدي إضافة autocomplete="off" قصه.

تغيير سمة نوع الإدخال إلى type="search" .
لا تطبق Google ميزة الملء التلقائي على المدخلات بنوع البحث.


لقد استخدمنا بالفعل فكرة sasb لموقع واحد. لقد كان تطبيق ويب طبيًا لتشغيل مكتب الطبيب. ومع ذلك ، كان العديد من عملائنا من الجراحين الذين استخدموا الكثير من محطات العمل المختلفة ، بما في ذلك المحطات شبه العامة. لذا ، فقد أرادوا التأكد من أن الطبيب الذي لا يفهم الآثار المترتبة على كلمات المرور المحفوظة تلقائيًا أو أنه لا ينتبه لا يمكنه ترك معلومات تسجيل الدخول الخاصة بهم عن طريق الخطأ. بالطبع ، كان هذا قبل فكرة التصفح الخاص التي بدأت تظهر في IE8 ، FF3.1 ، إلخ. ومع ذلك ، يضطر العديد من الأطباء إلى استخدام متصفحات المدارس القديمة في المستشفيات مع تكنولوجيا المعلومات التي لن تتغير.

لذلك ، كان لدينا صفحة تسجيل الدخول إنشاء أسماء الحقول العشوائية التي ستعمل فقط لهذا المنصب. نعم ، إنها أقل ملاءمة ، ولكنها تضغط على المستخدم أكثر من مجرد عدم تخزين معلومات تسجيل الدخول على المحطات العامة.


لقد جربت حلولًا لا نهاية لها ، ثم وجدت هذا:

بدلاً من autocomplete="off" ما autocomplete="false" سوى استخدام autocomplete="false"

بهذه البساطة ، ويعمل مثل السحر في جوجل كروم كذلك!


لم ينجح أي من الحلول في هذه المحادثة.

أخيرًا ، اكتشفت حلاً HTML خالصًا لا يتطلب جافا سكريبت ، ويعمل في المتصفحات الحديثة (باستثناء IE ؛ كان لا بد من صيد واحد على الأقل ، أليس كذلك؟) ، ولا يتطلب منك تعطيل الإكمال التلقائي للنموذج بأكمله.

ما عليك سوى إيقاف تشغيل الإكمال التلقائي في 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>

متأخراً قليلاً على اللعبة ... لكني واجهت هذه المشكلة وحاولت العديد من الإخفاقات ، لكن هذه المشكلة تناسبني وجدت على MDN

في بعض الحالات ، سيستمر المتصفح في اقتراح قيم الإكمال التلقائي حتى إذا تم تعيين سمة الإكمال التلقائي على إيقاف. هذا السلوك غير متوقع يمكن أن يكون محيرا للغاية للمطورين. الحيلة لفرض عدم الإكمال هي تعيين سلسلة عشوائية للسمة مثل:

autocomplete="nope"

مضيفا

autocomplete="off"

إلى علامة النموذج ، سيتم تعطيل الإكمال التلقائي للمستعرض (ما تم كتابته مسبقًا في هذا الحقل) من جميع حقول input داخل هذا النموذج المحدد.

اختبارها على:

  • Firefox 3.5، 4 BETA
  • انترنت اكسبلورر 8
  • كروم

هذا يعمل لي.

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

يمكننا أيضا استخدام هذه الاستراتيجية في عناصر التحكم الأخرى مثل النص ، حدد إلخ


يتمثل حل 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 من أن تغييراتك نافذة المفعول ، وحفظ المستعرضات في كثير من الأحيان الصفحة في ذاكرة التخزين المؤقت ، مما أعطاني انطباعًا سيئًا بأنها لم تنجح ، ولكن المستعرض لم يجلب التغييرات بالفعل.


يجب أن أختلف مع تلك الإجابات التي تقول لتجنب تعطيل الإكمال التلقائي.

أول شيء يجب إحضاره هو أن الإكمال التلقائي لعدم تعطيله بشكل صريح في حقول نموذج تسجيل الدخول هو فشل PCI-DSS. بالإضافة إلى ذلك ، إذا تم اختراق الجهاز المحلي للمستخدمين ، فيمكن للمهاجمين الحصول على بيانات تكميلية كاملة بشكل تافه نظرًا لأنه يتم تخزينها بشكل واضح.

هناك بالتأكيد حجة حول قابليتها للاستخدام ، ولكن هناك توازن جيد للغاية عندما يتعلق الأمر بحقول النماذج التي يجب أن يكون الإكمال التلقائي معطلاً وأيها لا ينبغي.


يمكنك استخدام في المدخلات.

فمثلا؛

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

جرب هذه أيضًا إذا autocomplete="off"لم تنجح:

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

لا شيء من الخارقة المذكورة هنا عملت بالنسبة لي في كروم. هناك مناقشة لهذه المشكلة هنا: 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>

هذه مشكلة أمان يتجاهلها المستعرضون الآن. تقوم المتصفحات بتحديد وتخزين المحتوى باستخدام أسماء المدخلات ، حتى إذا اعتبر المطورون أن المعلومات حساسة ويجب عدم تخزينها. سيؤدي إنشاء اسم إدخال مختلفًا بين طلبين إلى حل المشكلة (ولكن سيظل حفظها في ذاكرة التخزين المؤقت للمتصفح وسيؤدي أيضًا إلى زيادة ذاكرة التخزين المؤقت للمتصفح). مطالبة المستخدم بتنشيط أو إلغاء تنشيط الخيارات في إعدادات متصفحه ليس حلاً جيدًا. يمكن إصلاح المشكلة في الخلفية.

ها هو الإصلاح الخاص بي. مقاربة قمت بتنفيذها في إطاري. يتم إنشاء جميع عناصر الإكمال التلقائي مع إدخال مخفي مثل هذا:

<? $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']);

ولن يتمكن المتصفح من اقتراح معلومات من الطلب السابق أو من المستخدمين السابقين.

تعمل جميعها كأنها سحر ، حتى لو كانت تحديثات المتصفحات ، تريد تجاهل الإكمال التلقائي أو لا. كانت هذه هي أفضل طريقة لإصلاح المشكلة بالنسبة لي.





autocomplete