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