Beberapa formulir memiliki kolom di iframe, yang menyebabkan masalah untuk isi otomatis browser. Dengan isi otomatis bersama, frame induk dapat menentukan tingkat kepercayaan iframe lintas-asal, untuk mendukung pengalaman isi otomatis yang lebih baik bagi pengguna.
Proposal untuk mengizinkan isi otomatis ke iframe lintas-asal tersedia untuk pengujian. Dengan fitur ini, frame induk dapat menetapkan frame yang kolomnya harus dapat diisi otomatis. Hal ini sangat berguna untuk formulir pembayaran, yang sangat umum untuk kolom sensitif (untuk kepatuhan PCI DSS) dimuat dari asal pihak ketiga seperti penyedia layanan pembayaran (PSP).
Dalam contoh berikut, nama pemegang kartu dan tanggal habis masa berlaku berada di halaman tingkat atas (atau frame utama), tetapi nomor kartu kredit dan kode verifikasi berada di iframe dari PSP.
<!-- 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>
Diagram berikut menunjukkan struktur formulir:
Bagi penjual, desain ini menggabungkan keamanan dan fleksibilitas:
- Iframe lintas origin mengisolasi data pembayaran sensitif dari infrastruktur penjual, yang membantu kepatuhan PCI DSS.
- Kolom formulir dalam bingkai yang berbeda dapat diatur dan diberi gaya agar sesuai dengan tampilan dan nuansa situs penjual.
Dari perspektif browser, hal ini berarti ada kasus penggunaan yang umum dan sah untuk formulir multi-frame, yang menimbulkan pertanyaan tentang model keamanan untuk formulir. Bagi pengguna, formulir multi-frame dapat menyebabkan pengalaman isi otomatis yang buruk, seperti contoh berikut:
Kebijakan origin yang sama adalah dasar yang solid untuk pengisian otomatis di seluruh frame, tetapi tidak memberikan tingkat perincian yang memadai bagi browser untuk membedakan antara frame tepercaya dan tidak tepercaya untuk pengisian otomatis.
Untuk memungkinkan pengalaman isi otomatis yang lebih baik sekaligus menjaga keamanan data pengguna, tim Chrome sedang mengerjakan proposal yang memungkinkan isi otomatis ke iframe lintas origin. Jika formulir diubah untuk menggunakan isi otomatis bersama, Chrome berhasil mengisi nomor kartu kredit lintas-asal:
<!-- 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>
Hal ini dapat menghasilkan pengalaman isi otomatis yang lebih baik bagi pengguna:
Mencoba isi otomatis bersama secara lokal
Anda dapat menguji isi otomatis bersama untuk satu pengguna di Chrome 93.0.4577.0 dan yang lebih baru di desktop dan seluler dengan menetapkan flag dari command line.
--flag-switches-begin --enable-features=AutofillAcrossIframes,AutofillSharedAutofill
Mendeteksi dukungan fitur
Gunakan kode berikut untuk mendeteksi apakah properti shared-autofill tersedia:
if (document.featurePolicy && document.featurePolicy
.features().includes('shared-autofill')) {
console.log('shared-autofill available!');
}
Apa langkah selanjutnya?
Isi otomatis bersama adalah proposal awal untuk menambahkan fitur isi otomatis ke kebijakan izin. Tim Chrome saat ini sedang bekerja sama dengan vendor browser lain untuk meninjau proposal tersebut. Proposal lebih lanjut tentang cara meningkatkan pengalaman pengguna untuk isi otomatis di seluruh iframe juga sedang dibahas.
Kami akan terus memberikan kabar terbaru seiring kami membuat progres dengan proposal ini. Sementara itu, jika Anda memiliki halaman checkout tempat kolom <input> sensitif (nomor kartu kredit, cvc) disematkan dari penyedia pihak ketiga, hubungi kami. Kami ingin mengetahui apakah isi otomatis bersama di seluruh iframe berpotensi meningkatkan pengalaman isi otomatis pengguna selama proses checkout.
Cari tahu selengkapnya
- Proposal saat ini
- Peninjauan TAG W3C
- Contoh formulir pembayaran yang digunakan dalam postingan ini
- Apa yang dimaksud dengan flag Chrome?
Foto oleh Jessica Ruscello di Unsplash.