การปรับปรุงความเป็นส่วนตัวของผู้ใช้และประสบการณ์ของนักพัฒนาซอฟต์แวร์ด้วยคำแนะนำสำหรับไคลเอ็นต์ User Agent

User-Agent Client Hints คือการขยายตัวใหม่ของ Client Hints API ซึ่งช่วยให้นักพัฒนาสามารถเข้าถึงข้อมูลเกี่ยวกับเบราว์เซอร์ของผู้ใช้ด้วยวิธีการรักษาความเป็นส่วนตัวและหลักสรีรศาสตร์

คำแนะนำสำหรับไคลเอ็นต์จะช่วยให้นักพัฒนาซอฟต์แวร์สามารถขอข้อมูลเกี่ยวกับอุปกรณ์หรือเงื่อนไขของผู้ใช้ได้ แทนที่จะต้องแยกวิเคราะห์ข้อมูลนั้นออกจากสตริง User-Agent (UA) การระบุเส้นทางสำรองนี้เป็นขั้นตอนแรกในการลดรายละเอียดของสตริง User Agent

ดูวิธีอัปเดตฟังก์ชันการทำงานที่มีอยู่ที่อาศัยการแยกวิเคราะห์สตริง User-Agent เพื่อใช้ประโยชน์จากคำแนะนำไคลเอ็นต์ของ User-Agent แทน

ที่มา

เมื่อเว็บเบราว์เซอร์ส่งคำขอ จะมีข้อมูลเกี่ยวกับเบราว์เซอร์และสภาพแวดล้อมรวมอยู่ด้วย เพื่อให้เซิร์ฟเวอร์เปิดใช้ข้อมูลวิเคราะห์และปรับแต่งการตอบสนองได้ ซึ่งกำหนดไว้ตลอดตั้งแต่ปี 1996 (RFC 1945 สำหรับ HTTP/1.0) ซึ่งคุณจะดูคำจำกัดความเดิมสำหรับสตริง User-Agent ได้ ซึ่งมีตัวอย่างดังนี้

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

ส่วนหัวนี้มีไว้เพื่อระบุผลิตภัณฑ์ (เช่น เบราว์เซอร์หรือไลบรารี) และความคิดเห็น (เช่น เวอร์ชัน) ตามลำดับความสำคัญ

สถานะของสตริง User Agent

ในช่วง ทศวรรษ ที่ผ่านเข้ามา สตริงนี้ได้ให้รายละเอียดเพิ่มเติมหลายอย่างเกี่ยวกับไคลเอ็นต์ที่ส่งคำขอ (รวมถึงสิ่งที่เกินมา เนื่องจากความเข้ากันได้แบบย้อนหลัง) เราจะเห็นว่าเมื่อดูที่สตริง User-Agent ปัจจุบันของ Chrome

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 อาจมีข้อมูลเพียงพอที่จะทำให้มีการระบุผู้ใช้แต่ละรายอย่างแน่ชัด หากทดสอบเบราว์เซอร์ของคุณเองที่ AmIUnique คุณจะเห็นว่าสตริง สตริง User-Agent ระบุคุณได้ใกล้เคียงเพียงใด ยิ่ง "อัตราส่วนความคล้ายคลึงกัน" ที่ได้มาต่ำเท่าใด คำขอยิ่งของคุณมีความเฉพาะเจาะจงมากเท่าใด เซิร์ฟเวอร์ก็ยิ่งติดตามคุณได้ง่ายยิ่งขึ้นเท่านั้น

สตริง User-Agent มี Use Case ที่ถูกต้องจํานวนมากและมีจุดประสงค์ที่สำคัญสำหรับนักพัฒนาซอฟต์แวร์และเจ้าของเว็บไซต์ อย่างไรก็ตาม สิ่งสำคัญอีกอย่างคือความเป็นส่วนตัวของผู้ใช้ต้องได้รับการปกป้องจากวิธีการติดตามโดยไม่เปิดเผย และการส่งข้อมูล UA จะไม่เป็นไปตามเป้าหมายนั้นโดยค่าเริ่มต้น

สตริง User-Agent ต้องปรับปรุงความเข้ากันได้ของเว็บ เนื่องจากไม่มีโครงสร้าง การแยกวิเคราะห์จึงทำให้เกิดความซับซ้อนโดยไม่จำเป็น ซึ่งมักเป็นสาเหตุของข้อบกพร่องและปัญหาความเข้ากันได้ของเว็บไซต์ที่ทำร้ายผู้ใช้ นอกจากนี้ ปัญหาเหล่านี้ยังสร้างความเสียหายต่อผู้ใช้เบราว์เซอร์ที่ใช้กันไม่บ่อยนักเนื่องจากเว็บไซต์อาจทดสอบการกำหนดค่าไม่สำเร็จ

