Việc chặn cookie của bên thứ ba theo trình duyệt, chế độ cài đặt của người dùng và hoạt động phân vùng bộ nhớ sẽ gây khó khăn cho những trang web và dịch vụ dựa vào cookie và bộ nhớ khác trong ngữ cảnh được nhúng, cũng như các hành trình của người dùng (chẳng hạn 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ả các vấn đề chặn còn lại, trước khi chuẩn hoá API.
Storage Access API là gì?
API Truy cập bộ nhớ 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 theo chế độ cài đặt trình duyệt. 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 chưa đượ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 khi cookie của bên thứ ba bị hạn chế và tính năng phân vùng bộ nhớ đượ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 các nút yêu cầu chi tiết 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 vào nguồn gốc được nhúng trong ngữ cảnh cấp cao nhất, tức là khi nguồn gốc đó 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 cookie "được phân vùng" với một ngăn chứa 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 chi tiết 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. Điều này giúp ngăn chặn việc cùng một nội dung nhúng trên các trang web khác truy cập vào bộ nhớ được nhúng trong một trang web.
- Nhóm trang web có liên quan (RWS) là một cách để tổ chức khai báo mối quan hệ giữa các trang web, nhờ đó, trình duyệt cho phép quyền truy cập hạn chế vào cookie và bộ nhớ chưa 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 API Truy cập bộ nhớ, nhưng đối với các trang web trong nhóm, quyền truy cập có thể được 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 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.
- Ngoài ra, còn có các API chống gian lận, liên quan đến quảng cáo và đo lường. API Truy cập bộ nhớ không nhằm giải quyết những vấn đề đó.
Sử dụng API Truy cập bộ nhớ
API Truy cập bộ nhớ có hai phương thức dựa trên lời hứa:
Document.hasStorageAccess()
(cũng có tên mới làDocument.hasUnpartitionedCookieAccess()
kể từ Chrome 125)Document.requestStorageAccess()
API này cũng tích hợp với Permissions API (API Quyền). 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 using 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 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 requestStorageAccess() 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 này lần đầu tiên, lời nhắc của trình duyệt sẽ tự động xuất hiện, thường xuất hiện trên thanh địa chỉ. Ảnh chụp màn hình sau đây hiển thị 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ể mang lại trải nghiệm tốt hơn cho người dùng 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 người dùng tương tác 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 lệnh gọi requestStoreAccess()
sớm nếu không cần người dùng thực hiện hành động nào, thay vì gọi lệnh gọi đó và không thành công khi cần có 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 earlier 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') {
// Not used: see https://github.com/privacycg/storage-access/issues/149
return false;
}
}
// By default return false, though should really be caught by earlier tests.
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. - Bạn phải có
allow-scripts
để cho phép sử dụng JavaScript nhằm 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ế SAA ở các 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 API Truy cập bộ nhớ. Tiện ích này sẽ thêm một phương thức requestStorageAccessFor()
.
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ể sử dụng thuộc tính này cho các trang web trong một Nhóm 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 chi tiết về cách sử dụng requestStorageAccessFor()
, hãy đọc bài viết Bộ trang web có liên quan: hướng dẫn dành cho nhà phát triển.
Truy vấn quyền top-level-storage-access
Hỗ trợ trình duyệt
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 với cờ
chrome://flags/#test-third-party-cookie-phaseout
được đặt và trình duyệt được khởi động lại. - 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 Chrome 125 trở lên với cờ test-third-party-cookie-phaseout được bật.
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