部分錶單含有 iframe 中的欄位，這會導致瀏覽器自動填入問題。透過共用自動填入功能，上層頁框可以指定跨來源 iframe 的可信度，為使用者提供更優質的自動填入體驗。
我們已提出測試將自動填入功能納入跨來源 iframe 的提案。透過這項功能，上層頁框可以指定欄位應自動填入的影格。這在付款表單特別實用，因為若是從第三方來源 (例如付款服務供應商 (PSP)) 等第三方來源載入機密欄位 (符合 PCI DSS 規範)，就非常有用。
在以下範例中，可在頂層頁面 (或大型頁框) 找到持卡人姓名和到期日，但信用卡號碼和驗證碼位於來自 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> 欄位 (信用卡號碼、cvc) 欄位，請與我們聯絡。我們很期待瞭解跨 iframe 共用自動填入的資料，能否改善使用者在結帳過程中的自動填入體驗。
瞭解詳情
相片來源：Jessica Ruscello 的 Unsplash 網站上。