В некоторых формах есть поля в iframe, что вызывает проблемы с автозаполнением браузера. При использовании общего автозаполнения родительский фрейм может обозначать надежность iframe из разных источников, чтобы обеспечить удобство автозаполнения для пользователя.
Предложение разрешить автозаполнение в iframe из разных источников доступно для тестирования. Благодаря этой функции родительский фрейм может обозначать фреймы, поля которых должны быть автозаполняемыми. Это особенно полезно для форм оплаты, где конфиденциальные поля (для соответствия PCI DSS ) очень часто загружаются из стороннего источника, такого как поставщик платежных услуг (PSP).
В следующем примере имя владельца карты и дата истечения срока действия находятся на странице верхнего уровня (или в основном фрейме), а номер кредитной карты и код подтверждения — в iframe от 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>
На следующей диаграмме представлена структура формы:
Для торговцев этот дизайн сочетает в себе безопасность и гибкость:
- iframe с перекрестным происхождением изолирует конфиденциальные платежные данные от инфраструктуры продавца, что помогает обеспечить соответствие PCI DSS .
- Поля формы в разных фреймах можно упорядочить и стилизовать в соответствии с внешним видом веб-сайта продавца.
С точки зрения браузера это означает, что существуют распространенные и законные варианты использования многофреймовых форм, что поднимает вопросы о модели безопасности форм. Для пользователей формы с несколькими фреймами могут привести к ухудшению работы автозаполнения, как показано в следующем примере:
Политика одного и того же происхождения является надежной основой для автозаполнения между фреймами, но не обеспечивает достаточную степень детализации, чтобы браузер мог различать доверенные и ненадежные фреймы для автозаполнения.
Чтобы обеспечить более эффективное автозаполнение при сохранении безопасности пользовательских данных, команда Chrome работает над предложением, позволяющим автозаполнение в iframe из разных источников. Если форма изменена на использование общего автозаполнения, Chrome успешно заполняет перекрестное происхождение номера кредитной карты:
<!-- 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>
Это может улучшить качество автозаполнения для пользователя:
Попробуйте совместное автозаполнение локально
Вы можете протестировать общее автозаполнение для одного пользователя в Chrome 93.0.4577.0 и более поздних версиях на настольных компьютерах и мобильных устройствах, установив флаги в командной строке .
--flag-switches-begin --enable-features=AutofillAcrossIframes,AutofillSharedAutofill
Обнаружение поддержки функций
Используйте следующий код, чтобы определить, доступно ли свойство shared-autofill :
if (document.featurePolicy && document.featurePolicy
.features().includes('shared-autofill')) {
console.log('shared-autofill available!');
}
Что дальше?
Shared-autofill — это первоначальное предложение по добавлению функции автозаполнения в политику разрешений . Команда Chrome в настоящее время работает с другими поставщиками браузеров, чтобы рассмотреть это предложение. Также обсуждаются дальнейшие предложения о том, как повысить удобство использования автозаполнения между iframe.
Мы продолжим предоставлять обновления по мере продвижения этого предложения. Тем временем, если у вас есть страница оформления заказа, в которую встроены конфиденциальные поля <input> (номер кредитной карты, CVC) от стороннего поставщика, свяжитесь с нами . Нам бы хотелось узнать, может ли совместное автозаполнение между iframe улучшить качество автозаполнения для ваших пользователей в процессе оформления заказа.
Узнать больше
- Текущее предложение
- Обзор тегов W3C
- Пример формы оплаты, использованный в этом посте
- Что такое флаги Chrome?
Фото Джессики Русчелло на Unsplash .