공유 저장소 및 선택 URL 업데이트: 교차 출처 워크렛, 저장된 쿼리

Tara Agyemang
Tara Agyemang
GitHub LinkedIn

Chrome 130에서는 createWorklet() 및 addModule()와 함께 교차 출처 워크렛 스크립트를 사용할 수 있도록 Shared Storage API를 변경합니다. 또한 Chrome 132에서는 저장된 쿼리를 지원하는 Shared Storage를 사용한 Select URL API 업데이트가 도입됩니다.

등록된 사이트가 모든 유형의 키-값 데이터를 공유 저장소에 쓸 수 있지만 데이터를 읽는 것은 특정 출력 API로 제한된다는 것을 보여주는 다이어그램입니다.
Shared Storage API를 사용하면 등록된 사이트가 모든 유형의 키/값 데이터를 Shared Storage에 쓸 수 있지만 데이터를 읽는 것은 특정 출력 API로 제한됩니다.

Chrome 130의 Shared Storage API를 사용한 교차 출처 워크렛

교차 출처 워크렛 스크립트를 사용할 때 더 유연하게 작업할 수 있도록 Chrome 130에서 Shared Storage API에 변경사항이 도입되었습니다.

변경된 내용

이제 모든 출처에서 워크렛 스크립트를 로드할 수 있도록 addModule()의 동일 출처 제한이 삭제되었습니다. 교차 출처 워크렛 스크립트를 사용하면 CDN에서 워크렛 스크립트를 호스팅하는 등의 주요 사용 사례를 사용할 수 있습니다. 워크렛 스크립트가 호출 브라우징 컨텍스트와 교차 출처인 경우 호출 컨텍스트의 출처가 공유 저장소에 액세스하기 위한 데이터 파티션 출처로 사용됩니다.

새 addModule() 동작과 일치하고 잠재적인 혼동을 줄이기 위해 호출 브라우징 컨텍스트와 다른 공유 저장소 데이터 파티션에 읽기 및 쓰기를 허용하도록 dataOrigin 속성이 createWorklet() 호출에 추가되었습니다. 이렇게 하면 교차 출처 워크렛 스크립트를 사용하는 경우에도 각 워크렛에서 액세스하는 출처의 공유 저장소를 더 세부적으로 제어할 수 있습니다.

어떻게 달라졌나요?

Chrome 125부터 페이지의 서드 파티 교차 출처 스크립트는 createWorklet(url)를 호출하여 교차 출처 iframe이 필요 없이 교차 출처 워크렛을 만들 수 있습니다. 이전에는 createWorklet(url)가 호출 컨텍스트와 관계없이 스크립트 URL (url) 출처를 데이터 파티션 출처로 사용했습니다.

Chrome 130에서는 새 addModule() 동작에 맞추기 위해 createWorklet()도 호출 컨텍스트를 기본 데이터 파티션 출처로 사용합니다. 스크립트 URL 출처를 데이터 파티션 출처로 계속 사용하려면 데이터 파티션 출처를 명시적으로 설정할 수 있는 새 속성 dataOrigin가 도입됩니다.

새 dataOrigin 속성은 데이터 파티션 출처를 스크립트의 출처로 설정하는 "script-origin"와 데이터 파티션 출처를 호출 브라우징 컨텍스트의 출처로 설정하는 "context-origin"를 허용합니다. 향후 출시에서는 워크렛 스크립트가 선택에 따라 임의의 출처에서 공유 스토리지 데이터에 액세스할 수 있는 맞춤 데이터 파티션 출처도 지원할 계획입니다.

데이터 출처가 "script-origin"로 설정된 교차 출처 스크립트를 로드하면 브라우저에서 전송된 스크립트 요청에 "Sec-Shared-Storage-Data-Origin: <origin>" 헤더가 포함됩니다. 이를 사용 설정하려면 스크립트에 "Shared-Storage-Cross-Origin-Worklet-Allowed: ?1" 선택 응답 헤더도 포함되어야 합니다.

사용 방법

스크립트 출처를 워크렛의 데이터 파티션 출처로 사용하여 이미 createWorklet()를 사용하고 있다면 다음과 같이 dataOrigin를 설정할 수 있습니다.

sharedStorage.createWorklet(scriptUrl, {dataOrigin: "script-origin"});

createWorklet()를 사용하면 교차 출처 데이터 파티션을 만들고 여러 워크렛을 만들 수 있으므로 addModule() 사용 대신 createWorklet()로 전환하는 것이 좋습니다.

이러한 변경사항을 반영하고 추가 안내를 제공하기 위해 개발자 문서를 업데이트했습니다.

Chrome 132에서 Select URL API를 사용하여 저장된 쿼리

저장된 쿼리를 지원하는 Chrome 132의 공유 저장소를 사용하는 Select URL API가 업데이트됩니다.

변경사항

Select URL API에는 현재 각 페이지 로드 시 API에 대한 호출 수를 제한하는 두 가지 페이지 로드당 예산이 있습니다. 페이지별로 쿼리를 저장하고 재사용할 수 있는 기능이 도입됩니다. 저장된 쿼리를 사용하면 저장된 쿼리가 처음 실행될 때 페이지 로드당 예산이 청구되지만 동일한 페이지 로드 중에 저장된 쿼리를 다시 실행할 때는 청구되지 않습니다.

저장된 쿼리를 구현하는 방법

Chrome 132 출시부터 selectURL() 옵션에서 savedQuery 매개변수를 쿼리 이름과 함께 사용할 수 있습니다.

await sharedStorage.selectURL('experiment', urls, {
  savedQuery: 'control_or_experiment',
  keepAlive: true
});

후속 쿼리에 동일한 예산이 청구되도록 selectURL() 호출마다 동일한 savedQuery 이름을 사용합니다.

이러한 변경사항을 반영하고 selectURL() 예산에 관한 추가 세부정보를 제공하기 위해 문서를 업데이트했습니다.

互动和分享反馈

请注意，Shared Storage API 提案正在积极讨论和开发中，因此可能会发生变化。

我们非常期待听到您对 Shared Storage API 的看法。

掌握最新动态

  • 邮寄名单：订阅我们的邮寄名单，及时了解与 Shared Storage API 相关的最新动态和公告。

需要帮助？