Form ve Input Elemanlarında Autocomplete Kullanımı

Mustafa Yalcin - 09 Ocak 2019 -

Form elementlerinde yer alan Autocomplete, hem web geliştiriciler için hem tarayıcılar için tam bir kaos kurbanı olmuş durumda. Kullanılan autocomplete değerlerindeki farklılık ve tarayıcı davranışlarını bu karmaşayı çözmek için araştırdık.

Form ve Input Elemanlarında Autocomplete Kullanımı

HTML Autocomplete Özelliği

Modern tarayıcılar internet gezintimizi daha kullanıcı dostu hale getirmek için sundukları özelliklere her geçen gün bir yenisini daha ekliyor. Web sayfalarında karşılaştığımız ve belki de doldurmaksızın şuradan şuraya gitmemize izin verilmeyen web formlarının otomatik olarak doldurulması bu yeniliklerden en çok hoşumuza gideni. Bu sayede şayet kişisel bilgilerinize sıklıkla bir değişiklik yapmıyorsanız aynı bilgileri tekrar tekrar girmek zahmetinden sizi kurtarıyorlar. İsim ve soyadınızı, telefon numaranızı, adres bilgilerinizi akılda tutup, benzer form alanları ile karşılaştıklarında elinizi sıcak sudan soğuk suya sokturmamak kolaylığında bu işi tarayıcıların kendisi hallediyor.

Form ve Input Elemanlarında Autocomplete Kullanımı

Sitelerden alışveriş yaparken birkaç satırda yazdığımız uzun adres bilgimizin hatırlanarak, yeni bir alışveriş sitesinde sipariş formumuzu hızlıca doldurmasını sağlamasını kim istemez ki?

Bu iyi niyetli davranış ortak kullanıma müsait bilgisayarlar üzerinde veya kullandığımız tarayıcıya başka yöntemlerle ulaşılabilmesi durumunda, bir takım güvenlik zafiyetlerine yol açacağı görülmüştür. Örnek vermek gerekirse, çok sık kullandığınız tarayıcıyı açan bir kişi e-posta hesap parolanızın ilgili form alanında  otomatik tamamlanması sayesinde hiç zorlanmadan giriş yapabilecek.

Daha kötüsü bir ödeme formuna girdiğiniz kredi kartı bilgilerinizin hatırlanabilecek olması.

Bu gibi kötü senaryoların önüne geçmek için web yazılım geliştiricilerinin kullanımına sunulan "Autocomplete" (otomatik tamamlama) özelliğinin kontrol edilmesini sağlayan HTML  "autocomplete" attribute'ü karşımıza çıkmaktadır.

Autocomplete attribute'ü sayesinde form ve input elemanları için tanımlanan bu özellik ile hassas verilerimizin tarayıcı belleğinde saklanıp saklanmayacağı web sitelerince kontrol edilebilmektedir.

Modern tarayıcıların sunduğu bu özelliği kullanmak için "on" veya "off" gibi (aktif ya da deaktif etme) seçeneği dışında, hangi form elemanları için geçerli olabileceğini de kontrol edebileceğimiz seçenekler mevcut.  Form elemanlarının id değerini kullanarak örneğin:"email","fullname", "address", "address-line-1", "country" gibi otomatik tamamlama özelliğinin belirli form elemanlarında etkin olmasını sağlayabiliriz.

Biz bu yazıda autocomplete özelliğini güvenlik açısından ele alacağımız için "on" ve "off" değerleri üzerinde duracağız.

Autocomplete özelliğini form alanlarında etkinleştirmek ya da devredışı bırakmak için, ilgili form alanının autocomplete attribute’ünü aşağıdaki şekilde set etmemiz gerekmekte:

<input type="text" name="email_address" autocomplete="on" />
<input type="text" name="email_password" autocomplete="off" />

Görüleceği üzere, email adres bilgisinin tekrar hatırlanmasını sağlamak amacıyla ilgili girdi alanının autocomplete attribute’ünü "on" olarak set ettik.

