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

Victor Costan
X GitHub

Cookie Store API là gì?

Cookie Store API hiển thị cookie HTTP cho worker dịch vụ và cung cấp một giải pháp không đồng bộ thay thế cho document.cookie. API 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ò ý kiến về cookie vì có thể quan sát được các thay đổi đối với cookie.
  • Truy cập cookie từ 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 video giải thích Hoàn tất
2. Tạo bản nháp ban đầu của quy cách Hoàn tất
**3. Thu thập ý kiến phản hồi và lặp lại theo thông số kỹ thuật** **Đ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 Chưa bắt đầu

Làm cách nào để sử dụng kho 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 truyền cờ này trên dòng lệnh sẽ bật API trên toàn cầu 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 đi sâu vào API mới, tôi muốn nói rằng cookie vẫn là phương thức lưu trữ gốc phía máy khách tệ nhất của nền tảng Web và vẫn nên được sử dụng như phương án cuối cùng. Đây không phải là sự cố 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 điều kể từ đó.

Sau đây là những lý do chính khiến bạn nên tránh sử dụng cookie:

  • Cookie đưa giản đồ bộ nhớ vào API phụ trợ. Mỗi yêu cầu HTTP đều mang theo một bản tổng quan nhanh về hộp bánh quy. Điều này giúp các kỹ sư phụ trách phần phụ trợ dễ dàng giới thiệu các phần phụ thuộc trên định dạng cookie hiện tại. Khi điều này xảy ra, phần giao diện người dùng không thể thay đổi giản đồ bộ nhớ của nó mà 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 về nguồn gốc, nghĩa là mỗi ứng dụng sẽ có một 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 một câu chuyện bảo mật phức tạp hơn đáng kể và chỉ cần cố gắng tóm tắt điều đó sẽ làm tăng gấp đôi kích thước của bài viết này.

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

Vì tất cả những lý do trên, các ứng dụng Web hiện đại nên tránh sử dụng cookie và thay vào đó, hãy lưu trữ giá trị nhận dạng phiên vào IndexedDB, đồng thời thêm 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.

Tuy nhiên, 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 kính là một nguồn giật khá đảm bảo cho ứng dụng của bạn. Ví dụ: mỗi khi 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 quy trình hoặc một lượt đọc ổ đĩa và sẽ khiến giao diện người dùng bị giật.

Mộ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 Cookie Store API 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 Lời hứa do cookieStore.set trả về được giải quyết.

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

// undefined

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. Việc này hiện được thực hiện bằng cách thăm dò ý kiến document.cookie, gây ra hiện tượng giật và ảnh hưởng tiêu cực đến thời lượng pin.

Cookie Store API mang đến một phương thức thay thế để quan sát các thay đổi về cookie mà không cần 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 chưa được cung cấp cho worker dịch vụ. Cookie Store API là không đồng bộ và do đó được phép trong worker 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 worker 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 trong worker dịch vụ có đôi chút khác biệt. Việc đánh thức worker 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à worker 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 sẽ theo dõi các thay đổi đối với cookie 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.

Phản hồi

Nếu bạn dùng thử API này, vui lòng cho chúng tôi biết ý kiến của bạn! Vui lòng gửi 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 Blink Blink>Storage>CookiesAPI.

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

Tài nguyên khác