Gợi ý cho ứng dụng tác nhân người dùng là một phần mở rộng mới cho Client Hints API, cho phép nhà phát triển truy cập thông tin về trình duyệt của người dùng theo cách bảo vệ quyền riêng tư và phù hợp với người dùng.
Gợi ý ứng dụng cho phép nhà phát triển chủ động yêu cầu thông tin về thiết bị hoặc điều kiện của người dùng, thay vì cần phải phân tích cú pháp thông tin đó từ chuỗi Tác nhân người dùng (UA). Việc cung cấp tuyến đường thay thế này là bước đầu tiên để cuối cùng giảm độ chi tiết của chuỗi Trình đại diện người dùng.
Tìm hiểu cách cập nhật chức năng hiện có dựa trên việc phân tích cú pháp chuỗi Tác nhân người dùng để sử dụng Gợi ý ứng dụng tác nhân người dùng.
Thông tin khái quát
Khi đưa ra yêu cầu, trình duyệt web sẽ bao gồm thông tin về trình duyệt và môi trường của trình duyệt để máy chủ có thể bật tính năng phân tích và tuỳ chỉnh phản hồi. Chuỗi này được xác định từ năm 1996 (RFC 1945 cho HTTP/1.0). Tại đây, bạn có thể tìm thấy định nghĩa ban đầu cho chuỗi User-Agent, bao gồm cả một ví dụ:
User-Agent: CERN-LineMode/2.15 libwww/2.17b3
Tiêu đề này được dùng để chỉ định sản phẩm (ví dụ: trình duyệt hoặc thư viện) và một nhận xét (ví dụ: phiên bản) theo thứ tự quan trọng.
Trạng thái của chuỗi Tác nhân người dùng
Trong những thập kỷ qua, chuỗi này đã tích luỹ thêm nhiều thông tin chi tiết khác về ứng dụng đưa ra yêu cầu (cũng như rác, do khả năng tương thích ngược). Chúng ta có thể thấy điều đó khi xem chuỗi User-Agent hiện tại của Chrome:
Mozilla/5.0 (Linux; Android 10; Pixel 3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4076.0 Mobile Safari/537.36
Chuỗi ở trên chứa thông tin về hệ điều hành và phiên bản của người dùng, kiểu thiết bị, thương hiệu và phiên bản đầy đủ của trình duyệt, đủ gợi ý để suy ra đó là trình duyệt di động, chưa kể một số tệp tham chiếu đến các trình duyệt khác vì lý do lịch sử.
Việc kết hợp các tham số này với sự đa dạng tuyệt đối của các giá trị có thể có nghĩa là chuỗi User-Agent có thể chứa đủ thông tin để cho phép xác định riêng từng người dùng.
Chuỗi User-Agent cho phép nhiều trường hợp sử dụng hợp pháp và phục vụ một mục đích quan trọng cho nhà phát triển và chủ sở hữu trang web. Tuy nhiên, điều quan trọng là quyền riêng tư của người dùng phải được bảo vệ khỏi các phương thức theo dõi ẩn, và việc gửi thông tin UA theo mặc định sẽ đi ngược lại mục tiêu đó.
Bạn cũng cần cải thiện khả năng tương thích với web khi nói đến chuỗi User-Agent. Mã này không có cấu trúc, vì vậy việc phân tích cú pháp sẽ dẫn đến sự phức tạp không cần thiết, thường là nguyên nhân gây ra lỗi và các vấn đề về khả năng tương thích của trang web gây ảnh hưởng đến người dùng. Những vấn đề này cũng gây bất lợi không cân xứng cho người dùng các trình duyệt ít phổ biến hơn, vì các trang web có thể không kiểm thử được cấu hình của họ.
Giới thiệu thông tin mô tả của ứng dụng tác nhân người dùng mới
Gợi ý ứng dụng của tác nhân người dùng cho phép truy cập vào cùng một thông tin nhưng theo cách bảo vệ quyền riêng tư hơn, từ đó cho phép trình duyệt giảm dần việc truyền tin mọi thứ theo mặc định của chuỗi Tác nhân người dùng. Gợi ý ứng dụng thực thi một mô hình trong đó máy chủ phải yêu cầu trình duyệt cung cấp một tập dữ liệu về ứng dụng (gợi ý) và trình duyệt sẽ áp dụng chính sách hoặc cấu hình người dùng của riêng mình để xác định dữ liệu nào được trả về. Điều này có nghĩa là thay vì hiển thị tất cả thông tin về Tác nhân người dùng theo mặc định, quyền truy cập hiện được quản lý theo cách rõ ràng và có thể kiểm tra. Nhà phát triển cũng được hưởng lợi từ một API đơn giản hơn – không còn biểu thức thông thường nữa!
Tập hợp Gợi ý ứng dụng hiện tại chủ yếu mô tả khả năng kết nối và hiển thị của trình duyệt. Bạn có thể tìm hiểu thông tin chi tiết trong bài viết Tự động hoá lựa chọn tài nguyên bằng Gợi ý ứng dụng, nhưng sau đây là một số thông tin nhanh về quy trình này.
Máy chủ yêu cầu các Gợi ý dành cho ứng dụng cụ thể thông qua một tiêu đề:
⬇️ Phản hồi từ máy chủ
Accept-CH: Viewport-Width, Width
Hoặc thẻ meta:
<meta http-equiv="Accept-CH" content="Viewport-Width, Width" />
Sau đó, trình duyệt có thể chọn gửi lại các tiêu đề sau trong các yêu cầu tiếp theo:
⬆️ Yêu cầu tiếp theo
Viewport-Width: 460
Width: 230
Máy chủ có thể chọn thay đổi các phản hồi, chẳng hạn như phân phát hình ảnh ở độ phân giải phù hợp.
Thông tin gợi ý của ứng dụng tác nhân người dùng mở rộng phạm vi thuộc tính bằng tiền tố Sec-CH-UA có thể được chỉ định thông qua tiêu đề phản hồi máy chủ Accept-CH. Để biết tất cả thông tin chi tiết, hãy bắt đầu với nội dung giải thích, sau đó tìm hiểu đề xuất đầy đủ.
Thông tin mô tả của ứng dụng tác nhân người dùng từ Chromium 89
Thông tin mô tả của ứng dụng tác nhân người dùng được bật theo mặc định trong Chrome kể từ phiên bản 89.
Theo mặc định, trình duyệt sẽ trả về thương hiệu trình duyệt, phiên bản chính / lớn, nền tảng và chỉ báo nếu ứng dụng là thiết bị di động:
⬆️ Tất cả yêu cầu
Sec-CH-UA: "Chromium";v="93", "Google Chrome";v="93", " Not;A Brand";v="99"
Sec-CH-UA-Mobile: ?0
Sec-CH-UA-Platform: "macOS"
Tiêu đề yêu cầu và phản hồi User-Agent
⬇️ Phản hồi Accept-CH⬆️ Tiêu đề yêu cầu |
⬆️ Yêu cầu Giá trị mẫu |
Mô tả |
|---|---|---|
Sec-CH-UA |
"Chromium";v="84","Google Chrome";v="84" |
Danh sách các thương hiệu trình duyệt và phiên bản quan trọng của các thương hiệu đó. |
Sec-CH-UA-Mobile |
?1 |
Giá trị boolean cho biết trình duyệt có trên thiết bị di động (?1 cho đúng) hay không (?0 cho sai). |
Sec-CH-UA-Full-Version |
"84.0.4143.2" |
[Không dùng nữa]Phiên bản đầy đủ cho trình duyệt. |
Sec-CH-UA-Full-Version-List |
"Chromium";v="84.0.4143.2","Google Chrome";v="84.0.4143.2" |
Danh sách thương hiệu trình duyệt và phiên bản đầy đủ của các thương hiệu đó. |
Sec-CH-UA-Platform |
"Android" |
Nền tảng của thiết bị, thường là hệ điều hành (OS). |
Sec-CH-UA-Platform-Version |
"10" |
Phiên bản dành cho nền tảng hoặc hệ điều hành. |
Sec-CH-UA-Arch |
"arm" |
Cấu trúc cơ bản của thiết bị. Mặc dù điều này có thể không liên quan đến việc hiển thị trang, nhưng trang web có thể muốn cung cấp tệp tải xuống theo định dạng phù hợp theo mặc định. |
Sec-CH-UA-Model |
"Pixel 3" |
Mẫu thiết bị. |
Sec-CH-UA-Bitness |
"64" |
Kích thước bit của cấu trúc cơ bản (tức là kích thước tính bằng bit của một số nguyên hoặc địa chỉ bộ nhớ) |
Ví dụ về giao dịch hoán đổi
Một ví dụ về giao dịch sẽ có dạng như sau:
⬆️ Yêu cầu ban đầu từ trình duyệt
Trình duyệt đang yêu cầu trang /downloads từ trang web và gửi Tác nhân người dùng cơ bản mặc định.
GET /downloads HTTP/1.1
Host: example.site
Sec-CH-UA: "Chromium";v="93", "Google Chrome";v="93", " Not;A Brand";v="99"
Sec-CH-UA-Mobile: ?1
Sec-CH-UA-Platform: "Android"
⬇️ Phản hồi từ máy chủ
Máy chủ gửi lại trang và yêu cầu phiên bản trình duyệt đầy đủ cũng như nền tảng.
HTTP/1.1 200 OK
Accept-CH: Sec-CH-UA-Full-Version-List
⬆️ Các yêu cầu tiếp theo
Trình duyệt cấp cho máy chủ quyền truy cập vào thông tin bổ sung và gửi lại các gợi ý bổ sung trong tất cả các yêu cầu tiếp theo.
GET /downloads/app1 HTTP/1.1
Host: example.site
Sec-CH-UA: " Not A;Brand";v="99", "Chromium";v="98", "Google Chrome";v="98"
Sec-CH-UA-Mobile: ?1
Sec-CH-UA-Full-Version-List: " Not A;Brand";v="99.0.0.0", "Chromium";v="98.0.4738.0", "Google Chrome";v="98.0.4738.0"
Sec-CH-UA-Platform: "Android"
API JavaScript
Bên cạnh các tiêu đề, bạn cũng có thể truy cập vào User-Agent trong JavaScript thông qua navigator.userAgentData. Bạn có thể truy cập thông tin tiêu đề Sec-CH-UA, Sec-CH-UA-Mobile và Sec-CH-UA-Platform mặc định thông qua các thuộc tính brands và mobile tương ứng:
// Log the brand data
console.log(navigator.userAgentData.brands);
// output
[
{
brand: 'Chromium',
version: '93',
},
{
brand: 'Google Chrome',
version: '93',
},
{
brand: ' Not;A Brand',
version: '99',
},
];
// Log the mobile indicator
console.log(navigator.userAgentData.mobile);
// output
false;
// Log the platform value
console.log(navigator.userAgentData.platform);
// output
"macOS";
Các giá trị bổ sung được truy cập thông qua lệnh gọi getHighEntropyValues(). Thuật ngữ "entropy cao" đề cập đến entropy thông tin, nói cách khác, là lượng thông tin mà các giá trị này tiết lộ về trình duyệt của người dùng. Cũng giống như khi yêu cầu các tiêu đề bổ sung, trình duyệt sẽ trả về những giá trị nào (nếu có).
// Log the full user-agent data
navigator
.userAgentData.getHighEntropyValues(
["architecture", "model", "bitness", "platformVersion",
"fullVersionList"])
.then(ua => { console.log(ua) });
// output
{
"architecture":"x86",
"bitness":"64",
"brands":[
{
"brand":" Not A;Brand",
"version":"99"
},
{
"brand":"Chromium",
"version":"98"
},
{
"brand":"Google Chrome",
"version":"98"
}
],
"fullVersionList":[
{
"brand":" Not A;Brand",
"version":"99.0.0.0"
},
{
"brand":"Chromium",
"version":"98.0.4738.0"
},
{
"brand":"Google Chrome",
"version":"98.0.4738.0"
}
],
"mobile":false,
"model":"",
"platformVersion":"12.0.1"
}
Bản minh hoạ
Bạn có thể thử cả tiêu đề và API JavaScript trên thiết bị của riêng mình tại user-agent-client-hints.glitch.me.
Thời gian hoạt động của gợi ý và đặt lại
Gợi ý được chỉ định thông qua tiêu đề Accept-CH sẽ được gửi trong suốt phiên trình duyệt hoặc cho đến khi một nhóm gợi ý khác được chỉ định.
Điều đó có nghĩa là nếu máy chủ gửi:
⬇️ Phản hồi
Accept-CH: Sec-CH-UA-Full-Version-List
Sau đó, trình duyệt sẽ gửi tiêu đề Sec-CH-UA-Full-Version-List trên tất cả các yêu cầu cho trang web đó cho đến khi trình duyệt đóng.
⬆️ Các yêu cầu tiếp theo
Sec-CH-UA-Full-Version-List: " Not A;Brand";v="99.0.0.0", "Chromium";v="98.0.4738.0", "Google Chrome";v="98.0.4738.0"
Tuy nhiên, nếu nhận được một tiêu đề Accept-CH khác, thì tiêu đề đó sẽ thay thế hoàn toàn các gợi ý hiện tại mà trình duyệt đang gửi.
⬇️ Phản hồi
Accept-CH: Sec-CH-UA-Bitness
⬆️ Các yêu cầu tiếp theo
Sec-CH-UA-Platform: "64"
Sec-CH-UA-Full-Version-List được yêu cầu trước đó sẽ không được gửi.
Tốt nhất bạn nên coi tiêu đề Accept-CH là chỉ định bộ gợi ý đầy đủ mà bạn muốn cho trang đó, nghĩa là sau đó trình duyệt sẽ gửi các gợi ý đã chỉ định cho tất cả tài nguyên phụ trên trang đó. Mặc dù các gợi ý sẽ vẫn tồn tại cho thao tác điều hướng tiếp theo, nhưng trang web không được dựa vào hoặc giả định rằng các gợi ý đó sẽ được phân phối.
Bạn cũng có thể sử dụng tính năng này để xoá hiệu quả tất cả gợi ý do trình duyệt gửi bằng cách gửi một Accept-CH trống trong phản hồi. Hãy cân nhắc thêm thông báo này ở bất kỳ nơi nào người dùng đặt lại lựa chọn ưu tiên hoặc đăng xuất khỏi trang web của bạn.
Mẫu này cũng khớp với cách hoạt động của gợi ý thông qua thẻ <meta http-equiv="Accept-CH" …>. Các gợi ý được yêu cầu sẽ chỉ được gửi theo các yêu cầu do trang khởi tạo chứ không phải theo bất kỳ thao tác điều hướng nào sau đó.
Phạm vi gợi ý và yêu cầu trên nhiều nguồn gốc
Theo mặc định, Gợi ý ứng dụng sẽ chỉ được gửi trên các yêu cầu cùng nguồn gốc. Điều đó có nghĩa là nếu bạn yêu cầu gợi ý cụ thể trên https://example.com, nhưng tài nguyên bạn muốn tối ưu hoá lại nằm trên https://downloads.example.com, thì các tài nguyên đó sẽ không nhận được gợi ý nào.
Để cho phép gợi ý về các yêu cầu trên nhiều nguồn gốc, mỗi gợi ý và nguồn gốc phải được chỉ định bằng tiêu đề Permissions-Policy. Để áp dụng điều này cho Gợi ý ứng dụng tác nhân người dùng, bạn cần viết gợi ý ở dạng chữ thường và xoá tiền tố sec-. Ví dụ:
⬇️ Phản hồi từ example.com
Accept-CH: Sec-CH-UA-Platform-Version, DPR
Permissions-Policy: ch-ua-platform-version=(self "downloads.example.com"),
ch-dpr=(self "cdn.provider" "img.example.com");
⬆️ Yêu cầu gửi đến downloads.example.com