ขอแนะนำคำแนะนำเกี่ยวกับไคลเอ็นต์ User Agent ใหม่

คำแนะนำของไคลเอ็นต์ User Agent ช่วยให้เข้าถึงข้อมูลเดียวกันแต่รักษาความเป็นส่วนตัวได้มากขึ้น และทำให้เบราว์เซอร์ลดค่าเริ่มต้นของสตริง User-Agent ในการเผยแพร่ทุกอย่างได้ คำแนะนำเกี่ยวกับไคลเอ็นต์จะบังคับใช้โมเดลที่เซิร์ฟเวอร์ต้องขอชุดข้อมูลเกี่ยวกับไคลเอ็นต์ (คำแนะนำ) จากเบราว์เซอร์ และเบราว์เซอร์จะใช้นโยบายของตนเองหรือการกำหนดค่าผู้ใช้เพื่อระบุข้อมูลที่ส่งคืน ซึ่งหมายความว่าแทนที่จะเปิดเผยข้อมูล User Agent ทั้งหมดโดยค่าเริ่มต้น ระบบจะจัดการการเข้าถึงแบบชัดเจนและตรวจสอบได้ นักพัฒนาซอฟต์แวร์จะได้ประโยชน์จาก API ที่ง่ายขึ้นด้วย ไม่ต้องใช้นิพจน์ทั่วไปอีกต่อไป

ชุดคำแนะนำของลูกค้าในปัจจุบันจะอธิบายถึงความสามารถในการแสดงผลและการเชื่อมต่อของเบราว์เซอร์เป็นหลัก คุณดูรายละเอียดได้ในการเลือกทรัพยากรอัตโนมัติด้วยคำแนะนำของไคลเอ็นต์ แต่มาทบทวนขั้นตอนกันแบบคร่าวๆ กันก่อน

เซิร์ฟเวอร์จะขอคำแนะนำไคลเอ็นต์ที่ระบุผ่านส่วนหัว:

⬇️ การตอบกลับจากเซิร์ฟเวอร์

Accept-CH: Viewport-Width, Width

หรือเมตาแท็ก:

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

จากนั้นเบราว์เซอร์จะเลือกส่งส่วนหัวต่อไปนี้กลับมาในคำขอต่อๆ ไปได้

⬆️ คำขอลำดับต่อมา

Viewport-Width: 460
Width: 230

เซิร์ฟเวอร์จะเลือกการตอบสนองที่ต่างกันได้ เช่น แสดงรูปภาพที่ความละเอียดที่เหมาะสม

คําแนะนําของไคลเอ็นต์ User Agent จะขยายช่วงของพร็อพเพอร์ตี้ด้วยคํานําหน้า Sec-CH-UA ซึ่งสามารถระบุผ่านส่วนหัวการตอบกลับของเซิร์ฟเวอร์ Accept-CH ได้ สำหรับรายละเอียดทั้งหมด ให้เริ่มจากคำอธิบายแล้วเจาะลึกในข้อเสนอฉบับเต็ม

คำแนะนำไคลเอ็นต์ User Agent จาก Chromium 89

ระบบได้เปิดใช้คำแนะนำไคลเอ็นต์ของไคลเอ็นต์ User Agent ใน 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"

ส่วนหัวการตอบกลับและคำขอของ User Agent

⬇️ คำตอบ Accept-CH
⬆️ ส่วนหัวคำขอ
⬆️ ขอ
ตัวอย่างค่า
คำอธิบาย
Sec-CH-UA "Chromium";v="84",
"Google Chrome";v="84"
รายชื่อแบรนด์เบราว์เซอร์และเวอร์ชันที่สำคัญ
Sec-CH-UA-Mobile ?1 บูลีนที่ระบุว่าเบราว์เซอร์อยู่บนอุปกรณ์เคลื่อนที่หรือไม่ (?1 แสดงค่าจริง) หรือไม่ (?0 หากเป็นเท็จ)
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" ค่าบิตของสถาปัตยกรรมเบื้องหลัง (นั่นคือ ขนาดเป็นบิตของจำนวนเต็มหรือที่อยู่หน่วยความจำ)

ตัวอย่าง Exchange

ตัวอย่าง Exchange จะมีลักษณะดังนี้

