שיפור פרטיות המשתמשים וחוויית המפתחים באמצעות User-Agent Client Hints

User-Agent Client Hints הם הרחבה חדשה של Client Hints API שמאפשרת למפתחים לגשת למידע על הדפדפן של המשתמש בצורה ארגונומית ושמירה על הפרטיות.

Rowan Merewood

Yoav Weiss

טיפים ללקוחות מאפשרים למפתחים לבקש באופן פעיל מידע על את המכשיר או את התנאים, במקום לנתח אותם מחוץ לסוכן המשתמש (UA) String. מתן המסלול החלופי הזה הוא השלב הראשון בתהליך וצמצום רמת הפירוט של המחרוזת של סוכן המשתמש.

ללמוד איך לעדכן את הפונקציונליות הקיימת המסתמכת על ניתוח של מחרוזת של סוכן משתמש לצורך שימוש ברמזים של לקוח סוכן משתמש במקום זאת.

זהירות: אם אתם כבר משתמשים ברמזים של סוכן משתמש, חשוב לזכור שהחל מגרסה 90 של Chrome פורמט הכותרת השתנה, כך שאסימוני Accept-CH חייבים להתאים בדיוק הוחזרו כותרות.

רקע

כשדפדפני אינטרנט שולחים בקשות, הם כוללים מידע על הדפדפן את הסביבה שלו, כדי שהשרתים יוכלו להפעיל ניתוח נתונים ולהתאים אישית את התגובה. היא הוגדרה כל הדרך בשנת 1996 (RFC 1945 עבור HTTP/1.0), שם ניתן למצוא את ההגדרה המקורית של מחרוזת ה-User-Agent, שכוללת דוגמה:

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

הכותרת הזו נועדה לציין, לפי סדר החשיבות, את המוצר (למשל, בדפדפן או בספרייה) ותגובה (למשל גרסה).

המצב של מחרוזת סוכן המשתמש

במהלך העשורים שחולפים, המחרוזת הזו צברה מגוון פרטים על הלקוח ששלח את הבקשה (וגם גסויות, בגלל ותאימות). ניתן לראות זאת כשאנחנו בודקים את הסוכן המשתמש הנוכחי של Chrome string:

