HTTP 쿠키에 대한 비동기 액세스

Victor Costan
X GitHub

Cookie Store API란 무엇인가요?

Cookie Store API는 HTTP 쿠키를 서비스 워커에 노출하고 document.cookie의 비동기 대안을 제공합니다. API를 사용하면 더 쉽게:

  • 쿠키에 비동기식으로 액세스하여 기본 스레드에서 버벅거림을 방지합니다.
  • 쿠키의 변경사항을 관찰할 수 있으므로 쿠키 폴링을 피합니다.
  • 서비스 워커에서 쿠키에 액세스합니다.

설명 읽기

현재 상태

단계 상태
1. 설명 만들기 완전함
2. 사양의 초기 초안 만들기 완전함
**3. 의견 수집 및 사양 반복** **진행 중**
4. 오리진 트라이얼 일시중지됨
5. 출시 시작되지 않음

비동기 쿠키 저장소는 어떻게 사용하나요?

오리진 트라이얼 사용 설정

로컬에서 사용해 보려면 명령줄에서 API를 사용 설정하면 됩니다.

chrome --enable-blink-features=CookieStore

명령줄에서 이 플래그를 전달하면 확인할 수 있습니다.

또는 #enable-experimental-web-platform-features를 사용 설정할 수 있습니다. chrome://flags의 플래그.

아마도 쿠키가 필요하지 않을 것입니다.

새 API에 대해 자세히 알아보기 전에 쿠키는 여전히 웹이므로 최악의 클라이언트 측 스토리지 프리미티브이므로 최후의 수단으로 사용할 수 있습니다. 이것은 우연이 아닙니다. 쿠키가 웹의 첫 번째 클라이언트 측이었습니다. 그 이후로 많은 것을 배웠습니다.

쿠키를 사용하지 않는 주된 이유는 다음과 같습니다.

  • 쿠키는 스토리지 스키마를 백엔드 API로 가져옵니다. 각 HTTP 요청에는 쿠키 jar의 스냅샷이 포함되어 있습니다. 이렇게 하면 현재 쿠키 형식에 대한 종속 항목을 도입할 수 있었습니다. 한 번 이 경우 프런트엔드는 해당 스토리지 스키마를 변경하지 않는 한 할 수 있습니다

  • 쿠키의 보안 모델은 복잡합니다. 최신 웹 플랫폼 기능은 동일한 출처 정책을 따릅니다. 즉, 각 애플리케이션은 자체 샌드박스를 가지며, 다른 애플리케이션이 있는지 확인하세요. 쿠키 범위 훨씬 더 복잡한 보안 스토리를 만들고, 요약하면 이 기사의 크기가 두 배가 될 것입니다.

  • 쿠키는 성능 비용이 높습니다. 브라우저에는 모든 HTTP 요청에서 쿠키를 다시 사용하도록 해야 하므로 쿠키에 대한 모든 변경은 퍼져나가기 때문에 발생합니다 최신 브라우저는 쿠키 스토어 구현을 최적화하긴 하지만, 쿠키는 다른 저장 메커니즘만큼 효율적이며, 다른 저장 메커니즘만큼 효율적입니다. 네트워크 스택에 할당할 수 있습니다

위의 모든 이유로 인해 최신 웹 애플리케이션은 대신 세션 식별자를 IndexedDB 특정 HTTP 요청의 헤더 또는 본문에 식별자를 명시적으로 추가하거나 fetch API를 통해 가져올 수 있습니다.

하지만 여전히 이 기사를 읽고 있습니다. 쿠키를 사용해야 하는 이유

유서 깊은 document.cookie API는 애플리케이션에 대한 버벅거림의 원인이 되는 부분이 상당히 보장됩니다. 예를 들어 document.cookie getter를 사용할 때마다 브라우저는 실행을 중지해야 합니다. JavaScript에 저장된 정보를 반환하는 것입니다. 이 작업은 프로세스 홉 또는 디스크 읽기가 포함되어 UI에 버벅거림이 발생할 수 있습니다.

이 문제를 간단하게 해결하는 방법은 document.cookie getter로 전달됩니다.

await cookieStore.get('session_id');

// {
//   domain: "example.com",
//   expires: 1593745721000,
//   name: "session_id",
//   path: "/",
//   sameSite: "unrestricted",
//   secure: true,
//   value: "yxlgco2xtqb.ly25tv3tkb8"
// }

document.cookie setter도 비슷한 방식으로 대체할 수 있습니다. 유의사항 변경은 프라미스가 반환한 후에만 적용이 보장된다는 것을 cookieStore.set가 확인됩니다.

await cookieStore.set({name: 'opt_out', value: '1'});

// undefined

관찰, 설문조사 금지

JavaScript에서 쿠키에 액세스하는 데 널리 사용되는 애플리케이션은 사용자가 로그아웃하고 UI를 업데이트할 때 발생합니다. 이 작업은 현재 document.cookie - 버벅거림을 유발하고 배터리에 부정적인 영향을 미칩니다. 중요합니다

Cookie Store API: 쿠키 관찰을 위한 대체 방법 제공 변경사항을 적용할 수 있으며, 이는 폴링이 필요하지 않습니다.

cookieStore.addEventListener('change', event => {
  for (const cookie of event.changed) {
    if (cookie.name === 'session_id') sessionCookieChanged(cookie.value);
  }
  for (const cookie of event.deleted) {
    if (cookie.name === 'session_id') sessionCookieChanged(null);
  }
});

서비스 워커 환영

동기 설계로 인해 document.cookie API는 만들어지지 않았습니다. 사용 가능 서비스 워커 Cookie Store API는 비동기식이므로 서비스에서 허용됩니다. 있습니다

쿠키와 상호작용하는 것은 문서 컨텍스트와 서비스 워커를 지원합니다

// Works in documents and service workers.
async function logOut() {
  await cookieStore.delete('session_id');
}

그러나 서비스 워커에서 쿠키 변경사항을 관찰하는 것은 조금 다릅니다. 깨어남 서비스 워커를 설정하는 것은 꽤 비용이 많이 들 수 있으므로 작업자가 관심을 갖는 쿠키 변경사항에 대해서 알아보겠습니다.

아래 예에서는 IndexedDB를 사용하여 사용자 데이터를 캐시하는 애플리케이션입니다. 는 세션 쿠키의 변경사항을 모니터링하고 사용자가 로그아웃합니다.

// Specify the cookie changes we're interested in during the install event.
self.addEventListener('install', event => {
  event.waitUntil(cookieStore.subscribeToChanges([{name: 'session_id'}]));
});

// Delete cached data when the user logs out.
self.addEventListener('cookiechange', event => {
  for (const cookie of event.deleted) {
    if (cookie.name === 'session_id') {
      indexedDB.deleteDatabase('user_cache');
      break;
    }
  }
});

권장사항

앞으로 출시될 예정이며,

의견

이 API를 사용해 보시고 의견을 알려 주세요. 직접 안내해 주세요. API 형태에 대한 피드백을 사양 저장소에 구현 버그를 Blink>Storage>CookiesAPI 구성요소 깜박임

특히 성능 측정에 대해 알아보고 설명서에 설명된 것 이외의 케이스에 해당합니다.

추가 리소스