Một số biểu mẫu có các trường trong iframe, điều này gây ra sự cố khi tự động điền trình duyệt. Với tính năng tự động điền dùng chung, khung chính có thể chỉ định độ tin cậy của các iframe nhiều nguồn gốc, từ đó hỗ trợ trải nghiệm tự động điền tốt hơn cho người dùng.
Hiện đã có đề xuất cho phép tự động điền vào iframe trên nhiều nguồn gốc để thử nghiệm. Với tính năng này, khung mẹ có thể chỉ định những khung có trường có thể tự động điền. Điều này đặc biệt hữu ích đối với các biểu mẫu thanh toán, trong đó các trường nhạy cảm (đối với việc tuân thủ PCI DSS) thường được tải qua nguồn gốc của bên thứ ba, chẳng hạn như nhà cung cấp dịch vụ thanh toán (PSP).
Trong ví dụ sau, tên chủ thẻ và ngày hết hạn nằm trong trang cấp cao nhất (hoặc khung chính), nhưng số thẻ tín dụng và mã xác minh nằm trong iframe của 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>
Sơ đồ dưới đây thể hiện cấu trúc của biểu mẫu:
Đối với người bán, thiết kế này kết hợp được tính bảo mật và tính linh hoạt:
- iframe trên nhiều nguồn gốc sẽ tách dữ liệu thanh toán nhạy cảm khỏi cơ sở hạ tầng của người bán, giúp đảm bảo tuân thủ PCI DSS.
- Bạn có thể sắp xếp và tạo kiểu cho các trường biểu mẫu trong các khung khác nhau cho phù hợp với giao diện trang web của người bán.
Từ góc độ trình duyệt, điều này có nghĩa là có các trường hợp sử dụng phổ biến và hợp lệ cho biểu mẫu nhiều khung hình. Điều này đặt ra câu hỏi về mô hình bảo mật cho biểu mẫu. Đối với người dùng, biểu mẫu nhiều khung hình có thể gây ra trải nghiệm tự động điền không tốt, như trong ví dụ sau:
Chính sách cùng nguồn gốc là cơ sở vững chắc để tự động điền trên các khung, nhưng không cung cấp đủ độ chi tiết để trình duyệt phân biệt giữa khung đáng tin cậy và khung không đáng tin cậy để tự động điền.
Để mang lại trải nghiệm tự động điền tốt hơn trong khi vẫn đảm bảo an toàn cho dữ liệu người dùng, nhóm Chrome đang xây dựng một đề xuất cho phép tự động điền vào iframe trên nhiều nguồn gốc. Nếu bạn thay đổi biểu mẫu để sử dụng tính năng tự động điền được chia sẻ, thì Chrome sẽ điền thành công số thẻ tín dụng trên nhiều nguồn gốc:
<!-- 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>
Điều này có thể mang lại trải nghiệm tự động điền tốt hơn cho người dùng:
Dùng thử tính năng tự động điền được chia sẻ cục bộ
Bạn có thể kiểm thử tính năng tự động điền được chia sẻ cho một người dùng trong Chrome 93.0.4577.0 trở lên trên máy tính và thiết bị di động bằng cách đặt cờ từ dòng lệnh.
--flag-switches-begin --enable-features=AutofillAcrossIframes,AutofillSharedAutofill
Phát hiện chế độ hỗ trợ tính năng
Hãy dùng mã sau để xem có thuộc tính shared-autofill hay không:
if (document.featurePolicy && document.featurePolicy
.features().includes('shared-autofill')) {
console.log('shared-autofill available!');
}
Tiếp theo là gì?
Tự động điền dùng chung là đề xuất ban đầu để thêm tính năng tự động điền vào chính sách quyền. Nhóm Chrome hiện đang làm việc với các nhà cung cấp trình duyệt khác để xem xét đề xuất này. Chúng tôi cũng thảo luận các đề xuất khác về cách tăng trải nghiệm người dùng đối với tính năng tự động điền trên các iframe.
Chúng tôi sẽ tiếp tục cung cấp thông tin cập nhật trong quá trình xử lý đề xuất này. Trong thời gian chờ đợi, nếu bạn có trang thanh toán trong đó các trường <input> nhạy cảm (số thẻ tín dụng, cvc) được nhúng từ một nhà cung cấp bên thứ ba, hãy liên hệ với chúng tôi. Chúng tôi muốn biết liệu tính năng tự động điền dùng chung trên các iframe có thể cải thiện trải nghiệm tự động điền của người dùng trong quá trình thanh toán hay không.
Tìm hiểu thêm
- Đề xuất hiện tại
- Xem xét TAG W3C
- Ví dụ về phương thức thanh toán dùng trong bài đăng này
- Cờ Chrome là gì?
Ảnh của Jessica Ruscello trên Unsplash.