E-posta parolası için kullanılan girdi alanı için ise bu bilginin hatırlanmasının güvenlik riski doğurabileceği düşünülerek web siteniz tarafından autocomplete "off" özelliği ile tarayıcıya bu bilgiyi hatırlamaması gerektiği belirtilmiştir.

Form elemanları üzerinde tanımlandığında ise biraz önce bahsettiğimiz işlevin tamamını form alanı içerisinde yer alan input elemanları için uygulamaktadır.

Autocomplete attribute’ünü input alanlarında kullanmanın yanı sıra, form elemanlarının özelliği olarak da set edebiliriz. Böylece autocomplete için verdiğimiz talimat form'a ait tüm elemanlar için geçerli olacaktır:

Örneğin:

<form action="payment.php" method="post" autocomplete="off">
	CC Holder Fullname:
		<input type="text" name="credit-card-fullname" autocomplete="on" />
	CC No:
		<input type="text" name="credit-card-no" />
	CC CVV/CVV2:
		<input type="text" name="credit-card-cvv" >
	Pay 1337 $:
		<input type="submit" />
</form>

Form'un autocomplete özelliğinin "off" olarak set edilmesi ile yukarıdaki formun tüm elemanları için bir talimat verilmiş olup, formun elemanları üzerinden yapılacak ikinci bir autocomplete talimatının form kapsamındaki autocomplete talimatını, ilgili eleman özelinde ezdiği görülecektir. Bu kullanım ile kredi kartı sahibi ad soyad bilgisini içeren alanda autocomplete "on" değeri girildiği için ad soyad bilgisinin hariç tutularak hatırlanması sağlanılmak istenmiştir.

Peki autocomplete özelliği web siteniz tarafından hiç tanımlanmaz ve web site geliştiricileri tarafından göz ardı edilirse, bu durumda tarayıcılar nasıl bir davranış sergileyecek?

Örnek bir kullanımın şöyle olduğu durumda:

<input type="text" name="email_address" />
<input type="text" name="email_password" />

Web siteleri tarafından autocomplete değeri hususen "off" olarak set edilmediği durumlarda, HTML elemanlarının autocomplete değeri için varsayılan değer "on" olarak kabul edilir ve tarayıcı bu girdi alanları için otomatik tamamlama özelliğini kullanmaya / teklif etmeye devam eder.

Autocomplete Özelliğine Güvenlik Açısından Bakış

Teknik detayların bu kadar açık ve net olduğu bir özellikten bahsediyoruz. Fakat bunların yanı sıra bu özelliği güvenlik açısından ele almamızı gerektiren bazı sebepler var:

  1. Web yazılım geliştiriciye ait hatalar
  2. Tarayıcılara ait hatalar
  3. İnternete bağlı daha çok insan, daha çok veri ve entegre çözümler sunma ihtiyaçları

1. Web yazılım geliştiriciye ait hatalar

Autocomplete özelliğini etkinleştirmek ya da devre dışı bırakmak için geliştiriciler tarafından atanan değerler bu özelliğin beklendiği şekilde davranmamasına sebebiyet vermektedir.

Autocomplete değerinin alabildiği değerler "on", "off" seçeneklerinden ibaret iken, bu bilgilerin "true", "false" olarak kullanıldığı görülmüştür. Bu değerler geçersiz ifadeler olduğu için tarayıcılar tarafından, varsayılan davranış olan hatırlama işlemine ilgili form ya da input alanları için devam edilecektir.

2. Tarayıcılara ait hatalar

Tüm suçu web yazılım geliştiricilere yıkmak doğru olmayacaktır. Web yazılım geliştiricilerinin bu özelliği doğru değer ile kullandığı durumlarda bile popüler tarayıcıların kimi versiyonlarındaki yazılımsal hatalardan (bug) kaynaklı olarak, hatırlanmaması istenen bilgilerin de ısrarla kaydedilmeye çalışıldığı veya tam tersi hatırlanması istenen input alanlarındaki girdilerin hatırlanmadığı görülmüştür.

Bazı tarayıcı geliştiricileri bu hataları düzeltmişler ya da autofill (otomatik tamamlama) seçenekleri ile ilgili geliştirmelerden dolayı göz ardı ettiklerini yani durumun farkında olduklarını belirtip web yazılım geliştiricilerini çıkmaza sürüklemişlerdir.