⬆️ คำขอเริ่มต้นจากเบราว์เซอร์
เบราว์เซอร์ขอหน้า /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"

JavaScript API

นอกจากส่วนหัวแล้ว User-Agent ยังเข้าถึงใน 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

อายุการใช้งานคำแนะนำและการรีเซ็ต

ระบบจะส่งคำแนะนำที่ระบุผ่านส่วนหัว 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 หากต้องการใช้สิ่งนี้กับคำแนะนำไคลเอ็นต์ User Agent คุณต้องตัวพิมพ์เล็กคำแนะนำและนำคำนำหน้า 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

คำตอบสั้นๆ คือคุณควรเปลี่ยนโครงสร้างภายในอินสแตนซ์ที่กำลังแยกวิเคราะห์ส่วนหัว User-Agent หรือใช้การเรียก JavaScript ที่เข้าถึงข้อมูลเดียวกัน (เช่น navigator.userAgent, navigator.appVersion หรือ navigator.platform) เพื่อใช้ประโยชน์จากคำแนะนำของไคลเอ็นต์ User-Agent แทน

เพื่อดำเนินการดังกล่าวเพิ่มเติม คุณควรตรวจสอบการใช้ข้อมูล User-Agent อีกครั้ง และแทนที่ด้วยวิธีอื่นๆ หากเป็นไปได้ คุณมักจะบรรลุเป้าหมายเดียวกันนี้ได้โดยใช้การเพิ่มประสิทธิภาพแบบต่อเนื่อง การตรวจหาฟีเจอร์ หรือการออกแบบที่ตอบสนองตามอุปกรณ์ ปัญหาพื้นฐานที่อาศัยข้อมูล User Agent คือคุณจะต้องมีการแมประหว่างพร็อพเพอร์ตี้ที่กำลังตรวจสอบอยู่เสมอกับลักษณะการทำงานที่เปิดใช้ มีค่าใช้จ่ายในการบำรุงรักษาเพื่อให้มั่นใจว่าการตรวจจับของคุณ ครอบคลุมและเป็นปัจจุบันอยู่เสมอ

โปรดทราบว่าที่เก็บคำแนะนำสำหรับไคลเอ็นต์ User Agent จะแสดง Use Case ที่ถูกต้องสำหรับเว็บไซต์ต่างๆ โดยคำนึงถึงข้อควรระวังเหล่านี้

จะเกิดอะไรขึ้นกับสตริง User Agent

แผนคือการลดความสามารถในการติดตามเว็บโดยไม่เปิดเผยตัวตน โดยการลดจำนวนข้อมูลระบุตัวตนที่สตริง User-Agent ที่มีอยู่เปิดเผย ขณะเดียวกันก็ไม่ก่อให้เกิดการหยุดชะงักอย่างไม่เหมาะสมในเว็บไซต์ที่มีอยู่ ขอแนะนำคำแนะนำไคลเอ็นต์ User Agent ตอนนี้เปิดโอกาสให้คุณทำความเข้าใจและทดสอบความสามารถใหม่ ก่อนที่จะทำการเปลี่ยนแปลงใดๆ กับสตริง User Agent

ในที่สุด ข้อมูลในสตริง User-Agent จะลดลงเพื่อรักษารูปแบบเดิมไว้ ในขณะเดียวกันก็ระบุเฉพาะเบราว์เซอร์ระดับสูงและข้อมูลเวอร์ชันที่สำคัญตามคําแนะนําเริ่มต้นเท่านั้น ใน Chromium การเปลี่ยนแปลงนี้ได้รับการเลื่อนเวลาออกไปไปจนถึงปี 2022 เป็นอย่างน้อย เพื่อให้เวลาระบบนิเวศเพิ่มเติมในการประเมินความสามารถใหม่ของ User Agent สำหรับคำแนะนำของไคลเอ็นต์

คุณทดสอบเวอร์ชันนี้ได้ด้วยการเปิดใช้แฟล็ก about://flags/#reduce-user-agent จาก Chrome 93 (หมายเหตุ: แฟล็กนี้มีชื่อว่า about://flags/#freeze-user-agent ในเวอร์ชัน Chrome 84 - 92) การดำเนินการนี้จะแสดงผลสตริงที่มีรายการในอดีตเพื่อเหตุผลด้านความเข้ากันได้ แต่มีรายละเอียดเฉพาะที่ผ่านการตรวจสอบแล้ว ตัวอย่างเช่น

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

ภาพขนาดย่อโดย Sergey Zolkin ใน Unsplash