Một số biểu mẫu có các trường trong iframe, gây ra vấn đề cho tính năng tự động điền của trình duyệt. Với tính năng tự động điền dùng chung, khung mẹ có thể chỉ định mức độ tin cậy của các iframe trên nhiều nguồn gốc để hỗ trợ người dùng có trải nghiệm tự động điền tốt hơ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 các 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 (để tuân thủ PCI DSS) thường được tải từ 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ơ đồ sau đâ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 tính bảo mật và tính linh hoạt:
- Các iframe trên nhiều nguồn gốc tách biệt 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 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 để phù hợp với giao diện của trang web của người bán.
Từ quan điểm của 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, từ đó đặ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 có thể dẫn đến trải nghiệm tự động điền kém, như ví dụ sau:
Chính sách cùng nguồn gốc là đường 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 đầy đủ để trình duyệt phân biệt giữa các khung đáng tin cậy và 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 triển khai một đề xuất cho phép tự động điền vào iframe trên nhiều nguồn gốc. Nếu biểu mẫu được thay đổi để sử dụng tính năng tự động điền dùng chung, 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:
Thử tính năng tự động điền được chia sẻ trên thiết bị
Bạn có thể kiểm thử tính năng tự động điền dùng chung 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 tính năng hỗ trợ
Sử dụng mã sau để phát hiện xem thuộc tính shared-autofill có sẵn 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 về 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 đang thảo luận về 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 cập nhật thông tin khi tiến hành triển khai đề xuất này. Trong thời gian chờ đợi, nếu bạn có trang thanh toán mà các trường <input> nhạy cảm (số thẻ tín dụng, cvv) đượ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 rất 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
- Bài đánh giá của TAG W3C
- Ví dụ về biểu mẫu thanh toán được sử dụng trong bài đăng này
- Cờ Chrome là gì?
Ảnh chụp của Jessica Ruscello trên Unsplash.