Mozilla/5.0 (Linux; Android 10; Pixel 3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4076.0 Mobile Safari/537.36

המחרוזת שלמעלה מכילה מידע על מערכת ההפעלה של המשתמש ועל הגרסה המלאה, דגם המכשיר, מותג הדפדפן והגרסה המלאה, מספיק רמזים להסיק שמדובר בדפדפן לנייד, ושלא נדבר על כמה הפניות בדפדפנים מסיבות היסטוריות.

השילוב של הפרמטרים האלה עם המגוון העצום של ערכים אפשריים היא יכולה להכיל מספיק מידע כדי לאפשר משתמשים כך שניתן יהיה לזהות אותם באופן ייחודי.

מחרוזת ה-User-Agent מאפשרת תרחישים לדוגמה לגיטימיים רבים, והיא משרתת מטרה חשובה למפתחים ולבעלי אתרים. אבל חשוב חשובות גם הפרטיות מוגנת מפני שיטות מעקב נסתרות ושליחת מידע של UA כברירת מחדל מנוגדת למטרה הזו.

יש גם צורך לשפר את התאימות לאינטרנט בכל הנוגע לסוכן המשתמש String. הוא לא מובנה, לכן הניתוח שלו יוצר מורכבות מיותרת, לרוב זו הסיבה לבאגים ולבעיות תאימות של אתרים שפוגעים במשתמשים. בנוסף, הבעיות האלו פוגעות באופן לא פרופורציונלי במשתמשים בדפדפנים פחות נפוצים, ייתכן שהאתרים לא הצליחו לבדוק מול ההגדרות האישיות שלהם.

נעים להכיר: User-Agent Client Hints

רמזים ללקוחות של סוכן משתמשים לאפשר גישה לאותו מידע אך באופן ששומר יותר על הפרטיות, מפעילים דפדפנים כדי בסופו של דבר לצמצם את ערך ברירת המחדל של מחרוזת סוכן המשתמש לשדר הכול. רמזים ללקוחות מודל שבו השרת צריך לבקש מהדפדפן קבוצת נתונים על הלקוח (הרמזים) והדפדפן מחיל מדיניות או הגדרות משתמש משלו על כדי לקבוע אילו נתונים יוחזרו. המשמעות היא שבמקום לחשוף את כל למידע על סוכן המשתמש כברירת מחדל, הגישה מנוהלת עכשיו באופן באופן שאפשר לקרוא אותו. גם המפתחים נהנים מממשק API פשוט יותר - הבעות פנים!

הקבוצה הנוכחית של רמזים ללקוח מתארת בעיקר את תצוגת הדפדפן יכולות חיבור. אפשר לעיין בפרטים במאמר אוטומציה של בחירת משאבים באמצעות טיפים ללקוחות, אבל הנה רענון קצר לגבי התהליך.

השרת מבקש רמזים ספציפיים ללקוח באמצעות הכותרת:

🎶️ תגובה מהשרת

Accept-CH: Viewport-Width, Width

או מטא תג:

<meta http-equiv="Accept-CH" content="Viewport-Width, Width" />

לאחר מכן הדפדפן יוכל לבחור לשלוח את הכותרות הבאות בחזרה בקשות:

⬆️ בקשה עוקבת

Viewport-Width: 460
Width: 230

השרת יכול לבחור לשנות את תגובותיו. לדוגמה, על ידי הצגת תמונות לתגובה המתאימה.

הערה: יש דיונים מתמשכים לגבי הפעלת רמזים ללקוחות בבקשה ראשונית. אבל כדאי לשקול עיצוב רספונסיבי או שיפור הדרגתי לפני שממשיכים במסלול הזה.

טיפים ללקוח של סוכן משתמש מרחיבים את טווח הנכסים באמצעות Sec-CH-UA קידומת שניתן לציין באמצעות כותרת תגובת השרת Accept-CH. לכל את הפרטים, נתחיל בהסבר ולאחר מכן להתעמק בהצעה המלאה.

הערה: טיפים ללקוחות נשלחים רק דרך חיבורים מאובטחים, אז חשוב לוודא האתר שלך הועבר ל-HTTPS.

טיפים ללקוחות של סוכן משתמש מ-Chromium 89

רמזים על הלקוח של סוכן משתמש מופעלים ב-Chrome כברירת מחדל מגרסה 89.

כברירת מחדל, הדפדפן מחזיר את מותג הדפדפן, את הגרסה המשמעותית / הראשית, בפלטפורמה, ומדד אם הלקוח הוא מכשיר נייד:

⬆️ כל הבקשות

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"

אזהרה: המאפיינים האלה מורכבים יותר מערך אחד, ולכן מידע מובנה כותרות משמשים לייצוג רשימות ובוליאניים.

כותרות של בקשות ותשובות של סוכן משתמש

🎶️ תשובה Accept-CH ⬆️ כותרת הבקשה	⬆️ בקשה ערך לדוגמה	תיאור
Sec-CH-UA	"Chromium";v="84", "Google Chrome";v="84"	רשימה של מותגי דפדפנים והגרסה המשמעותית שלהם.
Sec-CH-UA-Mobile	?1	ערך בוליאני שמציין אם הדפדפן נמצא במכשיר נייד (?1 מוגדר ל-true) או לא (?0 עבור false).
Sec-CH-UA-Full-Version	"84.0.4143.2"	[הוצא משימוש]הגרסה המלאה של הדפדפן.
Sec-CH-UA-Full-Version-List	"Chromium";v="84.0.4143.2", "Google Chrome";v="84.0.4143.2"	רשימה של מותגי דפדפנים והגרסה המלאה שלהם.
Sec-CH-UA-Platform	"Android"	הפלטפורמה של המכשיר, בדרך כלל מערכת ההפעלה (OS).
Sec-CH-UA-Platform-Version	"10"	הגרסה של הפלטפורמה או מערכת ההפעלה.
Sec-CH-UA-Arch	"arm"	הארכיטקטורה הבסיסית של המכשיר. אמנם ייתכן שאין זה רלוונטי להצגת הדף, אבל ייתכן שהאתר ירצה להציע הורדה שמוגדרת כברירת מחדל בפורמט הנכון.
Sec-CH-UA-Model	"Pixel 3"	דגם המכשיר.
Sec-CH-UA-Bitness	"64"	הביטים של הארכיטקטורה הבסיסית (כלומר, הגודל בביטים של מספר שלם או כתובת זיכרון)

נקודה חשובה: המשמעות של שיקולי פרטיות ותאימות היא שהערך עשוי להיות ריק, ולא מוחזרות או מאוכלסות בערך שונה. נקרא GREASE.

החלפה לדוגמה

החלפה לדוגמה תיראה כך:

⬆️ בקשה ראשונית מהדפדפן
הדפדפן מבקש את /downloads מהאתר ושולח את ה-User-Agent הבסיסי שמוגדר כברירת מחדל.

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"

☔️ תגובה מהשרת
השרת שולח את הדף בחזרה וגם מבקשת את גרסת הדפדפן המלאה ואת הפלטפורמה.

HTTP/1.1 200 OK
Accept-CH: Sec-CH-UA-Full-Version-List

⬆️ בקשות נוספות
הדפדפן מעניק לשרת גישה אל מידע נוסף ושולחים חזרה את הרמזים הנוספים בקשות.

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

מלבד הכותרות, ניתן לגשת לסוכן המשתמש גם ב-JavaScript דרך navigator.userAgentData ערכי ברירת המחדל של Sec-CH-UA, Sec-CH-UA-Mobile וגם ניתן לגשת לפרטי הכותרת של Sec-CH-UA-Platform דרך brands ו mobile נכסים, בהתאמה:

// 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";

ניתן לגשת לערכים הנוספים דרך הקריאה getHighEntropyValues(). 'אנטרופיה גבוהה' הוא מתייחס לאנטרופיה של מידע, מילים - כמות המידע שערכים אלה חושפים לגבי בדפדפן. בדומה לבקשת הכותרות הנוספות, הכול תלוי בדפדפן אילו ערכים מוחזרים, אם בכלל.

// 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"
}

