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 trình chạy dịch vụ và cung cấp một giải pháp thay thế không đồng bộ cho document.cookie. API giúp thực hiện việc này dễ dàng hơn để:

  • 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ì có thể quan sát thấy các thay đổi đối với cookie.
  • Truy cập vào cookie của trình chạy dịch vụ.

Đọc thông báo giải thích

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

Bước Trạng thái
1. Tạo thông báo 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 theo 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 toàn cầu trong Chrome cho phiên hiện tại.

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

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

Trước khi tìm hiểu kỹ hơn về API mới, tôi muốn khẳng định rằng cookie vẫn là dữ liệu gốc kém nhất của bộ nhớ phía máy khách của nền tảng, và vẫn nên được dùng làm phương án cuối cùng. Đây không phải là sự cố - cookie là phía máy khách đầu tiên của Web mà chúng tôi đã học hỏi được nhiều hơn 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 đồ lưu trữ 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 ngăn chứa cookie. Điều này giúp bạn dễ dàng các kỹ sư phụ trợ để giới thiệu các phần phụ thuộc trên định dạng cookie hiện tại. Một lần trong trường hợp này, 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 một thay đổi phù hợp với phần phụ trợ.

  • Cookie có một mô hình bảo mật phức tạp. Các tính năng trên nền tảng web hiện đại đều tuân thủ cùng một chính sách nguồn gốc, tức 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 một câu chuyện bảo mật phức tạp hơn nhiều và chỉ đơn thuần cố gắng để tăng gấp đôi quy mô của bài viết này.

  • Cookie có chi phí hiệu suất cao. Trình duyệt cần cung cấp ảnh chụp nhanh trong mọi yêu cầu HTTP, nên mọi thay đổi đối với cookie đều phải được truyền tải trên các ngăn xếp mạng và bộ nhớ. Các trình duyệt hiện đại có tối ưu hoá cho cửa hàng cookie, nhưng chúng tôi sẽ không bao giờ có thể có hiệu quả như các cơ chế lưu trữ khác mà không cần vào 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 cần tránh sử dụng cookie và thay vào đó lưu trữ giá trị nhận dạng phiên vào IndexedDB và thêm rõ ràng mã nhận dạng vào tiêu đề hoặc nội dung của yêu cầu HTTP cụ thể, thông qua API tìm nạp.

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

Nhà thờ document.cookie API là một nguồn khá đảm bảo hiện tượng giật 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 bạn đã yêu cầu. Quá trình này có thể mất hop quá trình hoặc lượt đọc ổ đĩa và sẽ khiến giao diện người dùng bị giật.

Cách khắc phục đơn giản cho vấn đề này là chuyển từ document.cookie getter vào 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ự. Lưu ý rằng thay đổi chỉ được đảm bảo sẽ được áp dụng sau khi Lời hứa được trả về cookieStore.set phân giải.

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 vào cookie từ JavaScript là phát hiện khi 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à có tác động tiêu cực đến pin cuộc sống.

Cookie Store API mang đến một phương pháp thay thế để quan sát 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 nhân viên dịch vụ

Do thiết kế đồng bộ nên API document.cookie chưa được thực hiện có sẵn cho service worker. Cookie Store API không đồng bộ và do đó được cho phép trong dịch vụ trình thực thi.

Việc tương tác với cookie cũng hoạt động theo cách tương tự như trong ngữ cảnh tài liệu và trong trình chạy 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 lại có đôi chút khác biệt trong trình chạy dịch vụ. Đánh thức thì 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à 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 theo dõi các thay đổi đối với cookie của phiên và loại bỏ dữ liệu được lưu trong 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 suy nghĩ của bạn! Vui lòng chuyển hướng và phản hồi về hình dạng API kho lưu trữ thông số kỹ thuật, và báo cáo lỗi triển khai cho Blink>Storage>CookiesAPI Thành phần nhấp nháy.

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

Tài nguyên khác