Storage Access API (API Truy cập bộ nhớ)

Chrome sẽ ngừng hỗ trợ cookie của bên thứ ba để giảm hoạt động theo dõi trên nhiều trang web. Điều này gây ra một thách thức đối với những trang web và dịch vụ dựa vào cookie trong bối cảnh nhúng, đối với hành trình của người dùng, chẳng hạn như quá trình xác thực. Storage Access API (API Truy cập bộ nhớ) (SAA) cho phép các trường hợp sử dụng này tiếp tục hoạt động, trong khi hạn chế hoạt động theo dõi trên nhiều trang web ở mức tối đa.

Trạng thái triển khai

Hỗ trợ trình duyệt

  • 119
  • 85
  • 65
  • 11,1

Nguồn

Storage Access API hoạt động trong tất cả các trình duyệt chính, nhưng có sự khác biệt nhỏ về cách triển khai giữa các trình duyệt. Những điểm khác biệt này được làm nổi bật trong các phần có liên quan trong bài đăng này.

Công việc vẫn đang tiếp tục giải quyết tất cả vấn đề còn lại về việc chặn, trước khi chuẩn hoá API.

Storage Access API (API Truy cập bộ nhớ) là gì?

Storage Access API là một API JavaScript cho phép iframe yêu cầu quyền truy cập bộ nhớ khi quyền truy cập bị từ chối do các chế độ cài đặt của trình duyệt. Các video nhúng có trường hợp sử dụng phụ thuộc vào việc tải tài nguyên trên nhiều trang web có thể dùng API để yêu cầu người dùng cấp quyền truy cập khi cần.

Nếu yêu cầu tăng dung lượng bộ nhớ được chấp nhận, iframe đó sẽ có quyền truy cập vào cookie trên nhiều trang web. Cookie này cũng có sẵn khi người dùng truy cập dưới dạng trang web cấp cao nhất.

Storage Access API cho phép cung cấp quyền truy cập cụ thể vào cookie trên nhiều trang web để giảm thiểu gánh nặng cho người dùng cuối, trong khi vẫn ngăn chặn việc truy cập chung vào cookie trên nhiều trang web như thường dùng để theo dõi người dùng.

Trường hợp sử dụng

Một số tệp nhúng của bên thứ ba yêu cầu quyền truy cập vào cookie trên nhiều trang web để mang lại trải nghiệm tốt hơn cho người dùng. Tính năng này sẽ không hoạt động sau khi cookie của bên thứ ba không được dùng nữa.

Các trường hợp sử dụng bao gồm:

  • Các tiện ích nhận xét được nhúng yêu cầu thông tin chi tiết về phiên đăng nhập.
  • Nút "Thích" trên mạng xã hội yêu cầu thông tin về phiên đăng nhập.
  • Tài liệu được nhúng yêu cầu thông tin chi tiết về phiên đăng nhập.
  • Trải nghiệm cao cấp được cung cấp cho video nhúng (ví dụ: để không hiển thị quảng cáo cho người dùng đã đăng nhập hoặc để biết lựa chọn ưu tiên của người dùng về phụ đề hoặc hạn chế một số loại video nhất định).
  • Hệ thống thanh toán được nhúng.

Nhiều trường hợp sử dụng trong số này liên quan đến việc duy trì quyền truy cập đăng nhập trong các iframe được nhúng.

Thời điểm sử dụng Storage Access API thay vì các API khác

Storage Access API là một trong những giải pháp thay thế cho việc sử dụng cookie của bên thứ ba, vì vậy điều quan trọng là phải hiểu khi nào nên sử dụng API này so với các API khác. API này dành cho các trường hợp sử dụng trong đó cả hai điều sau đều đúng:

  • Người dùng sẽ tương tác với nội dung được nhúng, tức là nội dung đó không phải là iframe thụ động hay iframe ẩn.
  • Người dùng đã truy cập vào nguồn gốc được nhúng trong ngữ cảnh cấp cao nhất, tức là khi nguồn này không được nhúng trong một trang web khác.