הדגמה (דמו)

אפשר לנסות את הכותרות ואת JavaScript API במכשיר שלך בכתובת user-agent-client-hints.glitch.me.

הערה: חשוב לוודא שאתם משתמשים ב-Chrome מגרסה 89 ואילך.

רמז לגבי משך חיים ואיפוס

רמזים שצוינו באמצעות הכותרת Accept-CH יישלחו במשך תקופת הזמן של בדפדפן או עד שתצוין קבוצה אחרת של רמזים.

כלומר, אם השרת שולח:

🎶️ תגובה

Accept-CH: Sec-CH-UA-Full-Version-List

לאחר מכן הדפדפן ישלח את הכותרת Sec-CH-UA-Full-Version-List בכל הבקשות עבור האתר הזה עד שהדפדפן ייסגר.

⬆️ בקשות עוקבות

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"

עם זאת, אם מתקבלת כותרת Accept-CH אחרת, היא להחליף את הרמזים הנוכחיים שהדפדפן שולח.

🎶️ תגובה

Accept-CH: Sec-CH-UA-Bitness

⬆️ בקשות עוקבות

Sec-CH-UA-Platform: "64"

הבקשה הקודמת ל-Sec-CH-UA-Full-Version-List לא תישלח.

כדאי לחשוב על הכותרת Accept-CH בתור ציון של הקבוצה המלאה רמזים רצויים לדף הזה, כלומר, הדפדפן שולח לאחר מכן את הרמזים שצוינו. לכל משאבי המשנה בדף. הרמזים ימשיכו להופיע ניווט, האתר לא יסתמך או יניח שהם יימסרו.

הצלחה: כדאי לוודא שעדיין תהיה לך אפשרות לספק חוויה משמעותית גם בלי מידע. המטרה היא לשפר את חוויית המשתמש ולא להגדיר אותה. זאת הסיבה הם נקראים "רמזים" ולא "תשובות" או 'דרישות'.

תוכלו גם להשתמש באפשרות הזו כדי לנקות ביעילות את כל הרמזים שנשלחים על ידי הדפדפן. על ידי שליחת Accept-CH ריק בתשובה. כדאי להוסיף את המקום הזה בכל מקום שהמשתמש מאפס את ההעדפות או יוצא מהאתר.

