Cải thiện quyền riêng tư của người dùng và trải nghiệm của nhà phát triển nhờ tính năng Gợi ý ứng dụng của tác nhân người dùng

Tính năng Gợi ý ứng dụng tác nhân người dùng là một phần mở rộng mới của API Gợi ý ứng dụng, cho phép nhà phát triển truy cập vào thông tin về trình duyệt của người dùng theo cách bảo đảm quyền riêng tư và thiết kế công thái học.

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ụ thể thay vì cần phân tích cú pháp thông qua 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 mức độ chi tiết của chuỗi tác nhân người dùng.

Tìm hiểu cách cập nhật chức năng hiện có dựa vào 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 trình duyệt web đưa ra yêu cầu, chúng bao gồm thông tin về trình duyệt và môi trường của mình để máy chủ có thể bật tính năng phân tích và tuỳ chỉnh phản hồi. Điều này được định nghĩa từ năm 1996 (RFC 1945 cho HTTP/1.0), trong đó bạn có thể tìm định nghĩa ban đầu cho chuỗi Tác nhân người dùng, trong đó có một ví dụ:

User-Agent: CERN-LineMode/2.15 libwww/2.17b3

Tiêu đề này nhằm mục đích xác đị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).

Trạng thái của chuỗi Tác nhân người dùng

Trong nhiều thập kỷ xen kẽ, chuỗi này đã tích luỹ thêm nhiều thông tin chi tiết về khách hàng đưa ra yêu cầu (cũng như không quan trọng, do phải truy cập ngược lại) tương thích). Chúng ta có thể thấy điều đó khi xem xét Tác nhân người dùng hiện tại của Chrome chuỗi:

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 của người dùng và phiên bản, mẫu thiết bị, thương hiệu của trình duyệt và phiên bản đầy đủ, đủ gợi ý để suy luận rằng đó là một trình duyệt di động và không đề cập đến một số tham chiếu đến các trình duyệt trình duyệt vì lý do lịch sử.

Sự kết hợp của các tham số này với sự đa dạng tuyệt đối của các giá trị có thể có có nghĩa là chuỗi Tác nhân người dùng có thể chứa đủ thông tin để cho phép người dùng được xác định duy nhất.

Chuỗi User-Agent hỗ trợ nhiều trường hợp sử dụng hợp lệ, đồng thời phục vụ cho mục đích quan trọng đối với các nhà phát triển cũng như chủ sở hữu trang web. Tuy nhiên, Ngoài ra, điều quan trọng là người dùng phải quyền riêng tư được bảo vệ khỏi các phương pháp 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 đó.

Cũng cần phải cải thiện khả năng tương thích web khi sử dụng Tác nhân người dùng . Hàm này không có cấu trúc, do đó việc phân tích cú pháp hàm này sẽ phức tạp hơn một cách 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 làm tổn thương người dùng. Những vấn đề này cũng gây tổn hại không đáng kể cho người dùng của những trình duyệt ít phổ biến hơn, vì có thể đã không kiểm tra được cấu hình.

Ra mắt tính năng Gợi ý ứng dụng tác nhân người dùng mới

Gợi ý về ứng dụng tác nhân người dùng cho phép bạn truy cập vào cùng một thông tin nhưng theo cách bảo đảm quyền riêng tư hơn trong bật chế độ cho phép trình duyệt để cuối cùng giảm giá trị mặc định của chuỗi User-Agent đang phát sóng mọi thứ. Gợi ý về ứng dụng thực thi là mô hình mà máy chủ phải yêu cầu trình duyệt cung cấp một tập dữ liệu về máy khách (gợi ý) và trình duyệt sẽ áp dụng các 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ì tiết lộ tất cả thông tin 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à thời trang dễ kiểm tra. Nhà phát triển cũng hưởng lợi từ một API đơn giản hơn – API này không thường xuyên hơn biểu cảm!

Bộ Gợi ý ứng dụng hiện tại chủ yếu mô tả giao diện và khả năng kết nối. Bạn có thể tìm hiểu chi tiết trong bài viết Tự động chọn tài nguyên bằng gợi ý ứng dụng, nhưng dưới đây là phần ôn lại nhanh về quá trình này.

Máy chủ yêu cầu Gợi ý ứ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 yêu cầu:

⬆️ 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 của mình, ví dụ: bằng cách phân phát hình ảnh ở giải quyết phù hợp.

Tính năng Gợi ý ứng dụng tác nhân người dùng mở rộng phạm vi cho các thuộc tính bằng Sec-CH-UA có thể được chỉ định qua tiêu đề phản hồi của máy chủ Accept-CH. Dành cho mọi người thông tin chi tiết, bắt đầu bằng giải thích và thì bạn có thể tìm hiểu kỹ đề xuất đầy đủ.

Gợi ý ứng dụng tác nhân người dùng trên Chromium 89

Tính năng Gợi ý ứ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 trả về thương hiệu trình duyệt, phiên bản quan trọng / quan trọng, nền tảng và 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 thương hiệu trình duyệt và phiên bản quan trọng của trình duyệt.
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 hoàn chỉnh 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 trình duyệt.
Sec-CH-UA-Platform "Android" Nền tảng cho 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" Kiến trúc cơ bản của thiết bị. Mặc dù việc 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 với định dạng mặc định.
Sec-CH-UA-Model "Pixel 3" Mẫu thiết bị.
Sec-CH-UA-Bitness "64" Độ bit của kiến 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ớ)

