iframe'ler arasında paylaşılan otomatik doldurma: ilk teklif

Bazı formların iframe'lerde alanları var ve bu durum tarayıcının otomatik doldurmasında sorunlara neden oluyor. Üst çerçeve, paylaşılan otomatik doldurma özelliğiyle kullanıcı için daha iyi bir otomatik doldurma deneyimi desteklemek amacıyla kaynaklar arası iframe'lerin güvenilirliğini belirleyebilir.

Dominik Mengelt
Dominik Mengelt
Twitter GitHub Mastodon
Kişi adı

Kaynaklar arası iframe'de otomatik doldurmaya izin verme teklifi test için mevcuttur. Bu özellikle üst çerçeve, alanları otomatik olarak doldurulabilecek kareleri belirtebilir. Bu, özellikle hassas alanların (PCI DSS uygunluğu için) ödeme hizmeti sağlayıcı (PSP) gibi üçüncü taraf bir kaynaktan yüklenmesinin çok yaygın olduğu ödeme şekillerinde yararlıdır.

Aşağıdaki örnekte, kart sahibinin adı ve son kullanma tarihi üst düzey sayfada (veya ana çerçevede) ancak kredi kartı numarası ve doğrulama kodu PSP'nin iframe'lerindedir.

<!-- Top-level document URL: https://merchant.com/... -->
<form>
  Cardholder name:    <input id="name">
  Credit card number: <iframe src="https://psp.com/..."><input id="num"></iframe>
  Expiration date:    <input id="exp">
  CVC:                <iframe src="https://psp.com/..."><input id="cvc"></iframe>
</form>

Aşağıdaki şema, formun yapısını temsil eder:

Bir ödeme formunda farklı alanların nasıl farklı karelerde bulunduğunu gösteren ağaç diyagramı

Satıcılar için bu tasarım, güvenliği ve esnekliği bir araya getirir:

  • Kaynaklar arası iframe'ler, hassas ödeme verilerini satıcının altyapısından ayırır. Bu, PCI DSS uyumluluğuna yardımcı olur.
  • Farklı çerçevelerdeki form alanları, satıcı web sitesinin görünümüne ve tarzına uyacak şekilde düzenlenebilir.

Tarayıcı açısından bakıldığında bu, birden çok çerçeveli formların yaygın ve meşru kullanım alanlarının olduğu anlamına gelir. Bu da formlara yönelik güvenlik modeli hakkında sorular doğurur. Kullanıcılar için, aşağıdaki örnekteki gibi birden fazla çerçeveden oluşan formlar, kötü bir otomatik doldurma deneyimine yol açabilir:

Aynı kaynak politikası, kareler arasında otomatik doldurma için sağlam bir temel oluştursa da tarayıcının otomatik doldurma için güvenilir ve güvenilmeyen çerçeveleri ayırt etmesi için yeterli ayrıntı düzeyi sağlamaz.

Chrome ekibi, kullanıcı verilerinin güvenliğini sağlarken daha iyi bir otomatik doldurma deneyimi sunmak amacıyla kaynaklar arası iframe'de otomatik doldurmaya olanak tanıyan bir teklif üzerinde çalışıyor. Form, paylaşılan otomatik doldurma özelliğini kullanacak şekilde değiştirilirse Chrome, kredi kartı numarasını kaynaklar arası olarak başarıyla doldurur:

<!-- Top-level document URL: https://merchant.com/... -->
<form>
  Cardholder name:    <input id="name">
  Credit card number: <iframe src="https://psp.com/..." allow="shared-autofill"><input id="num"></iframe>
  Expiration date:    <input id="exp">
  CVC:                <iframe src="https://psp.com/..." allow="shared-autofill"><input id="cvc"></iframe>
</form>

Bu sayede kullanıcı için daha iyi bir otomatik doldurma deneyimi sunulabilir:

Paylaşılan otomatik doldurma özelliğini yerel olarak deneyin

Komut satırından işaretleri ayarlayarak, Chrome 93.0.4577.0 ve sonraki sürümlerinde masaüstü ve mobil sürümlerinde tek bir kullanıcı için paylaşılan otomatik doldurma özelliğini test edebilirsiniz.

--flag-switches-begin --enable-features=AutofillAcrossIframes,AutofillSharedAutofill

Özellik desteğini algıla

shared-autofill mülkünün müsait olup olmadığını belirlemek için aşağıdaki kodu kullanın:

if (document.featurePolicy && document.featurePolicy
      .features().includes('shared-autofill')) {
  console.log('shared-autofill available!');
}

Sonraki adım

Paylaşılan otomatik doldurma, izin politikasına otomatik doldurma özelliği eklemek için yapılan ilk tekliftir. Chrome ekibi, teklifin incelenmesi için şu anda diğer tarayıcı tedarikçileriyle çalışıyor. Ayrıca, iframe'lerde otomatik doldurma için kullanıcı deneyiminin nasıl artırılacağına ilişkin diğer teklifler de tartışılmaktadır.

Bu teklif üzerinde ilerleme kaydettikçe sizi bilgilendirmeye devam edeceğiz. Bu süreçte, üçüncü taraf sağlayıcıya ait hassas <input> alanlarının (kredi kartı numarası, cvc) yerleştirildiği bir ödeme sayfanız varsa bize ulaşın. iFrame'ler genelinde paylaşılan otomatik doldurma özelliğinin, ödeme işlemi sırasında kullanıcılarınızın otomatik doldurma deneyimini iyileştirip iyileştiremeyeceğini öğrenmek isteriz.

Daha fazla bilgi

Fotoğraf: JessicaRuscello (Unsplash)