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 อาจมีข้อมูลเพียงพอที่จะทำให้ ผู้ใช้ที่ระบุตัวตนได้อย่างแน่ชัด
สตริง User-Agent เปิดใช้ Use Case ที่ถูกต้องหลายกรณี และมีจุดประสงค์ที่สำคัญสำหรับนักพัฒนาซอฟต์แวร์และเจ้าของเว็บไซต์ อย่างไรก็ตาม เป็นสิ่งสำคัญที่ผู้ใช้ จะมีการปกป้องความเป็นส่วนตัวจากวิธีการติดตามโดยไม่เปิดเผย และการส่งข้อมูล UA โดยค่าเริ่มต้น จะไม่เป็นไปตามเป้าหมายนั้น
นอกจากนี้ ยังต้องปรับปรุงความเข้ากันได้กับเว็บในกรณีของ User-Agent สตริง เพราะไม่มีโครงสร้าง การแยกวิเคราะห์จึงทำให้เกิดความซับซ้อนโดยไม่จำเป็น ซึ่งมักเป็นสาเหตุของข้อบกพร่องและปัญหาความเข้ากันได้ของเว็บไซต์ที่สร้างความเสียหายให้แก่ผู้ใช้ ปัญหาเหล่านี้ยังส่งผลเสียต่อผู้ใช้เบราว์เซอร์ที่พบไม่บ่อยนักอย่างไม่ได้สัดส่วน เว็บไซต์อาจทดสอบกับการกำหนดค่าไม่สำเร็จ
ขอแนะนำคำแนะนำไคลเอ็นต์ User Agent ใหม่
คำแนะนำไคลเอ็นต์ของ User Agent ทำให้สามารถเข้าถึงข้อมูลเดียวกัน โดยใช้วิธีที่รักษาความเป็นส่วนตัวมากขึ้น เปิดใช้เบราว์เซอร์เพื่อลดค่าเริ่มต้นของสตริง User Agent นั่นคือการเผยแพร่ทุกอย่าง คำแนะนำไคลเอ็นต์ จะบังคับใช้ โมเดลที่เซิร์ฟเวอร์ต้องขอชุดข้อมูลเกี่ยวกับไคลเอ็นต์จากเบราว์เซอร์ (คำแนะนำ) และเบราว์เซอร์จะใช้นโยบายหรือการกำหนดค่าผู้ใช้ของตนเอง กำหนดข้อมูลที่จะส่งคืน ซึ่งหมายความว่าแทนที่จะแสดงทั้งหมด ข้อมูล User Agent โดยค่าเริ่มต้น ตอนนี้การเข้าถึงจะได้รับการจัดการใน ที่ตรวจสอบได้ นักพัฒนาซอฟต์แวร์ยังได้รับประโยชน์จาก API ที่ง่ายขึ้นด้วย ซึ่งเป็น ด้วยการแสดงออก
ชุดคำแนะนำของไคลเอ็นต์ในปัจจุบันจะอธิบายเกี่ยวกับการแสดงผลของเบราว์เซอร์และ ที่มีความสามารถในการเชื่อมต่อ คุณสามารถดูรายละเอียดได้ใน Automating Resource Selection with Client Hints, แต่นี่เป็นการทบทวนขั้นตอนสั้นๆ
เซิร์ฟเวอร์จะขอคำแนะนำของไคลเอ็นต์ที่เจาะจงผ่านส่วนหัว ดังนี้
⬇️ การตอบกลับจากเซิร์ฟเวอร์
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 สำหรับ 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" |
บิตเนสของสถาปัตยกรรมที่อยู่เบื้องหลัง (ขนาดเป็นบิตของจำนวนเต็มหรือที่อยู่หน่วยความจำ) |
ตัวอย่างการแลกเปลี่ยน
ตัวอย่างการแลกเปลี่ยนจะมีลักษณะดังนี้
⬆️ คำขอเริ่มต้นจากเบราว์เซอร์
เบราว์เซอร์ขอ /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 จะแสดงกรณีการใช้งานที่ถูกต้องสำหรับเว็บไซต์ข้อควรระวังเหล่านี้
จะเกิดอะไรขึ้นกับสตริง User Agent
แผนการคือจะลดความสามารถในการติดตามโดยไม่เปิดเผยบนเว็บโดยลด ปริมาณข้อมูลที่ระบุที่แสดงโดยสตริง User-Agent ที่มีอยู่ ขณะเดียวกันก็ไม่ทำให้เกิดการหยุดชะงักอย่างไม่เหมาะสมในเว็บไซต์ที่มีอยู่ ขอแนะนำ User-Agent ตอนนี้ Client Hints เปิดโอกาสให้คุณได้ทำความเข้าใจและทดลองกับ ก่อนทำการเปลี่ยนแปลงกับสตริง User Agent
ในที่สุด ข้อมูลในสตริง User-Agent จะลดลงเพื่อให้ยังคง รูปแบบเดิมในขณะที่ให้เฉพาะเบราว์เซอร์ระดับสูงเดียวกันและมีนัยสำคัญ ข้อมูลเวอร์ชันสำหรับคำแนะนำเริ่มต้น ใน Chromium การเปลี่ยนแปลงนี้ เลื่อนเวลาไปจนถึงปี 2022 เป็นอย่างน้อย เพื่อให้ระบบนิเวศมีเวลามากขึ้นในการ ประเมินความสามารถของคำแนะนำไคลเอ็นต์ของ User Agent ใหม่
คุณสามารถทดสอบเวอร์ชันนี้ได้โดยเปิดใช้
about://flags/#reduce-user-agent
Flag จาก 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 ในวันที่ หน้าจอแนะนํา