Chrome sẽ bắt đầu một bản dùng thử theo nguyên gốc để thêm tiêu đề HTTP vào Storage Access API (SAA) trong phiên bản 130: Tiêu đề Storage Access. Tiêu đề yêu cầu Sec-Fetch-Storage-Access và tiêu đề phản hồi Activate-Storage-Access mới nhằm hỗ trợ các tài nguyên không phải iframe, đồng thời cải thiện hiệu suất và trải nghiệm người dùng cho những trang web dựa vào nội dung được nhúng, chẳng hạn như tiện ích truyền thông xã hội, lịch và công cụ tương tác.
Luồng JavaScript (và các hạn chế của luồng này)
Trước đây, SAA yêu cầu lệnh gọi JavaScript API đến document.requestStorageAccess() trên mỗi lần tải lại, ngay cả khi người dùng đã cấp quyền. Mặc dù hiệu quả, nhưng phương thức này có những hạn chế sau:
- Nhiều lượt khứ hồi trên mạng: Quá trình này thường liên quan đến một số yêu cầu mạng và việc tải lại trang trước khi nội dung được nhúng có thể hoạt động đầy đủ.
- Phụ thuộc vào iframe: Việc thực thi JavaScript bắt buộc phải sử dụng iframe hoặc tài nguyên phụ trong iframe, hạn chế tính linh hoạt cho nhà phát triển.
Ví dụ: một tiện ích lịch từ calendar.example được nhúng trên website.example chỉ bằng JavaScript sẽ có dạng như sau:
- Tải phần giữ chỗ:
website.exampleyêu cầu tiện ích. Vì tiện íchcalendar.exampleđược nhúng trênwebsite.examplekhông có quyền truy cập vào cookie chưa phân vùng của tiện ích đó, nên một tiện ích giữ chỗ sẽ được hiển thị thay thế. - Yêu cầu cấp quyền: Trình giữ chỗ tải, sau đó gọi
document.requestStorageAccess()để yêu cầu cấp quyềnstorage-access. - Người dùng chọn cấp quyền.
- Tải lại tiện ích: Tiện ích sẽ làm mới, lần này có quyền truy cập vào cookie và cuối cùng tải nội dung được cá nhân hoá.
- Mỗi lần người dùng truy cập lại vào một trang web nhúng tiện ích
calendar.example, quy trình này sẽ giống hệt như trong các bước 1, 2 và 4; điểm đơn giản hoá duy nhất là người dùng không cần cấp lại quyền truy cập.
Quy trình này không hiệu quả: nếu người dùng đã cấp quyền truy cập vào bộ nhớ, thì việc tải iframe ban đầu, lệnh gọi document.requestStorageAccess() và lần tải lại tiếp theo sẽ không cần thiết và gây ra độ trễ.
Quy trình mới có tiêu đề HTTP
Tiêu đề Storage Access mới giúp tải nội dung được nhúng hiệu quả hơn, bao gồm cả các tài nguyên không phải iframe.
Với Tiêu đề truy cập vào bộ nhớ, trình duyệt sẽ tự động tìm nạp tài nguyên bằng tiêu đề yêu cầu Sec-Fetch-Storage-Access: inactive được đặt nếu người dùng đã cấp quyền. Nhà phát triển không cần làm gì để đặt tiêu đề yêu cầu. Máy chủ có thể phản hồi bằng tiêu đề Activate-Storage-Access: retry; allowed-origin="<origin>" và trình duyệt sẽ thử lại yêu cầu bằng thông tin xác thực cần thiết.
Tiêu đề yêu cầu
Sec-Fetch-Storage-Access: <access-status>
Khi người dùng truy cập vào một trang nhúng nội dung trên nhiều trang web, trình duyệt sẽ tự động thêm tiêu đề Sec-Fetch-Storage-Access vào các yêu cầu trên nhiều trang web có thể yêu cầu thông tin đăng nhập (chẳng hạn như cookie). Tiêu đề này cho biết trạng thái quyền truy cập cookie của thành phần nhúng. Sau đây là cách diễn giải các giá trị của chỉ số này:
none: thành phần nhúng không có quyềnstorage-accessvà do đó không có quyền truy cập vào cookie chưa phân vùng.inactive: ứng dụng nhúng có quyềnstorage-accessnhưng chưa chọn sử dụng quyền này. Hoạt động nhúng không có quyền truy cập vào cookie chưa phân vùng.active: thành phần nhúng có quyền truy cập vào cookie chưa được phân vùng. Giá trị này sẽ được đưa vào mọi yêu cầu trên nhiều nguồn có quyền truy cập vào cookie chưa được phân vùng.
Tiêu đề phản hồi
Activate-Storage-Access: <retry-or-reload>
Tiêu đề Activate-Storage-Access hướng dẫn trình duyệt thử lại yêu cầu bằng cookie hoặc tải trực tiếp tài nguyên khi SAA được kích hoạt. Tiêu đề có thể có các giá trị sau:
load: hướng dẫn trình duyệt cấp cho trình nhúng quyền truy cập vào cookie chưa phân vùng cho tài nguyên được yêu cầu.retry: máy chủ phản hồi rằng trình duyệt nên kích hoạt quyền truy cập vào bộ nhớ, sau đó thử lại yêu cầu.
Activate-Storage-Access: retry; allowed-origin="https://site.example"
Activate-Storage-Access: retry; allowed-origin=*
Activate-Storage-Access: load
Hỗ trợ các tài nguyên không phải iframe
Bản cập nhật Tiêu đề truy cập vào bộ nhớ cho phép SAA cho nội dung không được nhúng trong iframe, chẳng hạn như hình ảnh được lưu trữ trên một miền khác. Trước đây, không có API nền tảng web nào cho phép tải các tài nguyên như vậy bằng thông tin đăng nhập trong trình duyệt nếu không có cookie của bên thứ ba.
Ví dụ: embedding-site.example có thể yêu cầu một hình ảnh:
<img src="https://server.example/image"/>
Và máy chủ có thể phản hồi bằng nội dung hoặc lỗi, tuỳ thuộc vào việc có cookie hay không:
app.get('/image', (req, res) => {
const headers = req.headers;
const cookieHeader = headers.cookie;
// Check if the embed has the necessary cookie access
if (!cookieHeader || !cookieHeader.includes('foo')) {
// If the cookie is not present, check if the browser supports Storage Access headers
if (
'sec-fetch-storage-access' in headers &&
headers['sec-fetch-storage-access'] == 'inactive'
) {
// If the browser supports Storage Access API, retry the request with storage access enabled
res.setHeader('Activate-Storage-Access', 'retry; allowed-origin="https://embedding-site.example"');
}
res.status(401).send('No cookie!');
} else {
// If the cookie is available, check if the user is authorized to access the image
if (!check_authorization(cookieHeader)) {
return res.status(401).send('Unauthorized!');
}
// If the user is authorized, respond with the image file
res.sendFile("path/to/image.jpeg");
}
});
Nếu không có cookie, máy chủ sẽ kiểm tra giá trị của tiêu đề yêu cầu Sec-Fetch-Storage-Access. Nếu giá trị này được đặt thành inactive, thì máy chủ sẽ phản hồi bằng tiêu đề Activate-Storage-Access: retry, cho biết rằng bạn nên thử lại yêu cầu bằng quyền truy cập vào bộ nhớ. Nếu không có cookie và tiêu đề Sec-Fetch-Storage-Access không có giá trị không hoạt động, thì hình ảnh sẽ không tải.
Luồng tiêu đề HTTP
Với tiêu đề HTTP, trình duyệt có thể nhận ra khi người dùng đã cấp quyền truy cập bộ nhớ cho tiện ích và tải iframe có quyền truy cập vào cookie chưa được phân vùng trong những lần truy cập tiếp theo.
Với Storage Access Headers, các lượt truy cập trang tiếp theo sẽ kích hoạt quy trình sau:
- Người dùng truy cập vào
website.examplecó nhúng lạicalendar.example. Lệnh tìm nạp này vẫn chưa có quyền truy cập vào cookie như trước đây. Tuy nhiên, người dùng đã cấp quyềnstorage-accesstrước đó và quá trình tìm nạp bao gồm tiêu đềSec-Fetch-Storage-Access: inactiveđể cho biết rằng quyền truy cập vào cookie chưa phân vùng có sẵn nhưng không được sử dụng. - Máy chủ
calendar.examplephản hồi bằng tiêu đềActivate-Storage-Access: retry; allowed-origin="<origin>"(trong trường hợp này,<origin>sẽ làhttps://website.example) để cho biết rằng việc tìm nạp tài nguyên yêu cầu sử dụng cookie chưa được phân vùng có quyền truy cập vào bộ nhớ. - Trình duyệt sẽ thử lại yêu cầu, lần này bao gồm cả cookie không được phân vùng (kích hoạt quyền
storage-accesscho hoạt động tìm nạp này). - Máy chủ
calendar.examplephản hồi bằng nội dung iframe được cá nhân hoá. Phản hồi này bao gồm một tiêu đềActivate-Storage-Access: load, cho biết rằng trình duyệt sẽ tải nội dung khi quyềnstorage-accessđược kích hoạt (nói cách khác, tải nội dung khi có quyền truy cập vào cookie không phân vùng, như thểdocument.requestStorageAccess()đã được gọi). - Tác nhân người dùng tải nội dung iframe có quyền truy cập vào cookie chưa được phân vùng bằng quyền storage-access. Sau bước này, tiện ích có thể hoạt động như mong đợi.
Cập nhật giải pháp
Với tính năng Tiêu đề truy cập vào bộ nhớ, bạn có thể muốn cập nhật mã của mình trong 2 trường hợp:
- Bạn sử dụng SAA và muốn đạt được hiệu suất tốt hơn bằng logic tiêu đề.
- Bạn có một quy trình xác thực hoặc logic phụ thuộc vào việc tiêu đề
Origincó được đưa vào yêu cầu trên máy chủ của bạn hay không.
Triển khai logic tiêu đề của quảng cáo tìm kiếm thích ứng
Để sử dụng Tiêu đề truy cập bộ nhớ trong giải pháp của mình, bạn cần cập nhật giải pháp. Giả sử bạn là chủ sở hữu calendar.example. Để website.example có thể tải một tiện ích calendar.example được cá nhân hoá, mã tiện ích phải có quyền truy cập vào bộ nhớ.
Phía máy khách
Tính năng Tiêu đề truy cập bộ nhớ không yêu cầu bạn cập nhật mã trên phía máy khách cho các giải pháp hiện có. Hãy đọc tài liệu để tìm hiểu cách triển khai quảng cáo tìm kiếm thích ứng.
Phía máy chủ
Về phía máy chủ, bạn có thể sử dụng các tiêu đề mới:
app.get('/cookie-access-endpoint', (req, res) => {
const storageAccessHeader = req.headers['sec-fetch-storage-access'];
if (storageAccessHeader === 'inactive') {
// User needs to grant permission, trigger a prompt
if (!validate_origin(req.headers.origin)) {
res.status(401).send(`${req.headers.origin} is not allowed to send` +
' credentialed requests to this server.');
return;
}
res.set('Activate-Storage-Access', `retry; allowed-origin="${req.headers.origin}"`);
res.status(401).send('This resource requires storage access. Please grant permission.');
} else if (storageAccessHeader === 'active') {
// User has granted permission, proceed with access
res.set('Activate-Storage-Access', 'load');
// Include the actual iframe content here
res.send('This is the content that requires cookie access.');
} else {
// Handle other cases (e.g., 'Sec-Fetch-Storage-Access': 'none')
}
});
Hãy xem bản minh hoạ để biết cách giải pháp này hoạt động trong thực tế.
Cập nhật logic tiêu đề Nguồn
Với Tiêu đề truy cập bộ nhớ, Chrome sẽ gửi tiêu đề Origin trong nhiều yêu cầu hơn trước. Điều này có thể ảnh hưởng đến logic phía máy chủ nếu logic đó chỉ dựa vào tiêu đề Nguồn cho các loại yêu cầu cụ thể (chẳng hạn như các yêu cầu do CORS xác định).
Để tránh các vấn đề tiềm ẩn, bạn cần xem xét mã phía máy chủ:
- Kiểm tra mọi hoạt động xác thực hoặc logic phụ thuộc vào sự hiện diện của tiêu đề
Origin. - Cập nhật mã để xử lý tiêu đề
Originxuất hiện trong nhiều trường hợp hơn.
Ưu điểm chính
Tiêu đề Storage Access là một cách được đề xuất và hiệu quả hơn để sử dụng SAA. Nhìn chung, thay đổi này mang lại một số điểm cải tiến:
- Hỗ trợ các thành phần nhúng không phải iframe: Cho phép SAA cho nhiều loại tài nguyên hơn.
- Giảm mức sử dụng mạng: Ít yêu cầu hơn và tải trọng nhỏ hơn.
- Giảm mức sử dụng CPU: Giảm quá trình xử lý JavaScript.
- Cải thiện trải nghiệm người dùng: Loại bỏ các tải trung gian gây gián đoạn.
Tham gia dùng thử ban đầu
Bản dùng thử theo nguyên gốc cho phép bạn dùng thử các tính năng mới và đưa ra ý kiến phản hồi về khả năng sử dụng, tính thực tế và hiệu quả của các tính năng đó. Để biết thêm thông tin, hãy xem bài viết Bắt đầu dùng thử nguồn gốc.
Bạn có thể dùng thử tính năng Tiêu đề truy cập bộ nhớ bằng cách đăng ký dùng thử nguồn gốc bắt đầu từ Chrome 130. Cách tham gia dùng thử ban đầu:
- Truy cập trang đăng ký dùng thử theo nguồn của Tiêu đề truy cập vào bộ nhớ.
- Làm theo hướng dẫn về việc tham gia dùng thử nguồn gốc.
Kiểm thử cục bộ
Bạn có thể kiểm thử tính năng Tiêu đề truy cập bộ nhớ cục bộ để đảm bảo trang web của bạn đã sẵn sàng cho thay đổi này.
Hãy làm theo các bước sau để định cấu hình phiên bản Chrome:
- Bật cờ chrome trên
chrome://flags/#storage-access-headers. - Khởi động lại Chrome để các thay đổi có hiệu lực.
Tương tác và chia sẻ ý kiến phản hồi
Nếu có ý kiến phản hồi hoặc gặp vấn đề, bạn có thể báo cáo vấn đề. Bạn cũng có thể tìm hiểu thêm về Tiêu đề truy cập bộ nhớ trên tài liệu giải thích trên GitHub.