Isi otomatis bersama di seluruh iframe: proposal awal

Beberapa formulir memiliki kolom di iframe, yang menyebabkan masalah untuk isi otomatis browser. Dengan isi otomatis bersama, frame induk dapat menentukan kredibilitas iframe lintas origin untuk mendukung pengalaman isi otomatis yang lebih baik bagi pengguna.

Dominik Mengelt
Dominik Mengelt
Twitter GitHub Mastodon
Budiman

Proposal untuk mengizinkan isi otomatis ke iframe lintas origin tersedia untuk pengujian. Dengan fitur ini, frame induk dapat menentukan frame yang kolomnya harus dapat diisi otomatis. Hal ini sangat berguna untuk formulir pembayaran, karena kolom sensitif biasanya dimuat dari asal pihak ketiga seperti penyedia layanan pembayaran (PSP) (untuk kepatuhan PCI DSS).

Pada contoh berikut, nama pemegang kartu dan tanggal habis masa berlaku ditampilkan di halaman tingkat atas (atau frame utama), tetapi nomor kartu kredit dan kode verifikasi ditampilkan dalam 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 menampilkan struktur formulir:

Diagram hierarki yang menunjukkan bagaimana berbagai kolom berada dalam bingkai yang berbeda pada formulir pembayaran

Untuk penjual, desain ini menggabungkan keamanan dan fleksibilitas:

  • iframe lintas origin mengisolasi data pembayaran sensitif dari infrastruktur penjual, sehingga membantu kepatuhan PCI DSS.
  • Kolom formulir dalam frame yang berbeda dapat diatur dan ditata agar sesuai dengan tampilan dan nuansa situs penjual.

Dari perspektif browser, ini berarti ada kasus penggunaan umum dan sah untuk bentuk 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 merupakan dasar pengukuran yang solid untuk isi otomatis di seluruh frame, tetapi tidak memberikan tingkat perincian yang memadai bagi browser untuk membedakan antara frame tepercaya dan tidak tepercaya untuk isi otomatis.

Untuk memberikan pengalaman isi otomatis yang lebih baik sekaligus menjaga keamanan data pengguna, tim Chrome sedang membuat proposal yang mengizinkan isi otomatis ke iframe lintas origin. Jika formulir diubah untuk menggunakan isi otomatis bersama, Chrome berhasil mengisi nomor kartu kredit lintas origin:

<!-- 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:

Coba isi otomatis bersama secara lokal

Anda dapat menguji isi otomatis bersama untuk satu pengguna di Chrome 93.0.4577.0 dan versi yang lebih baru di desktop serta perangkat seluler dengan menyetel tanda 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 merupakan proposal awal untuk menambahkan fitur isi otomatis ke kebijakan izin. Tim Chrome saat ini sedang bekerja dengan vendor browser lainnya agar proposal tersebut ditinjau. Proposal lebih lanjut tentang cara meningkatkan pengalaman pengguna untuk isi otomatis di seluruh iframe juga dibahas dalam diskusi.

Kami akan terus memberikan informasi terbaru seiring dengan progres terkait proposal ini. Sementara itu, jika Anda memiliki halaman checkout yang berisi kolom <input> sensitif (nomor kartu kredit, cvc) yang disematkan dari penyedia pihak ketiga, hubungi kami. Kami ingin mengetahui apakah isi otomatis bersama di seluruh iframe dapat meningkatkan pengalaman isi otomatis pengguna selama proses checkout.

Cari tahu selengkapnya

Foto oleh Jessica Ruscello di Unsplash.