일부 양식에는 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> 필드 (신용카드 번호, CVC)가 서드 파티 제공업체에서 삽입된 결제 페이지가 있는 경우 Google에 문의하세요. iframe 전반에서 자동 완성 공유가 결제 과정에서 사용자의 자동 완성 환경을 개선할 수 있는지 알려주세요.