一部のフォームには iframe 内のフィールドがあり、ブラウザの自動入力で問題が発生します。共有自動入力を使用すると、親フレームはクロスオリジン iframe の信頼性を指定して、ユーザーの自動入力エクスペリエンスを改善できます。
クロスオリジン iframe への自動入力を許可するプロポーザルがテスト用に提供されています。この機能を使用すると、親フレームから、フィールドを自動入力可能にするフレームを指定できます。これは、（PCI DSS コンプライアンスのために）機密性の高いフィールドが支払いサービス プロバイダ（PSP）などのサードパーティのオリジンから読み込まれることが多い支払いフォームに特に便利です。
次の例では、カード所有者名と有効期限は最上位ページ（またはメインフレーム）にありますが、クレジット カード番号と確認コードは PSP の iframe にあります。
<!-- 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 以降で、コマンドラインからフラグを設定することで、1 人のユーザーの共有自動入力をテストできます。
--flag-switches-begin --enable-features=AutofillAcrossIframes,AutofillSharedAutofill
機能のサポートを検出する
次のコードを使用して、shared-autofill プロパティが使用可能かどうかを検出します。
if (document.featurePolicy && document.featurePolicy
.features().includes('shared-autofill')) {
console.log('shared-autofill available!');
}
次のステップ
共有自動入力は、権限ポリシーに自動入力機能を追加するための最初の提案です。Chrome チームは現在、他のブラウザ ベンダーと連携して提案の審査を行っています。iframe 全体での自動入力のユーザー エクスペリエンスを向上させる方法に関する提案も検討されています。
この提案の進捗状況に応じて、今後も最新情報をお知らせいたします。一方、機密性の高い <input> フィールド（クレジット カード番号、CVC）がサードパーティ プロバイダから埋め込まれている購入手続きページがある場合は、Google までお問い合わせください。iframe 間での自動入力の共有によって、購入手続き中のユーザーの自動入力エクスペリエンスが改善される可能性があるかどうか、お知らせください。
補足説明
写真提供: Jessica Ruscello（Unsplash）。