Có các API thay thế cho nhiều trường hợp sử dụng:

  • Cookie có trạng thái phân vùng độc lập (CHIPS) cho phép nhà phát triển chọn sử dụng cookie để lưu trữ "được phân vùng", với một kho cookie riêng cho mỗi trang web cấp cao nhất. Ví dụ: một tiện ích trò chuyện trên web của bên thứ ba có thể dựa vào việc đặt cookie để lưu thông tin phiên. Thông tin phiên được lưu trên mỗi trang web, do đó, cookie do tiện ích đặt không cần được truy cập trên các trang web khác nơi cookie này cũng được nhúng. Storage Access API rất hữu ích khi một tiện ích của bên thứ ba được nhúng phụ thuộc vào việc chia sẻ cùng một thông tin trên nhiều nguồn gốc (ví dụ: thông tin chi tiết hoặc lựa chọn ưu tiên về phiên đăng nhập).
  • Nhóm trang web có liên quan (RWS) là một cách để một tổ chức khai báo mối quan hệ giữa các trang web để trình duyệt cho phép bên thứ ba truy cập có giới hạn vào cookie cho các mục đích cụ thể. Các trang web vẫn cần yêu cầu quyền truy cập bằng Storage Access API (API Truy cập bộ nhớ), nhưng có thể cấp quyền truy cập mà không cần người dùng nhắc.
  • Quản lý thông tin xác thực liên kết (FedCM) là một phương pháp bảo đảm quyền riêng tư cho các dịch vụ nhận dạng được liên kết. Storage Access API xử lý việc truy cập vào cookie sau khi đăng nhập. Đối với một số trường hợp sử dụng, FedCM cung cấp một giải pháp thay thế cho Storage Access API (API Truy cập bộ nhớ) và có thể được ưu tiên sử dụng vì giải pháp này có tính năng lời nhắc dành cho trình duyệt hướng đến việc đăng nhập nhiều hơn. Tuy nhiên, việc sử dụng FedCM thường yêu cầu bạn phải thay đổi thêm mã, chẳng hạn như để hỗ trợ các điểm cuối HTTP.
  • Các API Chống lừa đảo, liên quan đến quảng cáođo lường cũng tồn tại và Storage Access API không nhằm giải quyết những mối lo ngại đó.

Sử dụng Storage Access API

Storage Access API có 2 phương thức đã hứa:

Ứng dụng này cũng tích hợp với Permissions API (API Quyền). Việc này giúp bạn kiểm tra trạng thái của quyền truy cập vào bộ nhớ trong ngữ cảnh bên thứ ba, cho biết liệu lệnh gọi đến document.requestStorageAccess() có được tự động cấp hay không:

Sử dụng phương thức hasStorageAccess()

Trong lần tải đầu tiên, trang web có thể sử dụng phương thức hasStorageAccess() để kiểm tra xem bạn đã được cấp quyền truy cập vào cookie của bên thứ ba hay chưa.

// Set a hasAccess boolean variable which defaults to false.
let hasAccess = false;

async function handleCookieAccessInit() {
  if (!document.hasStorageAccess) {
    // Storage Access API is not supported so best we can do is
    // hope it's an older browser that doesn't block 3P cookies.
    hasAccess = true;
  } else {
    // Check whether access has been granted via the Storage Access API.
    // Note on page load this will always be false initially so we could be
    // skipped in this example, but including for completeness for when this
    // is not so obvious.
    hasAccess = await document.hasStorageAccess();
    if (!hasAccess) {
      // Handle the lack of access (covered later)
    }
  }
  if (hasAccess) {
    // Use the cookies.
  }
}
handleCookieAccessInit();

