Chrome đang bắt đầu thử nghiệm theo nguyên gốc để thêm tiêu đề HTTP vào API truy cập bộ nhớ (SAA) trong phiên bản 130: Tiêu đề truy cập bộ nhớ. 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 các trang web dựa vào nội dung nhúng, chẳng hạn như tiện ích mạng xã hội, lịch và các 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 một lệnh gọi API JavaScript đế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ũng có những hạn chế:
- Nhiều lượt truy cập mạng: Quá trình này thường liên quan đến một số yêu cầu mạng và lượt tải lại trang trước khi nội dung được nhúng có thể hoạt động đầy đủ.
- Phần phụ thuộc iframe: Quá trình thực thi JavaScript yêu cầu 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 các cookie chưa phân vùng, nên tiện ích phần giữ chỗ sẽ được hiển thị. - Yêu cầu cấp quyền: Phần giữ chỗ sẽ 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 sẽ tải nội dung được cá nhân hoá.
- Mỗi khi người dùng truy cập lại một trang web nhúng tiện ích
calendar.example, luồng 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 lưu trữ, thì việc tải iframe ban đầu, lệnh gọi document.requestStorageAccess() và tải lại sau đó sẽ không cần thiết và tạo ra độ trễ.
Quy trình mới với Tiêu đề HTTP
Tiêu đề truy cập bộ nhớ mới cho phép tải nội dung nhúng hiệu quả hơn, bao gồm cả tài nguyên không phải iframe.
Với Tiêu đề truy cập 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 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 đưa 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 xác thực (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 nội dung nhúng. Dưới đây là cách diễn giải các giá trị của chỉ số này:
none: nội dung nhúng không có quyềnstorage-access, do đó không có quyền truy cập vào cookie chưa được phân vùng.inactive: phần nhúng có quyềnstorage-accessnhưng chưa chọn sử dụng quyền đó. Phần nhúng không có quyền truy cập vào cookie chưa phân vùng.active: nội dung 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 gốc 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 tài nguyên trực tiếp 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 các cookie chưa được 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 phải kích hoạt quyền truy cập 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 bộ nhớ cho phép SAA đối với nội dung nhúng không phải 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 xác thực 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 bạn đặt giá trị này thành inactive, 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 với 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.
Quy trình tiêu đề HTTP
Với các tiêu đề HTTP, trình duyệt có thể nhận ra thời điểm người dùng đã cấp quyền truy cập vào 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 các lượt truy cập tiếp theo.
Với Tiêu đề truy cập bộ nhớ, 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 lại vào
website.examplecócalendar.exampleđược nhúng. Lần tìm nạp này chưa có quyền truy cập vào cookie như trước. Tuy nhiên, người dùng đã cấp quyềnstorage-accesstrước đó và lệ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 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 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 chưa được phân vùng (kích hoạt quyền
storage-accesscho lần 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 bao gồm 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 bằng quyền truy cập cookie chưa 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 cookie chưa phân vùng bằng quyền truy cập bộ nhớ. 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 bộ nhớ, bạn nên cập nhật mã trong hai trường hợp sau:
- 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 đề SAA
Để 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 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 cập nhật mã nào ở 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 SAA.
Phía máy chủ
Ở 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 gốc
Với Tiêu đề truy cập bộ nhớ, Chrome gửi tiêu đề Origin trong nhiều yêu cầu hơn so với trước đây. Điều này có thể ảnh hưởng đến logic phía máy chủ nếu logic đó dựa vào tiêu đề Origin chỉ xuất hiện cho một số loại yêu cầu cụ thể (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 lại mã phía máy chủ:
- Kiểm tra mọi quy trình 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
Bạn nên sử dụng tiêu đề truy cập bộ nhớ để sử dụng SAA hiệu quả hơn. Nhìn chung, thay đổi này mang lại một số điểm cải tiến:
- Hỗ trợ nhúng không phải iframe: Cho phép SAA cho nhiều 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.
- Mức sử dụng CPU thấp hơn: Ít xử lý JavaScript hơn.
- Cải thiện trải nghiệm người dùng: Loại bỏ các lượt tải trung gian gây gián đoạn.
Tham gia thử nghiệm về nguồn gốc
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 hữu 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 sử dụng thử nghiệm theo 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ý thử nghiệm theo nguyên gốc bắt đầu từ Chrome 130. Cách tham gia thử nghiệm về nguồn gốc:
- Truy cập vào trang đăng ký dùng thử tính năng thử nghiệm về nguồn gốc của Tiêu đề truy cập bộ nhớ.
- Làm theo hướng dẫn về việc tham gia chương trình dùng thử theo nguyên gốc.
Kiểm thử cục bộ
Bạn có thể thử nghiệm tính năng Tiêu đề truy cập bộ nhớ trên máy để đả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.
Tham gia 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ể gửi 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.