部分錶單含有 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 網站上。