Quyền truy cập vào bộ nhớ chỉ được cấp cho tài liệu iframe sau khi tài liệu này gọi requestStorageAccess(),. Vì vậy, ban đầu hasStorageAccess() sẽ luôn trả về giá trị false (sai), trừ phi một tài liệu có cùng nguồn gốc khác trong cùng một iframe đã được cấp quyền truy cập. Việc cấp quyền này được giữ nguyên trên các thao tác điều hướng cùng nguồn gốc bên trong iframe, đặc biệt là cho phép tải lại sau khi cấp quyền truy cập cho các trang yêu cầu cookie phải có trong yêu cầu ban đầu cho tài liệu HTML.

Sử dụng phương thức requestStorageAccess()

Nếu không có quyền truy cập vào iframe, iframe đó có thể cần yêu cầu quyền truy cập bằng phương thức requestStorageAccess():

if (!hasAccess) {
  try {
    await document.requestStorageAccess();
  } catch (err) {
    // Access was not granted and it may be gated behind an interaction
    return;
  }
}

Trong lần đầu yêu cầu này, người dùng có thể cần phải phê duyệt quyền truy cập này bằng lời nhắc của trình duyệt. Sau đó, lời nhắc sẽ được giải quyết hoặc sẽ từ chối dẫn đến trường hợp ngoại lệ nếu sử dụng await.

Để ngăn chặn hành vi sai trái, lời nhắc này trong trình duyệt sẽ chỉ hiển thị sau khi người dùng tương tác. Đó là lý do tại sao ban đầu requestStorageAccess() cần được gọi từ trình xử lý sự kiện do người dùng kích hoạt, thay vì ngay khi iframe tải:

async function doClick() {

  // Only do this extra check if access hasn't already been given
  // based on the hasAccess variable.
  if (!hasAccess) {
    try {
      await document.requestStorageAccess();
      hasAccess = true; // Can assume this was true if above did not reject.
    } catch (err) {
      // Access was not granted.
      return;
    }
  }

  if (hasAccess) {
    // Use the cookies
  }
}

document.querySelector('#my-button').addEventListener('click', doClick);

Lời nhắc cấp quyền

Khi người dùng nhấp vào nút đó lần đầu tiên, lời nhắc của trình duyệt sẽ tự động xuất hiện, thường là trong thanh địa chỉ. Dưới đây là ví dụ về lời nhắc của Chrome, nhưng các trình duyệt khác có giao diện người dùng tương tự:

Ảnh chụp màn hình lời nhắc cấp quyền đối với Chrome Storage Access API
Lời nhắc của Chrome về quyền truy cập vào API Truy cập bộ nhớ

Trình duyệt có thể bỏ qua lời nhắc và quyền được cung cấp tự động trong một số trường hợp nhất định:

  • Trang và iframe đã được sử dụng trong 30 ngày qua sau khi chấp nhận lời nhắc.
  • Nếu iframe nhúng thuộc một Bộ trang web có liên quan.
  • Trong Firefox, lời nhắc cũng được bỏ qua đối với các trang web đã biết (những trang web mà bạn đã tương tác ở cấp cao nhất) trong năm lần thử đầu tiên.

Ngoài ra, phương thức này có thể tự động bị từ chối mà không hiển thị lời nhắc trong một số trường hợp nhất định:

  • Nếu trước đó người dùng chưa truy cập và tương tác với trang web sở hữu iframe dưới dạng tài liệu cấp cao nhất, chứ không phải trong iframe. Điều này có nghĩa là Storage Access API chỉ hữu ích cho các trang web được nhúng mà người dùng đã truy cập trước đây trong bối cảnh bên thứ nhất.
  • Nếu phương thức requestStorageAccess() được gọi bên ngoài một sự kiện tương tác của người dùng mà không có sự phê duyệt trước về lời nhắc sau một sự kiện tương tác.

Mặc dù người dùng sẽ được nhắc vào lần sử dụng đầu tiên, các lần truy cập tiếp theo có thể giải quyết requestStorageAccess() mà không cần lời nhắc và không yêu cầu người dùng tương tác trong Chrome và Firefox. Xin lưu ý rằng Safari luôn yêu cầu tương tác của người dùng.

