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 User-Agent.
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ư các tệp 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ử.
Khi kết hợp các tham số này với tính đa dạng tuyệt đối về các giá trị có thể có, chuỗi User-Agent có thể chứa đủ thông tin để cho phép từng người dùng được xác định riêng biệt.
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 bí mật 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 ảnh hưởng không cân xứng đến 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 tính năng 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 á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!
Bộ Gợi ý ứng dụng hiện tại chủ yếu mô tả khả năng hiển thị và kết nối của trình duyệt. Bạn có thể khám phá 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, ví dụ: bằng cách 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 mọi thông tin, hãy bắt đầu với thông tin giải thích, sau đó tìm hiểu kỹ hơn về đề 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 của trình duyệt, phiên bản quan trọng / chính, nền tảng và một chỉ báo nếu khách hà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 đề của yêu cầu và phản hồi của tác nhân người dùng
🔮️ Phản hồi Accept-CH⬆️ Yêu cầu tiê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 giá trị true) hay không (?0 cho giá trị false). |
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 cung cấp phiên bản trình duyệt đầy đủ và 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.
Gợi ý thời gian tồn tại và đặt lại
Các 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 trong tất cả các yêu cầu của 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à 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á tất cả gợi ý mà trình duyệt gửi một cách hiệu quả 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 URL này vào bất kỳ nơi nào
người dùng đang đặ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 các 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 bất kỳ 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ụ:
⬇️ Câu trả lờ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
Sec-CH-UA-Platform-Version: "10"
⬆️ Yêu cầu đến cdn.provider hoặc img.example.com
DPR: 2
Nên sử dụng Thông tin mô tả của ứng dụng tác nhân người dùng ở đâu?
Câu trả lời nhanh là bạn nên tái cấu trúc mọi thực thể mà bạn đang phân tích cú pháp tiêu đề User-Agent hoặc sử dụng bất kỳ lệnh gọi JavaScript nào truy cập vào cùng một thông tin (tức là navigator.userAgent, navigator.appVersion hoặc navigator.platform) để sử dụng Gợi ý ứng dụng của tác nhân người dùng.
Để tiến xa hơn, bạn nên kiểm tra lại việc sử dụng thông tin Agent-User và thay thế thông tin đó bằng các phương thức khác bất cứ khi nào có thể. Thông thường, bạn có thể hoàn thành cùng một mục tiêu bằng cách sử dụng tính năng nâng cao tăng dần, phát hiện tính năng hoặc thiết kế thích ứng. Vấn đề cơ bản khi dựa vào dữ liệu Trình đại diện người dùng là bạn luôn duy trì mối liên kết giữa thuộc tính bạn đang kiểm tra và hành vi mà thuộc tính đó cho phép. Đây là chi phí bảo trì để đảm bảo tính năng phát hiện của bạn toàn diện và luôn được cập nhật.
Với những lưu ý này, kho lưu trữ Gợi ý ứng dụng tác nhân người dùng liệt kê một số trường hợp sử dụng hợp lệ cho các trang web.
Điều gì sẽ xảy ra với chuỗi User-Agent?
Kế hoạch là giảm thiểu khả năng theo dõi ẩn trên web bằng cách giảm lượng thông tin nhận dạng mà chuỗi Tác nhân người dùng hiện tại hiển thị, đồng thời không gây gián đoạn quá mức trên các trang web hiện có. Giờ đây, việc ra mắt Thông tin mô tả của ứng dụng tác nhân người dùng sẽ giúp bạn có cơ hội tìm hiểu và thử nghiệm tính năng mới trước khi thực hiện bất kỳ thay đổi nào đối với chuỗi Tác nhân người dùng.
Cuối cùng, thông tin trong chuỗi User-Agent sẽ được giảm để duy trì định dạng cũ, đồng thời chỉ cung cấp cùng một trình duyệt cấp cao và thông tin phiên bản quan trọng theo gợi ý mặc định. Trong Chromium, thay đổi này đã được hoãn cho đến ít nhất là năm 2022 để hệ sinh thái có thêm thời gian đánh giá các tính năng mới của Gợi ý ứng dụng tác nhân người dùng.
Bạn có thể kiểm thử một phiên bản của tính năng này bằng cách bật cờ about://flags/#reduce-user-agent từ Chrome 93 (Lưu ý: cờ này có tên là about://flags/#freeze-user-agent trong các phiên bản Chrome 84 – 92). Thao tác này sẽ trả về một chuỗi chứa các mục trong quá khứ vì lý do tương thích, nhưng với các thông tin cụ thể đã được dọn dẹp. Ví dụ:
Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.0.0 Mobile Safari/537.36
Hình thu nhỏ của Sergey Zolkin trên Unsplash