Bu tarz durumlarda kişisel güvenliğine önem veren insanların tepkisini dindirmek için tarayıcı geliştiricileri autofill özelliğini saklanan verileri şifreleyerek yerel bilgisayarda veya bulut hizmetleri altında depolamaya yönelik ek seçeneklerle donatmışlardır.

Web tarayıcılarının kendilerini yenileme politikaları ve aynı standartları farklı yorumlamalarından ötürü web yazılım geliştiricilerinin mağdur olduğunu söylememiz gerekir.

3. İnternete bağlı daha çok insan, daha çok veri ve entegre çözümler sunma ihtiyaçları

Daha önce "Haftanın Hackleri" yazı serimizde bahsettiğimiz Bu kullanım kolaylıkları her ne kadar çağımızdaki "hız" konusunda bizlere kolaylık sağlamak amaçlı olsa bile saldırganlar tarafından her yeni özellik yeni bir istismar yöntemi ile bizleri tehdit altına alıyor. Buraya kadar değindiğimiz şekilde saldırganların iştahlarını kabartan özelliklerden biri de tarayıcıların bu otomatik tamamlama özelliği."Web Trackerlar Browserların Parola Yöneticilerini İstismar mı Ediyor?" adlı başlıkta da autofill özelliğinin saldırganlar tarafından nasıl suistimal edilebileceğini gözlemlemiştik.

Autocomplete Özelliğine Dair İstatistiki Veriler

Autocomplete özelliği söz konusu olduğunda tarayıcıların sergiledikleri davranışlara dair edindiğimiz sonuçları aşağıda sizlerle paylaşıyor olacağız.

Testlerimizi hangi koşullarda yaptık

    1. Autocomplete özelliğinin doğru kullanım örneklerinin (on/off değerleri) yanı sıra hatalı popüler kullanım örnekleri ele alınmıştır (true/false değerleri).
    2. Input elemanlarının tiplerine [Type=Text, Type=Password] göre farklılık içerip içermediğini incelemek için text ve password tipleri için ayrı ayrı testler yapılmıştır.
    3. Input elemanlarına verilen isimlerinin [Name=*] farklılık gösterip göstermediğini incelemek için "Username", "Password", "x", "y" gibi 4 farklı input adı kullanılmıştır.
    4. Kredi kartı formlarının testi için, input alanlarında aşağıdaki hususlara dikkat edilmiştir:
      • Input elemanlarının tipleri: [Type=Text, Type=Date] formatında
      • Input elemanlarının isimlendirilmesinde (Name veya ID) bilgisinin değerleri:
      • Name & Surname
      • creditCard
      • expireMonth
      • expireYear
      • CVV
    5. Testler hem güvenli (SSL), hem güvensiz (insecure) bağlantı üzerinden tekrarlanarak oluşturulmuştur.
    6. Testlerimiz sırasında 3 popüler tarayıcı seçilmiştir:
      • Google Chrome Version 71.0.3578.98 (64-bit)
      • Microsoft Edge 44.17763.1.0 (Microsoft EdgeHTML18.17746)
      • Mozilla Firefox 63.0.3

Test Sonuçları

A. Autocomplete değerinin doğru kullanımdaki tarayıcı farklılıkları:

  1. Autocomplete özelliği "on" olduğu durumlarda, input elemanının "text" tipinde, input[Name] değeri ve HTTP/HTTPS bağlantısı farketmeksizin;
    • Google Chrome tarafından autofill (otomatik tamamlama) yapılmaktadır.
      Beklenen davranış.
    • Microsoft Edge tarafından autofill (otomatik tamamlama) yapılmaktadır.
      Beklenen davranış.
    • Mozilla Firefox tarafından autofill (otomatik tamamlama) yapılmaktadır.
      Beklenen davranış.
  1. Autocomplete özelliği "off" olduğu durumlarda, input elemanının "text" tipinde, input[Name] değeri ve HTTP/HTTPS bağlantısı farketmeksizin;
    • Google Chrome tarafından autofill (otomatik tamamlama) yapılmamaktadır.
      Beklenen davranış.
    • Microsoft Edge tarafından autofill (otomatik tamamlama) yapılmamaktadır.
      Beklenen davranış.
    • Mozilla Firefox tarafından autofill (otomatik tamamlama) yapılmamaktadır.
      Beklenen davranış.

