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