Chrome sẽ giảm cường hỗ trợ cookie của bên thứ ba và phân vùng bộ nhớ để 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 cho những trang web và dịch vụ dựa vào cookie và phương pháp lưu trữ khác trong các ngữ cảnh nhúng, trong các hành trình của người dùng (chẳng hạn như quá trình xác thực). 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, đồng thời hạn chế hoạt động theo dõi trên nhiều trang web nhiều nhất có thể.
Trạng thái triển khai
Storage Access API có trong tất 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 nêu bật trong các phần liên quan của bài đăng này.
Công việc đang tiếp tục giải quyết tất cả vấn đề chặn còn lại, trước khi chuẩn hoá API.
Storage Access API là gì?
Storage Access API (API Truy cập bộ nhớ) là một API JavaScript cho phép iframe yêu cầu quyền truy cập vào bộ nhớ khi chế độ cài đặt của trình duyệt từ chối quyền truy cập. Các video nhúng trong những 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 này để yêu cầu người dùng cấp quyền truy cập khi cần.
Nếu yêu cầu bộ nhớ được cấp, iframe sẽ có quyền truy cập vào cookie và bộ nhớ không được phân vùng. Những bộ nhớ và cookie này cũng có sẵn khi người dùng truy cập với tư cách trang web cấp cao nhất.
API Truy cập bộ nhớ cho phép cung cấp quyền truy cập vào bộ nhớ và cookie không được phân vùng cụ thể với gánh nặng tối thiểu cho người dùng cuối, trong khi vẫn ngăn chặn quyền truy cập vào bộ nhớ và cookie không được phân vùng chung như thường dùng để theo dõi người dùng.
Trường hợp sử dụng
Một số nội dung nhúng của bên thứ ba yêu cầu quyền truy cập vào bộ nhớ hoặc cookie không được phân vùng để 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 dùng được sau khi cookie của bên thứ ba không được dùng nữa và tính năng phân vùng bộ nhớ sẽ được bật.
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 chi tiết 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.
- Một trải nghiệm đặc biệt được cung cấp khi nhúng video (ví dụ: để không hiển thị quảng cáo đối với người dùng đã đăng nhập hoặc để biết lựa chọn ưu tiên của người dùng đối với 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 liên quan đến việc duy trì quyền truy cập đăng nhập trong iframe được nhúng.
Trường hợp nên sử dụng Storage Access API so với các API khác
Storage Access API (API Truy cập bộ nhớ) là một trong những lựa chọn thay thế cho việc sử dụng cookie và bộ nhớ không được phân vùng. Vì vậy, điều quan trọng là bạn phải hiểu rõ thời điểm 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 mà 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 nguồn gốc được nhúng trong ngữ cảnh cấp cao nhất, tức là khi nguồn đó chưa đượ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 cookie để lưu trữ "được phân vùng", với một ngăn 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 cài đặt cookie để lưu thông tin về phiên trò chuyện. Thông tin về phiên được lưu cho mỗi trang web, do đó, cookie do tiện ích đặt không cần phải được truy cập trên các trang web khác cũng nhúng cookie này. Storage Access API hữu ích khi một tiện ích được nhúng của bên thứ ba phải chia sẻ cùng một thông tin trên nhiều nguồn gốc (ví dụ: thông tin về phiên đăng nhập hoặc các lựa chọn ưu tiên).
- Phân vùng bộ nhớ là một cách để các iframe trên nhiều trang web sử dụng cơ chế lưu trữ JavaScript hiện có trong khi phân chia bộ nhớ cơ bản cho mỗi trang web. Thao tác này ngăn chặn việc truy cập vào bộ nhớ được nhúng trong một trang web bằng chính bộ nhớ được nhúng trên các trang web khác.
- Bộ 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 để các trình duyệt cho phép truy cập hạn chế vào bộ nhớ và cookie không được phân vùng 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. Tuy nhiên, đối với các trang web thuộc tập hợp này, người dùng có thể cấp quyền truy cập mà không cần lời nhắc của người dùng.
- 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 không được phân vùng và bộ nhớ 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ể phù hợp hơn vì có lời nhắc của trình duyệt hướng đến việc đăng nhập hơn. Tuy nhiên, việc áp dụng FedCM thường yêu cầu bạn phải thực hiện các thay đổi bổ sung đối với mã của mình, 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 và đ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 API Truy cập bộ nhớ
Storage Access API có 2 phương thức dựa trên hứa hẹn:
Document.hasStorageAccess()(cũng có tên mới làDocument.hasUnpartitionedCookieAccess()kể từ Chrome 125)Document.requestStorageAccess()
Ngoài ra, dịch vụ này còn tích hợp với Permissions API. Thao tác này cho phé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, một trang web có thể sử dụng phương thức hasStorageAccess() để kiểm tra xem quyền truy cập vào cookie của bên thứ ba đã được cấp 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 gọi requestStorageAccess(),. Vì vậy, hasStorageAccess() sẽ luôn trả về giá trị false ngay từ đầu – trừ phi tài liệu khác có cùng nguồn gốc trong cùng iframe đã được cấp quyền truy cập. Trạng thái 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, nhằm 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 thì 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;
}
}
Vào lần đầu tiên yêu cầu cấp quyền này, người dùng có thể 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 hứa 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 của trình duyệt này sẽ chỉ xuất hiện 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);
Nếu cần sử dụng bộ nhớ cục bộ thay vì cookie, bạn có thể làm như sau:
let handle = null;
async function doClick() {
if (!handle) {
try {
handle = await document.requestStorageAccess({localStorage: true});
} catch (err) {
// Access was not granted.
return;
}
}
// Use handle to access unpartitioned local storage.
handle.localStorage.setItem('foo', 'bar');
}
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 nằm trên 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ự:
Trình duyệt có thể bỏ qua lời nhắc và hệ thống sẽ tự động cấp quyền trong một số trường hợp nhất định:
- Trang và iframe đã được dùng trong 30 ngày qua sau khi chấp nhận lời nhắc hay chưa.
- Nếu iframe được 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 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 đây 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. Tức là API Truy cập bộ nhớ chỉ hữu ích cho các trang web được nhúng mà người dùng từng truy cập 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 khi chưa có sự phê duyệt trước đối với lời nhắc sau một tương tác.
Mặc dù người dùng sẽ được nhắc trong lần sử dụng đầu tiên, nhưng các lần truy cập tiếp theo có thể phân giải requestStorageAccess() mà không cần lời nhắc cũng như không cần người dùng phải tương tác trong Chrome và Firefox. Lưu ý rằng Safari luôn đòi hỏi có sự tương tác của người dùng.
Vì quyền truy cập vào cookie và bộ nhớ có thể được cấp mà không cần lời nhắc hoặc sự tương tác của người dùng, nên thường có thể nhận được quyền truy cập bộ nhớ hoặc cookie không được phân vùng 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 bộ nhớ và cookie không được phân vùng, đồng thời mang lại 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ố trường hợp, việc này có thể giúp người dùng có trải nghiệm tốt hơn so với khi 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 sự can thiệp 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 người dùng không cần thực hiện hành động nào, thay vì gọi lệnh và không thực hiện được khi cần tương tác.
Nhờ vậy, bạn có thể xử lý trước nhu cầu đưa ra câu lệnh bằng cách cho hiện nội dung khác (ví dụ như nút đăng nhập).
Mã sau đây sẽ thêm 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 (API Truy cập bộ nhớ) trong iframe trong hộp cát, bạn cần có các quyền đối với 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 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>
Yêu cầu về cookie
Để truy cập 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– bắt buộc để đánh dấu cookie là trên nhiều trang webSecure– đảm bảo chỉ có thể truy cập cookie do các trang web HTTPS đặt.
Trong Firefox và Safari, cookie được đặt mặc định là SameSite=None và không hạn chế SSA đối với cookie Secure nên các thuộc tính này là không bắt buộc. Bạn nên nêu rõ thuộc tính SameSite và luôn sử dụng cookie Secure.
Quyền truy cập vào 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ụ: 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ì trong 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 để thêm phương thứcrequestStorageAccessFor().
Phương thức requestStorageAccessFor()
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 tệp này cho các trang web trong một 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 thông tin về cách sử dụng requestStorageAccessFor(), hãy đọc Hướng dẫn cho nhà phát triển: Bộ trang web có liên quan.
Truy vấn quyền top-level-storage-access
Hỗ trợ trình duyệt
- x
- x
- x
- x
Tương tự như quyền storage-access, có quyền top-level-storage-access để kiểm tra xem có thể cấp quyền truy cập cho requestStorageAccessFor() hay không.
Khi sử dụng với RWS, API Truy cập bộ nhớ có gì khác?
Khi sử dụng Bộ trang web có liên quan cùng với Storage Access API, bạn sẽ có thêm một số chức năng bổ sung được nêu chi tiết trong bảng sau:
| Không có RWS | Có RWS | |
|---|---|---|
| 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 phải truy cập vào nguồn gốc của bộ nhớ được yêu cầu ở cấp cao nhất trước khi cấp quyền truy cập | ||
| Có thể bỏ qua lời nhắc lần đầu cho người dùng | ||
Bạn không cần gọi requestStorageAccess nếu quyền truy cập đã được cấp trước đó |
||
| Tự động cấp quyền truy cập cho các miền khác trong một Trang web có liên quan | ||
Hỗ trợ requestStorageAccessFor cho quyền truy cập vào trang cấp cao nhất |
Minh hoạ: cài đặt và truy cập vào cookie
Bản minh hoạ sau đây cho thấy cách truy cập một cookie do chính bạn đặt trong màn hình đầu tiên của bản minh hoạ trong một khung được nhúng ở 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 đã đặt cờ
chrome://flags/#test-third-party-cookie-phaseoutvà khởi động lại trình duyệt. - Firefox
- Safari
Bản minh hoạ: thiết lập Bộ nhớ cục bộ
Bản minh hoạ sau đây trình bày cách truy cập vào các Kênh truyền phát không được phân vùng từ một iframe của bên thứ ba bằng cách sử dụng Storage Access API:
https://saa-beyond-cookies.glitch.me/
Bản minh hoạ yêu cầu phiên bản Chrome 125 trở lên và có bật cờ test-third-party-cookie-phaseout.
Tài nguyên
- Hãy đọc thông số kỹ thuật về việc cấp quyền truy cập vào cookie của bên thứ ba hoặc làm theo và nêu vấn đề.
- Hãy đọc bản đặc tả về quyền truy cập vào bộ nhớ không được phân vùng hoặc làm theo và nêu các vấn đề.
- Tài liệu về API và hướng dẫn.
- Tài liệu Chrome về cách sử dụng API Truy cập bộ nhớ trong Bộ trang web có liên quan