onofftext

  1. Autocomplete özelliğinin "on" olduğu durumlarda, input elemanının "password" tipinde, input[Name] değeri ve HTTP/HTTPS bağlantısı farketmeksizin;
    • Google Chrome tarafından autofill (otomatik tamamlama) yapılmaktadır.
      Beklenen davranış.
    • Microsoft Edge tarafından autofill (otomatik tamamlama) yapılmamaktadır.
      Beklenen davranış.
    • Mozilla Firefox tarafından autofill (otomatik tamamlama) yapılmaktadır.
      Beklenen davranış.
  1. Autocomplete özelliği "off" olduğu durumlarda, input elemanının "password" tipinde, input[Name] değeri ve HTTP/HTTPS bağlantısı farketmeksizin;
    • Google Chrome tarafından autofill (otomatik tamamlama) yapılmaktadır.
      Beklenmeyen davranış.
    • Microsoft Edge tarafından autofill (otomatik tamamlama) yapılmaktadır.
      Beklenmeyen davranış.
    • Mozilla Firefox tarafından autofill (otomatik tamamlama) yapılmaktadır.
      Beklenmeyen davranış.

onoffpassword

B. Autocomplete değerinin hatalı kullanımdaki tarayıcı farklılıkları;

  1. Autocomplete özelliğinin "false" ve "true" olduğu her iki durum için, input elemanının "text" tipinde, input[Name] değeri ve HTTP/HTTPS bağlantısı farketmeksizin;
    • Google Chrome tarafından autofill (otomatik tamamlama) yapılmaktadır.
      Beklenen davranış.
    • Microsoft Edge tarafından autofill (otomatik tamamlama) yapılmaktadır.
      Beklenen davranış.
    • Mozilla Firefox tarafından autofill (otomatik tamamlama) yapılmaktadır.
      Beklenen davranış.

truefalsetext

  1. Autocomplete özelliğinin "false" ve "true" olduğu her iki durum için, input elemanının "password" tipinde, input[Name] değeri ve HTTP/HTTPS bağlantısı farketmeksizin;
    • Google Chrome tarafından autofill (otomatik tamamlama) yapılmaktadır.
      Beklenen davranış.
    • Microsoft Edge tarafından autofill (otomatik tamamlama) yapılmaktadır.
      Beklenen davranış.
    • Mozilla Firefox tarafından autofill (otomatik tamamlama) yapılmaktadır.
      Beklenen davranış.

truefalsepassword

C. Autocomplete değerinin kredi kartı formları üzerinde kullanıldığındaki tarayıcı farklılıkları;

  1. Autocomplete özelliğinin "on" ve "off" değeri farketmeksizin, website bağlantı url'i "HTTPS" bağlantısına sahip olduğu durumda;
    • Google Chrome tarafından autofill (otomatik tamamlama) yapılmaktadır.
      “On” değerinde: Beklenen davranış.
      “Off” değerinde: Beklenmeyen davranış.
    • Microsoft Edge tarafından autofill (otomatik tamamlama) yapılmaktadır.
      “On” değerinde: Beklenen davranış.
      “Off” değerinde: Beklenmeyen davranış.
    • Mozilla Firefox tarafından autofill (otomatik tamamlama) yapılmaktadır.
      “On” değerinde: Beklenen davranış.
      “Off” değerinde: Beklenmeyen davranış.
  1. Autocomplete özelliğinin "on" ve "off" değeri farketmeksizin, website bağlantı url'i "HTTP" bağlantısına sahip olduğu durumda;
    • Google Chrome tarafından autofill (otomatik tamamlama) yapılmamaktadır.
      Beklenen davranış.
    • Microsoft Edge tarafından autofill (otomatik tamamlama) yapılmaktadır.
      “On” değerinde: Beklenmeyen davranış.
      “Off” değerinde:  Beklenen davranış.
    • Mozilla Firefox tarafından autofill (otomatik tamamlama) yapılmamaktadır.
      Beklenen davranış.

