광고 렌더링

Protected Audience 입찰에서 광고 후보를 반환할 때 iframe에서 광고를 렌더링하는 데 사용되는 불투명 URN으로 반환하거나, 격리된 프레임에서 광고를 렌더링하는 데 사용되는 FencedFrameConfig으로 반환할 수 있습니다.

이 가이드에서는 펜스 처리된 프레임이 무엇이고 왜 필요한지, 그리고 두 가지 방법 중 하나를 사용하여 광고를 렌더링하는 방법을 설명합니다. 펜스 프레임에 대해 자세히 알아보려면 이 가이드 또는 제안서를 참고하세요.

분리 프레임이란 무엇인가요?

분리 프레임 (<fencedframe>)은 iframe과 비슷하게 삽입된 콘텐츠에 대해 제안된 HTML 요소입니다. iframe와 달리 분리 프레임은 삽입 컨텍스트와의 통신을 제한하여 프레임이 삽입 컨텍스트와 공유하지 않고도 크로스 사이트 데이터에 액세스할 수 있도록 합니다. 마찬가지로 삽입 컨텍스트의 퍼스트 파티 데이터는 격리된 프레임과 공유할 수 없습니다.

예를 들어 news.example (삽입 컨텍스트)가 shoes.example의 광고를 차단된 프레임에 삽입한다고 가정해 보겠습니다. news.example는 shoes.example 광고에서 데이터를 유출할 수 없으며 shoes.example는 news.example에서 퍼스트 파티 데이터를 학습할 수 없습니다.

격리된 프레임은 어떻게 작동하나요?

펜스 처리된 프레임은 탐색에 FencedFrameConfig 객체를 사용합니다. 이 객체는 Protected Audience 입찰에서 반환될 수 있습니다. 그런 다음 구성 객체가 격리된 프레임 요소의 config 속성으로 설정됩니다. 이는 URL 또는 불투명 URN이 src 속성에 할당되는 iframe와 다릅니다. FencedFrameConfig 객체에는 읽기 전용 url 속성이 있습니다. 하지만 현재 사용 사례에서는 내부 리소스의 실제 URL을 숨겨야 하므로 이 속성은 읽을 때 불투명 문자열을 반환합니다.

격리된 프레임은 postMessage를 사용하여 삽입자와 통신할 수 없습니다. 하지만 차단된 프레임은 차단된 프레임 내에서 iframe와 함께 postMessage를 사용할 수 있습니다.

펜스 처리된 프레임은 다른 방식으로 게시자로부터 격리됩니다. 게시자는 차단된 프레임 내의 DOM에 액세스할 수 없으며 차단된 프레임은 게시자의 DOM에 액세스할 수 없습니다. 또한 게시자가 모든 값으로 설정하고 관찰할 수 있는 name과 같은 속성은 차단된 프레임에서 사용할 수 없습니다.

펜스 처리된 프레임은 최상위 탐색 컨텍스트 (예: 브라우저 탭)처럼 작동합니다. 특정 사용 사례 (예: opaque-ads)의 펜스 처리된 프레임은 크로스 사이트 데이터 (예: Protected Audience API 관심분야 그룹)를 포함할 수 있지만 프레임은 파티셔닝되지 않은 스토리지나 쿠키에 액세스할 수 없습니다. opaque-ads 차단된 프레임은 고유한 nonce 기반 쿠키 및 스토리지 파티션에 액세스할 수 있습니다.

격리된 프레임의 특징은 설명에 자세히 설명되어 있습니다.

펜스 처리된 프레임에 광고 렌더링

AuctionConfig의 resolveToConfig 매개변수가 true로 설정된 경우 Protected Audience 입찰에서 FencedFrameConfig가 반환됩니다.

const frameConfig = await navigator.runAdAuction({
  // ...auction configuration
  resolveToConfig: true
});

구성을 가져온 후에는 이를 격리된 프레임의 config 속성에 할당하여 프레임을 구성으로 표시된 리소스로 이동할 수 있습니다. 이전 버전의 Chrome에서는 resolveToConfig 속성을 지원하지 않으므로 탐색하기 전에 약속이 FencedFrameConfig로 확인되었는지 확인해야 합니다.

if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) {
  const frame = document.createElement('fencedframe');
  frame.config = frameConfig;
}

iframe에 광고 렌더링

AuctionConfig에서 resolveToConfig을 명시적으로 설정하지 않거나 false로 설정하면 runAdAuction()에서 불투명 URN을 반환합니다. 이 URN은 광고를 렌더링하기 위해 iframe의 src로 설정할 수 있습니다.