Bazı formlarda, tarayıcı otomatik doldurma özelliğinde soruna neden olan iframe'lerde alanlar bulunur. Paylaşılan otomatik doldurma özelliğiyle üst çerçeve, kullanıcıya daha iyi bir otomatik doldurma deneyimi sunmak için kaynakta farklı olan iframe'lerin güvenilirliğini belirleyebilir.
Kaynaklar arası bir iframe'e otomatik doldurmaya izin verme önerisi test için kullanılabilir. Bu özellik sayesinde, bir üst çerçeve, alanları otomatik olarak doldurulabilir olan çerçeveleri belirleyebilir. Bu özellik, özellikle hassas alanların (PCI DSS uyumluluğu için) ödeme hizmeti sağlayıcı (PSP) gibi üçüncü taraf kaynaklarından yüklenmesi çok yaygın olan ödeme formları için kullanışlıdır.
Aşağıdaki örnekte, kart sahibinin adı ve son kullanma tarihi üst düzey sayfada (veya ana çerçevede) yer alırken kredi kartı numarası ve doğrulama kodu bir PSP'den alınan iframe'lerde yer almaktadır.
<!-- 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ı gösterir:
Satıcılar için bu tasarım güvenlik ve esnekliği bir araya getirir:
- Kaynaklar arası iFrame'ler, hassas ödeme verilerini satıcının altyapısından ayırarak 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 ve biçimlendirilebilir.
Tarayıcı açısından bu, çok çerçeveli formlar için yaygın ve meşru kullanım alanları olduğu anlamına gelir. Bu da formların güvenlik modeli hakkında sorular doğurur. Çok çerçeveli formlar, kullanıcılar için kötü bir otomatik doldurma deneyimine neden olabilir. Aşağıdaki örnekte bu durum gösterilmektedir:
Aynı kaynak politikası, çerçeveler arasında otomatik doldurma için sağlam bir referanstır ancak tarayıcının otomatik doldurma için güvenilir ve güvenilmeyen çerçeveleri ayırt etmesine yetecek düzeyde ayrıntı sağlamaz.
Chrome ekibi, kullanıcı verilerinin güvenliğini korurken daha iyi bir otomatik doldurma deneyimi sunmak için kaynak dışı bir iFrame'e otomatik doldurmaya izin veren bir teklif üzerinde çalışıyor. Form, paylaşılan otomatik doldurma özelliğini kullanacak şekilde değiştirilirse Chrome, kredi kartı numarasını kaynaktan bağımsız 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, kullanıcı için daha iyi bir otomatik doldurma deneyimi sağlayabilir:
Yerel olarak paylaşılan otomatik doldurmayı deneyin
Komut satırından işaretler ayarlayarak Chrome 93.0.4577.0 ve sonraki sürümlerde masaüstü ve mobil cihazlarda tek bir kullanıcı için paylaşılan otomatik doldurmayı test edebilirsiniz.
--flag-switches-begin --enable-features=AutofillAcrossIframes,AutofillSharedAutofill
Özellik desteğini algılama
shared-autofill mülkünün kullanılabilir olup olmadığını tespit etmek için aşağıdaki kodu kullanın:
if (document.featurePolicy && document.featurePolicy
.features().includes('shared-autofill')) {
console.log('shared-autofill available!');
}
Sırada ne var?
Paylaşılan otomatik doldurma, izin politikasına otomatik doldurma özelliği eklemeyle ilgili ilk öneridir. Chrome ekibi, teklifin incelenmesi için diğer tarayıcı tedarikçileriyle birlikte çalışıyor. IFrame'lerde otomatik doldurma için kullanıcı deneyimini iyileştirmeye yönelik başka öneriler de tartışılıyor.
Bu teklifle ilgili ilerleme kaydettikçe sizi bilgilendirmeye devam edeceğiz. Bu süre zarfında, hassas <input> alanlarının (kredi kartı numarası, cvc) üçüncü taraf sağlayıcıdan yerleştirildiği bir ödeme sayfanız varsa bize ulaşın. IFrame'ler arasında paylaşılan otomatik doldurma özelliğinin, kullanıcılarınızın ödeme işlemi sırasındaki otomatik doldurma deneyimini iyileştirip iyileştiremeyeceğini öğrenmekten memnuniyet duyarız.
Daha fazla bilgi
Fotoğraf: Unsplash'taki Jessica Ruscello