Vì quyền truy cập vào cookie có thể được cấp mà không có lời nhắc hoặc sự tương tác của người dùng, nên thông thường, bạn có thể nhận được quyền truy cập vào cookie của bên thứ ba trước khi người dùng tương tác trên các trình duyệt hỗ trợ việc này (Chrome và Firefox) bằng cách gọi requestStorageAccess() khi tải trang. Nhờ đó, bạn có thể truy cập ngay vào cookie trên nhiều trang web của bên thứ ba và cung cấp trải nghiệm đầy đủ hơn, ngay cả trước khi người dùng tương tác với iframe. Trong một số tình huống, đây có thể là trải nghiệm người dùng chất lượng hơn so với việc chờ người dùng tương tác.

Sử dụng truy vấn quyền storage-access

Để kiểm tra xem có thể cấp quyền truy cập mà không cần tương tác của người dùng hay không, bạn có thể kiểm tra trạng thái của quyền storage-access và chỉ thực hiện sớm lệnh gọi requestStoreAccess() nếu không cần người dùng làm gì, thay vì gọi và khiến lệnh gọi không thực hiện được khi cần có sự tương tác.

Việc này cũng giúp bạn có thể xử lý trước nhu cầu đặt lời nhắc bằng cách cho thấy nhiều nội dung (ví dụ: nút đăng nhập).

Đoạn mã sau đây bổ sung hoạt động kiểm tra quyền storage-access vào ví dụ trước:

// Set a hasAccess boolean variable which defaults to false except for
// browsers which don't support the API - where we assume
// such browsers also don't block third-party cookies.
let hasAccess = false;

async function hasCookieAccess() {
  // Check if Storage Access API is supported
  if (!document.requestStorageAccess) {
    // Storage Access API is not supported so best we can do is
    // hope it's an older browser that doesn't block 3P cookies.
    return true;
  }

  // Check if access has already been granted
  if (await document.hasStorageAccess()) {
    return true;
  }

  // Check the storage-access permission
  // Wrap this in a try/catch for browsers that support the
  // Storage Access API but not this permission check
  // (e.g. Safari and older versions of Firefox).
  let permission;
  try {
    permission = await navigator.permissions.query(
      {name: 'storage-access'}
    );
  } catch (error) {
    // storage-access permission not supported. Assume no cookie access.
    return false;
  }

    if (permission) {
    if (permission.state === 'granted') {
      // Permission has previously been granted so can just call
      // requestStorageAccess() without a user interaction and
      // it will resolve automatically.
      try {
        await document.requestStorageAccess();
        return true;
      } catch (error) {
        // This shouldn't really fail if access is granted, but return false
        // if it does.
        return false;
      }
    } else if (permission.state === 'prompt') {
      // Need to call requestStorageAccess() after a user interaction
      // (potentially with a prompt). Can't do anything further here,
      // so handle this in the click handler.
      return false;
          } else if (permission.state === 'denied') {
            // Currently not used. See:
      // https://github.com/privacycg/storage-access/issues/149
      return false;
          }
    }

  // By default return false, though should really be caught by one of above.
  return false;
}

async function handleCookieAccessInit() {
  hasAccess = await hasCookieAccess();

  if (hasAccess) {
    // Use the cookies.
  }
}

handleCookieAccessInit();

iframe hộp cát

Khi sử dụng Storage Access API trong iframe trong hộp cát, bạn cần có các quyền hộp cát sau:

  • Cần có allow-storage-access-by-user-activation để cho phép truy cập vào Storage Access API.
  • Cần phải có allow-scripts để cho phép sử dụng JavaScript để gọi API.
  • Cần có allow-same-origin để cho phép truy cập vào cookie cùng nguồn gốc và bộ nhớ khác.

Ví dụ:

<iframe sandbox="allow-storage-access-by-user-activation
                 allow-scripts
                 allow-same-origin"
        src="..."></iframe>

