部分表單的欄位位於 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 以上版本的電腦和行動裝置上，為單一使用者測試共用自動填入功能。
--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> 欄位 (信用卡號碼、CVV 碼)，請與我們聯絡。我們很想知道，如果在 iframe 之間共用自動填入功能，是否可能改善使用者在結帳程序中的自動填入體驗。
瞭解詳情
相片來源：Jessica Ruscello 在 Unsplash 上提供。