일부 양식은 iframe에 입력란이 있어 브라우저 자동 완성에 문제가 발생합니다. 공유 자동 완성을 사용하면 상위 프레임에서 교차 출처 iframe의 신뢰성을 지정하여 사용자에게 더 나은 자동 완성 환경을 제공할 수 있습니다.
교차 출처 iframe 자동 완성을 허용하는 제안을 테스트할 수 있습니다. 이 기능을 사용하면 상위 프레임은 필드가 자동 완성되어야 하는 프레임을 지정할 수 있습니다. 이는 민감한 필드 (PCI DSS 규정 준수를 위해)가 결제 서비스 제공업체 (PSP)와 같은 제3자 출처에서 로드되는 것이 매우 흔한 결제 양식에 특히 유용합니다.
다음 예에서 카드 소지자 이름과 만료일은 최상위 페이지 (또는 기본 프레임)에 있지만 신용카드 번호와 인증 코드는 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 이상에서는 명령줄에서 플래그를 설정하여 데스크톱과 모바일의 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)가 삽입된 경우 Google에 문의하세요. iframe 간 자동 완성 공유 기능이 결제 과정에서 사용자의 자동 완성 환경을 개선할 수 있는지 알려 주시기 바랍니다.
자세히 알아보기
사진: Jessica Ruuscello(Unsplash 제공)