Để truy cập được bằng Storage Access API trong Chrome, bạn phải đặt cookie trên nhiều trang web bằng hai thuộc tính sau:

  • SameSite=None – giá trị bắt buộc để đánh dấu cookie là trên nhiều trang web
  • Secure – đảm bảo chỉ những cookie do các trang web HTTPS đặt mới có thể truy cập được.

Trong Firefox và Safari, cookie được đặt mặc định là SameSite=None và chúng không hạn chế cookie SSA đối với Secure, nên các thuộc tính này là không bắt buộc. Bạn nên thông báo rõ ràng về thuộc tính SameSite và luôn sử dụng cookie Secure.

Quyền truy cập trang cấp cao nhất

Storage Access API dùng để cho phép truy cập vào cookie của bên thứ ba trong iframe được nhúng.

Ngoài ra, còn có các trường hợp sử dụng khác khi trang cấp cao nhất yêu cầu quyền truy cập vào cookie của bên thứ ba. Ví dụ: các hình ảnh hoặc tập lệnh bị hạn chế bởi cookie mà chủ sở hữu trang web có thể muốn đưa trực tiếp vào tài liệu cấp cao nhất thay vì đưa vào iframe. Để giải quyết trường hợp sử dụng này, Chrome đã đề xuất một tiện ích cho Storage Access API để bổ sung phương thức requestStorageAccessFor().

Phương thức requestStorageAccessFor()

Hỗ trợ trình duyệt

  • 119
  • 119
  • x
  • x

Nguồn

Phương thức requestStorageAccessFor() hoạt động theo cách tương tự như requestStorageAccess() nhưng dành cho các tài nguyên cấp cao nhất. Bạn chỉ có thể dùng chính sách này cho các trang web trong Bộ trang web có liên quan để ngăn việc cấp quyền truy cập chung vào cookie của bên thứ ba.

Để biết thêm chi tiết về cách sử dụng requestStorageAccessFor(), hãy đọc Bộ trang web có liên quan: hướng dẫn cho nhà phát triển.

Truy vấn quyền top-level-storage-access

Hỗ trợ trình duyệt

  • 119
  • 119
  • x
  • x

Tương tự như quyền storage-access, bạn có một quyền top-level-storage-access để kiểm tra xem có thể cấp quyền truy cập cho requestStorageAccessFor() hay không.

Storage Access API có gì khác khi sử dụng với RWS?

Khi Bộ trang web có liên quan được sử dụng với Storage Access API, một số chức năng bổ sung sẽ được cung cấp như chi tiết trong bảng sau:

Không có RWS Có RWS
Tính năng này cần có cử chỉ của người dùng để bắt đầu yêu cầu quyền truy cập vào bộ nhớ
Yêu cầu người dùng truy cập vào nguồn gốc của bộ nhớ mà họ yêu cầu trong ngữ cảnh cấp cao nhất trước khi cấp quyền truy cập
Có thể bỏ qua lời nhắc dành cho người dùng lần đầu
Không cần phải gọi requestStorageAccess nếu đã cấp quyền truy cập trước đó
Tự động cấp quyền truy cập trên các miền khác trong một Trang web có liên quan
Hỗ trợ requestStorageAccessFor quyền truy cập vào trang cấp cao nhất
Sự khác biệt giữa việc sử dụng Storage Access API mà không dùng và với Bộ trang web có liên quan

Bản minh hoạ: cài đặt và truy cập cookie

Bản minh hoạ sau đây cho thấy cách truy cập cookie do bạn đặt trong màn hình đầu tiên của bản minh hoạ trong một khung được nhúng trên trang web thứ hai của bản minh hoạ:

storage-access-api-demo.glitch.me

Bản minh hoạ yêu cầu một trình duyệt đã tắt cookie của bên thứ ba:

  • Chrome 118 trở lên với cờ chrome://flags/#test-third-party-cookie-phaseout đã được đặt và trình duyệt đã khởi động lại.
  • Firefox
  • Safari

Tài nguyên