onoffccname

  1. Autocomplete özelliğinin "true" ve "false" değeri farketmeksizin, website bağlantı url'i "HTTPS" bağlantısına sahip olduğu durumda;
    • Google Chrome tarafından autofill (otomatik tamamlama) yapılmaktadır.
      Beklenmeyen davranış.
    • Microsoft Edge tarafından autofill (otomatik tamamlama) yapılmaktadır.
      Beklenmeyen davranış.
    • Mozilla Firefox tarafından autofill (otomatik tamamlama) yapılmaktadır.
      Beklenmeyen davranış.
  1. Autocomplete özelliğinin "true" ve "false" değeri farketmeksizin, website bağlantı url'i "HTTP" bağlantısına sahip olduğu durumda;
    • Google Chrome tarafından autofill (otomatik tamamlama) yapılmamaktadır.
      Beklenen davranış.
    • Microsoft Edge tarafından autofill (otomatik tamamlama) yapılmaktadır.
      Beklenmeyen davranış.
    • Mozilla Firefox tarafından autofill (otomatik tamamlama) yapılmamaktadır.
      Beklenen davranış.

truefalseccname

Test Sonuçlarının Yorumlanması

  • Google Chrome tarayıcısının input elemanında type=text tipi için beklendiği gibi çalışmaktadır, type=password için autofill (otomatik tamamlama) işleminde autocomplete özelliğinin değeri göz ardı edilmektedir.
  • Microsoft Edge tarayıcısının input elemanında type=text tipi için beklendiği gibi çalışmaktadır, type=password tipi için ise değerlerden bağımsız olarak her zaman autofill (otomatik tamamlama) işleminde autocomplete özelliğinin değeri göz ardı edilmektedir.
  • Mozilla Firefox tarayıcısının input elemanında type=text tipi için beklendiği gibi çalışmaktadır, type=password tipi için autofill (otomatik tamamlama) işleminde autocomplete özelliğinin değeri göz ardı edilmektedir.
  • Autocomplete için true ve false kullanımının teknik dokümanlarda belirtilen on ve off değerlerinin yerine kullanılmaması gerektiğini, hatalı bir kullanım olduğunu görüyoruz.
  • Autocomplete için true ve false standartlara uygun tanımlar olmadığından tarayıcılar tarafından farklı davranış gözlemlemek kabul edilebilir. Tarayıcılardan Mozilla Firefox dışında Google Chrome ve Microsoft Edge geçersiz autocomplete değerleri ile karşılaştıklarında varsayılan olarak autofill (otomatik tamamlama) yapmaktadır. Mozilla Firefox'ta ise bu konu daha güvenli bir yaklaşım ile otomatik tamamlama varsayılan olarak yapılmamaktadır.
  • Tarayıcıların Autofill (otomatik tamamlama) özelliklerinin input elemanının isim ([Name]) bağımsız olduğunu, input elemanının sadece autocomplete değerine ve input tipine [text,password] bağlı değişkenlik gösterdiğini anlıyoruz.
  • Tarayıcıların kredi kartı bilgilerini saklamaları noktasında web geliştiricilerinin autocomplete özelliğinin değerinden bağımsız olarak göz ardı etmektedir. Sadece website bağlantısının SSL aracılığı (HTTPS) ile yapılıp yapılmadığını kontrol etmektedirler. Güvenli olmayan (HTTP) bağlantılarda ortadaki adam (MiTM) saldırılarına kullanıcıları maruz bırakmamak adına autofill işleminin devre dışı bırakmasını da tarayıcıların bu konuyu insiyatiflerinde ve ciddiyetle değerlendirdiklerine işaret etmektedir.

Kaynaklar

https://www.w3.org/TR/html5/single-page.html#autofilling-form-controls:-the-autocomplete-attribute
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete
https://www.netsparker.com.tr/blog/web-guvenligi/Web-Trackerlar-Parola-Yoneticilerini-Istismar-mi-Ediyor/

Mustafa Yalcin

About the Author

Mustafa Yalcin

Code is Poetry.