Truy cập không đồng bộ vào cookie HTTP

Victor Costan
Twitter GitHub

Cookie Store API là gì?

Cookie Store API hiển thị cookie HTTP cho trình chạy dịch vụ và cung cấp giải pháp thay thế không đồng bộ cho document.cookie. API này giúp bạn dễ dàng:

  • Tránh hiện tượng giật trên luồng chính bằng cách truy cập cookie không đồng bộ.
  • Tránh thăm dò cookie vì bạn có thể quan sát thấy các thay đổi đối với cookie.
  • Truy cập cookie của các trình chạy dịch vụ.

Đọc nội dung giải thích

Trạng thái hiện tại

Bước Trạng thái
1. Tạo nội dung giải thích Hoàn tất
2. Tạo bản nháp ban đầu của thông số kỹ thuật Hoàn tất
**3. Thu thập ý kiến phản hồi và lặp lại quy cách** **Đang tiến hành**
4. Bản dùng thử theo nguyên gốc Đã tạm dừng
5. Khởi chạy Not started

Làm cách nào để sử dụng kho lưu trữ cookie không đồng bộ?

Bật bản dùng thử theo nguyên gốc

Để dùng thử cục bộ, bạn có thể bật API trên dòng lệnh:

chrome --enable-blink-features=CookieStore

Việc chuyển cờ này vào dòng lệnh sẽ bật API trên toàn cục trong Chrome cho phiên hiện tại.

Ngoài ra, bạn có thể bật cờ #enable-experimental-web-platform-features trong chrome://flags.

Bạn (có thể) không cần cookie

Trước khi tìm hiểu sâu về API mới, tôi muốn khẳng định rằng cookie vẫn là dữ liệu gốc lưu trữ phía máy khách tệ nhất của nền tảng web và vẫn nên được dùng làm phương án cuối cùng. Đây không phải là điều ngẫu nhiên – cookie là cơ chế lưu trữ phía máy khách đầu tiên của Web và chúng tôi đã học được rất nhiều kể từ đó.

Lý do chính khiến bạn nên tránh cookie là:

  • Cookie sẽ đưa giản đồ bộ nhớ của bạn vào API phụ trợ. Mỗi yêu cầu HTTP chứa một ảnh chụp nhanh của nhóm cookie. Điều này giúp các kỹ sư phụ trợ dễ dàng đưa các phần phụ thuộc vào định dạng cookie hiện tại. Khi điều này xảy ra, giao diện người dùng của bạn không thể thay đổi giản đồ bộ nhớ nếu không triển khai thay đổi phù hợp cho phần phụ trợ.

  • Cookie có mô hình bảo mật phức tạp. Các tính năng của nền tảng web hiện đại tuân theo cùng một chính sách nguồn gốc, nghĩa là mỗi ứng dụng sẽ có hộp cát riêng và hoàn toàn độc lập với các ứng dụng khác mà người dùng có thể đang chạy. Phạm vi cookie tạo ra câu chuyện bảo mật phức tạp hơn đáng kể và chỉ đơn giản là cố gắng tóm tắt điều đó sẽ tăng gấp đôi quy mô của bài viết này.

  • Cookie có chi phí hiệu suất cao. Các trình duyệt cần có ảnh chụp nhanh về cookie của bạn trong mọi yêu cầu HTTP, vì vậy, mọi thay đổi đối với cookie đều phải được truyền trên các ngăn xếp mạng và bộ nhớ. Các trình duyệt hiện đại đã triển khai kho cookie được tối ưu hoá cao, nhưng chúng tôi sẽ không bao giờ có thể làm cho cookie hiệu quả như các cơ chế lưu trữ khác, mà không cần phải tác động đến ngăn xếp mạng.

Vì tất cả lý do trên, các ứng dụng web hiện đại nên tránh cookie mà thay vào đó nên lưu trữ giá trị nhận dạng phiên vào IndexedDB, đồng thời thêm rõ ràng giá trị nhận dạng vào tiêu đề hoặc nội dung của các yêu cầu HTTP cụ thể, thông qua API fetch.

Dù vậy, bạn vẫn đang đọc bài viết này vì bạn có lý do chính đáng để sử dụng cookie...

API document.cookie đáng tin cậy là một nguồn khả năng gây giật tương đối đảm bảo cho ứng dụng của bạn. Ví dụ: bất cứ khi nào bạn sử dụng phương thức getter document.cookie, trình duyệt phải ngừng thực thi JavaScript cho đến khi có thông tin cookie mà bạn yêu cầu. Quá trình này có thể thực hiện một bước nhảy quá trình hoặc một lượt đọc ổ đĩa, và sẽ khiến giao diện người dùng của bạn bị giật.

Cách khắc phục đơn giản cho vấn đề này là chuyển từ phương thức getter document.cookie sang API Lưu trữ cookie không đồng bộ.

await cookieStore.get('session_id');

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

Bạn có thể thay thế phương thức setter document.cookie theo cách tương tự. Xin lưu ý rằng thay đổi này chỉ được đảm bảo áp dụng sau khi phân giải Promise mà cookieStore.set trả về.

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

// undefined

Hãy quan sát, không thăm dò ý kiến

Một ứng dụng phổ biến để truy cập cookie từ JavaScript là phát hiện thời điểm người dùng đăng xuất và cập nhật giao diện người dùng. Hiện tại, bạn có thể thực hiện việc này bằng cách thăm dò ý kiến document.cookie. Việc này gây ra hiện tượng giật và có tác động tiêu cực đến thời lượng pin.

Cookie Store API cung cấp một phương thức thay thế để quan sát các thay đổi về cookie mà không yêu cầu thăm dò ý kiến.

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);
  }
});

Chào mừng trình chạy dịch vụ

Do thiết kế đồng bộ, API document.cookie không được cung cấp cho trình chạy dịch vụ. Cookie Store API không đồng bộ, do đó được cho phép trong trình chạy dịch vụ.

Việc tương tác với cookie hoạt động theo cách tương tự trong ngữ cảnh tài liệu và trong trình thực thi dịch vụ.

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

Tuy nhiên, việc quan sát các thay đổi về cookie sẽ hơi khác trong trình chạy dịch vụ. Việc đánh thức một trình chạy dịch vụ có thể khá tốn kém, vì vậy, chúng ta phải mô tả rõ ràng những thay đổi về cookie mà trình chạy này quan tâm.

Trong ví dụ bên dưới, một ứng dụng sử dụng IndexedDB để lưu dữ liệu người dùng vào bộ nhớ đệm theo dõi các thay đổi đối với cookie của phiên và loại bỏ dữ liệu đã lưu vào bộ nhớ đệm khi người dùng đăng xuất.

// 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;
    }
  }
});

Các phương pháp hay nhất

Sắp ra mắt.

Ý kiến phản hồi

Nếu bạn dùng thử API này, vui lòng cho chúng tôi biết suy nghĩ của bạn! Vui lòng chuyển hướng ý kiến phản hồi về hình dạng API đến kho lưu trữ thông số kỹ thuật và báo cáo lỗi triển khai cho thành phần Nhấp nháy Blink>Storage>CookiesAPI.

Chúng tôi đặc biệt quan tâm đến việc tìm hiểu về hoạt động đo lường hiệu suất và các trường hợp sử dụng ngoài những trường hợp đã nêu trong phần giải thích.

Tài nguyên khác