הדפוס הזה תואם גם לאופן הפעולה של הרמזים באמצעות תג <meta http-equiv="Accept-CH" …>. הרמזים המבוקשים יישלחו רק בקשות שהופעלו על ידי הדף ולא בקשות ניווט נוספות כלשהן.

היקף רמזים ובקשות ממקורות שונים

כברירת מחדל, רמזים ללקוח יישלחו רק בבקשות ממקור זהה. כלומר אם מבקשים רמזים ספציפיים לגבי https://example.com, אבל המשאבים רוצים לבצע אופטימיזציה ב-https://downloads.example.com הם לא לקבל רמזים כלשהם.

כדי לאפשר רמזים בבקשות ממקורות שונים, יש לציין כל רמז ומקור לפי כותרת Permissions-Policy. כדי להחיל את ההגדרה הזו על רמז ללקוח של סוכן משתמש, צריך צריך להקליד את הרמז באותיות קטנות ולהסיר את הקידומת sec-. לדוגמה:

❌️ תשובה של 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");

⬆️ בקשה אל downloads.example.com

Sec-CH-UA-Platform-Version: "10"

⬆️ בקשות אל cdn.provider או img.example.com

DPR: 2

איפה משתמשים ברמזים של סוכן משתמש ללקוח?

התשובה המהירה היא שצריך להגדיר מחדש את כל המופעים שבהם אתם מנתחים בכותרת User-Agent או באמצעות קריאות JavaScript שכוללות לגשת לאותו מידע (למשל: navigator.userAgent, navigator.appVersion, או navigator.platform) כדי להשתמש במקום זאת ברמזים של לקוח-סוכן משתמש.

אם ממשיכים לשלב הזה, צריך לבדוק מחדש את השימוש בסוכן משתמש ומחליפים אותו בשיטות אחרות כשהדבר אפשרי. לעיתים קרובות, אפשר להשיג את אותה מטרה באמצעות שיפור הדרגתי, תכונה או עיצוב רספונסיבי. הבעיה הבסיסית להסתמך על נתוני סוכן המשתמש היא שמירה על מיפוי בין הנכס שאתם בודקים לבין ההתנהגות שלו שמאפשרת להפעיל את התכונה. מדובר בתקורת תחזוקה שנועדה לוודא שהזיהוי מקיפה ועדכנית.

חשוב לזכור את האזהרות האלה, ובמאגר הרמזים של לקוחות בסוכן המשתמש מפורטים כמה תרחישים תקינים לדוגמה באתרים.

מה קורה למחרוזת של סוכן המשתמש?

התוכנית היא לצמצם את היכולת לבצע מעקב סמוי באינטרנט, על ידי צמצום כמות הפרטים המזהים שנחשפים על ידי המחרוזת הקיימת של סוכן המשתמש מבלי לגרום לשיבוש באתרים קיימים. חדש: סוכן משתמש בעזרת רמזים ללקוחות, אתם יכולים עכשיו להבין את המודל החדש ולהתנסות בו לפני שמבצעים שינויים במחרוזות של סוכן המשתמש.

בסופו של דבר, המידע במחרוזת ה-User-Agent יצטמצם כך שהוא ישמור על מדור קודם ועדיין מספקים את אותו דפדפן ברמה גבוהה על הגרסה, בהתאם לרמזים של ברירת המחדל. ב-Chromium, השינוי הזה לפחות עד 2022, כדי לאפשר למערכת האקולוגית עוד זמן להעריך את היכולות החדשות של רמזים על הלקוח (Client Hints) בסוכן המשתמש.

כדי לבדוק גרסה כזו אפשר להפעיל את הדגל about://flags/#reduce-user-agent מ-Chrome 93 (הערה: הדגל הזה היה ששמו about://flags/#freeze-user-agent בגרסאות 84-92 של Chrome). הפעולה הזו תגרור מחזירה מחרוזת עם הערכים ההיסטוריים מסיבות של תאימות, אבל עם ספציפיים בנושא ניקיון. לדוגמה, משהו כמו:

Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.0.0 Mobile Safari/537.36

תמונה ממוזערת של סרגיי זולקין על ביטול הפתיחה