파티션된 팝인: 개발자 체험판의 웹 팝업에 대한 새로운 접근 방식

Natalia Markoborodova

Chrome 132부터 개발자는 파티셔닝된 팝인이라는 새로운 웹 팝업 접근 방식의 개발자 트라이얼에 참여할 수 있습니다. 이 개발자 트라이얼은 데스크톱에서만 사용할 수 있으며 Android에서는 아직 사용할 수 없습니다.

파티셔닝된 팝인은 로그인이나 빠른 확인과 같은 수명이 짧은 상호작용을 위해 설계된 새로운 유형의 팝업입니다. 다음 두 가지 고유한 기능으로 웹 콘텐츠를 로드합니다.

• 오프너별로 파티셔닝된 스토리지
• 모달과 유사한 UI

파티셔닝된 팝인이 필요한 이유는 무엇인가요?

파티셔닝된 팝인은 파티셔닝된 iframe의 개인 정보 보호 속성과 팝업의 보안 속성을 유지하도록 설계되었습니다.

더 많은 사용자가 서드 파티 쿠키 없이 탐색하도록 선택함에 따라 나중에 서드 파티 컨텍스트에서 검색하기 위해 팝업에 데이터를 저장하는 데 의존하는 흐름 (예: 사이트 간 사용자 세션을 유지하기 위해)이 중단될 수 있습니다. 파티셔닝된 팝업은 이 문제를 해결하기 위해 도입되었습니다.

파티셔닝된 팝인은 어떻게 작동하나요?

파티션을 나눈 각 팝인의 스토리지는 오프너로 파티션을 나눕니다. 저장소 파티셔닝은 크로스 사이트 데이터에 대한 액세스를 제한하여 추적 위험과 스크립트 삽입 공격을 완화합니다. 문서에서 스토리지 파티셔닝의 작동 방식을 알아보세요.

third-party.example의 콘텐츠를 삽입하는 opener.example 웹사이트를 생각해 보세요. opener.example에 맞춤 콘텐츠를 표시하려면 사용자가 third-party.example에 로그인해야 합니다. 사용자의 브라우저에서 서드 파티 쿠키가 차단되면 현재 팝업 흐름은 다음과 같습니다.

1. 사용자가 로그인 버튼을 클릭합니다.
2. 대화상자가 열립니다.
3. 사용자가 third-party.example의 최상위 컨텍스트에서 로그인하고 파티셔닝되지 않은 인증 쿠키가 작성됩니다.
4. opener.example에 삽입된 third-party.example 콘텐츠는 퍼스트 파티 컨텍스트에 표시될 때 third-party.example에 작성된 자체 최상위 쿠키에 액세스할 수 없습니다. 이는 인증 쿠키가 파티셔닝되지 않아 서드 파티 쿠키이기 때문입니다.

파티셔닝된 팝업의 스토리지는 오프너로 파티셔닝됩니다. 이렇게 하면 흐름의 3~4단계가 변경됩니다.

1. 사용자가 third-party.example의 최상위 컨텍스트에서 로그인합니다. 파티셔닝된 팝인에서 열리므로 스토리지는 opener.example로 파티셔닝됩니다.

2. opener.example에 삽입된 third-party.example 콘텐츠는 동일한 파티셔닝된 스토리지를 공유하므로 팝인에 설정된 자체 쿠키에 액세스할 수 있습니다.

오프너 탭에 상대적인 모달 유사 UI

파티셔닝된 팝인은 사용자가 오프너와 팝인이 관련되어 있음을 이해하도록 지원합니다.

• 사용자가 다른 탭으로 전환하면 모달이 오프너 탭이 활성 상태일 때만 표시되는 것과 마찬가지로 팝인이 자동으로 표시되지 않고 액세스할 수 없게 됩니다.
• 사용자가 오프너 탭으로 돌아오면 팝인이 다시 표시됩니다.
• 사용자는 팝인의 브라우저 주소 표시줄을 변경할 수 없습니다.

사용해 보기

Chrome 132에서는 파티셔닝된 팝인 기능의 개발자 트라이얼을 도입합니다. 즉, 이 기능은 플래그 뒤에서 사용할 수 있습니다. 파티셔닝된 팝인을 사용해 보는 방법은 다음과 같습니다.

1. Chrome 132 이상을 사용하고 있는지 확인합니다.
2. chrome://flags#partitioned-popins로 이동하여 기능 플래그를 사용 설정합니다.
3. Chrome을 다시 시작합니다.
4. 데모를 사용해 보세요.

웹사이트에서 파티션을 나눈 팝인 사용

웹사이트에서 파티셔닝된 팝업을 사용하려면 popin 매개변수가 전달된 window.open() 메서드를 호출합니다.

window.open("third-party-popin.example", "_blank", "popin");

의견 공유

Google에서는 파티셔닝된 팝인을 살펴보고 있으며 개발자 의견을 기다리고 있습니다. 다음은 몇 가지 잠재적 사용 사례 시나리오입니다.

• 사용자 인증 흐름 맞춤 인증 흐름이 구현되어 있고 인증이 사이트와 다른 도메인에서 발생하는 경우 (예: site.example 사용자가 auth-site.example에 로그인) 오프너 페이지에서 세션 쿠키를 사용하기 위해 팝인에서 인증 페이지를 열어 보세요.
• 삽입된 콘텐츠 파티셔닝된 팝인을 사용하면 설정 대화상자, 이미지, PDF (또는 일반적으로 팝업에 로드되는 기타 콘텐츠)와 같은 서드 파티 위젯의 추가 콘텐츠를 더 큰 창에 렌더링하여 표시할 수 있습니다. 이 경우 파티셔닝된 팝인은 서드 파티 위젯과 사이트 간에 사용자 세션 상태를 유지하는 것을 목표로 합니다.

솔루션에 이러한 시나리오가 있거나, 다른 사용 사례가 있거나, 이 기능의 미래를 만드는 데 도움이 되고 싶다면 사용해 보고 알려주세요.

• 문제가 발생했나요?
• 더 나은 사용자 환경을 위한 제안사항이 있나요?
• 더 나은 UI에 관한 제안사항이 있나요? 특히 UI에 오프너와 팝인이 관련되어 있음을 명확하게 표시하는지 확인하세요.
• 이 기능이 얼마나 유용한가요?
• 파티셔닝된 팝인에 사용할 다른 사용 사례가 있나요?

GitHub에서 문제를 제출하여 의견을 공유하세요.