Trao đổi mẫu

Một ví dụ về giao dịch trao đổi 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 /downloads từ trang web đó rồi 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à bổ sung yêu cầu 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 gợi ý bổ sung trong yêu cầu.

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

Cùng với các tiêu đề, Tác nhân người dùng cũng có thể được truy cập trong JavaScript qua navigator.userAgentData. Mặc định Sec-CH-UA, Sec-CH-UA-Mobile và Bạn có thể truy cập thông tin về tiêu đề Sec-CH-UA-Platform qua brandsmobile 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(). Chiến lược phát hành đĩa đơn "entropy cao" là thuật ngữ tham chiếu đến entropy thông tin, theo cách khác từ – lượng thông tin mà các giá trị này cho biết về trải nghiệm của người dùng trình duyệt. Giống như việc yêu cầu tiêu đề bổ sung, điều này tuỳ thuộc vào trình duyệt những giá trị nào (nếu có) được trả về.

// 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 mình tại user-agent-client-hints.glitch.me.

Gợi ý về thời gian tồn tại và đặt lại

Các gợi ý được chỉ định qua tiêu đề Accept-CH sẽ được gửi trong suốt thời gian diễn ra phiên của trình duyệt hoặc cho đến khi một loạt gợi ý khác được chỉ định.

Điều đó có nghĩa là nếu máy chủ gửi:

⬇️ Câu trả lờ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 bạn nhận được một tiêu đề Accept-CH khác thì điều đó sẽ hoàn toàn thay thế gợi ý hiện tại mà trình duyệt đang gửi.

⬇️ Câu trả lờ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 là bạn nên coi tiêu đề Accept-CH là chỉ định tập hợp đầy đủ gợi ý mong muốn cho trang đó, nghĩa là trình duyệt sẽ gửi các gợi ý được chỉ định cho tất cả các tài nguyên phụ trên trang đó. Mặc dù gợi ý sẽ vẫn tồn tại cho đến ngày tiếp theo điều hướng, trang web không nên dựa hoặc giả định rằng chúng sẽ được phân phối.

Bạn cũng có thể 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. Cân nhắc thêm 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" …>. Gợi ý đã yêu cầu sẽ chỉ được gửi vào các yêu cầu do trang khởi tạo chứ không phải trên bất kỳ lần điều hướng tiếp theo nào.

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 đối với các yêu cầu có cùng nguồn gốc. Điều đó có nghĩa là nếu bạn yêu cầu các gợi ý cụ thể về https://example.com, nhưng các tài nguyên mà bạn muốn tối ưu hoá là vào https://downloads.example.com mà họ sẽ không nhận được bất kỳ gợi ý nào.

Để cho phép gợi ý trong các yêu cầu từ nhiều nguồn gốc, bạn phải chỉ định từng gợi ý và nguồn gốc qua tiêu đề Permissions-Policy. Để áp dụng quy tắc này cho Gợi ý ứng dụng tác nhân người dùng, bạn cần phải viết thường gợi ý 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

Sử dụng Gợi ý ứ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 trường hợp bạn đang phân tích cú pháp tiêu đề Tác nhân người dùng hoặc sử dụng bất kỳ lệnh gọi JavaScript nào truy cập cùng một thông tin (ví dụ: navigator.userAgent, navigator.appVersion, hoặc navigator.platform) để sử dụng Gợi ý ứng dụng tác nhân người dùng.

Để tiến thêm một bước, bạn nên kiểm tra lại việc bạn có sử dụng User-Agent hay không thông tin và thay thế 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ể thực hiện cùng một mục tiêu bằng cách sử dụng tính năng cải tiến tăng dần hoặc thiết kế thích ứng. Vấn đề cơ bản khi dựa vào dữ liệu Tác nhân người dùng là bạn luôn duy trì mối liên kết giữa thuộc tính mà bạn đang kiểm tra và hành vi của thuộc tính đó bật. Đó là chi phí bảo trì để đảm bảo rằng việc phát hiện của bạn toàn diện và được cập nhật thường xuyên.

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 Tác nhân người dùng?

Kế hoạch này là giảm thiểu khả năng theo dõi bí mật 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 có hiển thị mà vẫn không gây gián đoạn quá mức trên các trang web hiện tại. Giới thiệu về Tác nhân người dùng Tính năng Gợi ý về khách hàng nay giúp bạn có cơ hội tìm hiểu và thử nghiệm vớ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 Tác nhân người dùng sẽ giảm bớt, nhờ đó duy trì trong khi chỉ cung cấp cùng một trình duyệt cấp cao và thông tin phiên bản theo gợi ý mặc định. Trong Chromium, thay đổi này đã được hoãn ít nhất đến năm 2022 nhằm có thêm thời gian để hệ sinh thái đánh giá các khả năng Gợi ý ứng dụng tác nhân người dùng mới.

Bạn có thể thử nghiệm một phiên bản của biến thể này bằng cách bật Cờ about://flags/#reduce-user-agent từ Chrome 93 (Lưu ý: cờ này là 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 có các mục nhập trước đây vì lý do tương thích, nhưng với các sản phẩm cụ thể. Ví dụ: bạn có thể nhập một số thông tin như:

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 về Không hiển thị nội dung