ลิงก์อย่างชัดเจนโดยที่ไม่มีใครเคยลิงก์มาก่อน: ส่วนย่อยข้อความ

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

Thomas Steiner

ตัวระบุส่วนย่อย

Chrome 80 เป็นรุ่นที่มีการเปลี่ยนแปลงครั้งใหญ่ ซึ่งมีฟีเจอร์ที่หลายคนตั้งตารอ เช่น โมดูล ECMAScript ใน Web Worker, Nullish Coalescing, Optional Chaining และอื่นๆ โดยปกติแล้ว การเปิดตัวจะประกาศผ่านบล็อกโพสต์ในบล็อก Chromium คุณดูข้อความที่ตัดตอนมาจากบล็อกโพสต์ได้ในภาพหน้าจอต่อไปนี้

บล็อกโพสต์ Chromium ที่มีกล่องสีแดงล้อมรอบองค์ประกอบที่มีแอตทริบิวต์ id

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

document.querySelectorAll('[id]').forEach((el) => {
  el.style.border = 'solid 2px red';
});

ฉันสามารถวาง Deep Link ไปยังองค์ประกอบที่ไฮไลต์ด้วยกล่องสีแดงได้ด้วยตัวระบุส่วนย่อย ซึ่งฉันจะใช้ในแฮชของ URL ของหน้าเว็บ สมมติว่าฉันต้องการทำ Deep Link ไปยังช่องแสดงความคิดเห็นในฟอรัมผลิตภัณฑ์ในส่วนด้านข้าง ฉันสามารถทำได้โดยการสร้าง URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1 ด้วยตนเอง ดังที่คุณเห็นในแผงองค์ประกอบของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ องค์ประกอบที่เป็นปัญหาจะมีแอตทริบิวต์ id ที่มีค่า HTML1

เครื่องมือสำหรับนักพัฒนาเว็บที่แสดง id ขององค์ประกอบ

หากฉันแยกวิเคราะห์ URL นี้ด้วยคอนสตรัคเตอร์ URL() ของ JavaScript ระบบจะแสดงคอมโพเนนต์ต่างๆ สังเกตพร็อพเพอร์ตี้ hash ที่มีค่า #HTML1

new URL('https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1');
/* Creates a new `URL` object
URL {
  hash: "#HTML1"
  host: "blog.chromium.org"
  hostname: "blog.chromium.org"
  href: "https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1"
  origin: "https://blog.chromium.org"
  password: ""
  pathname: "/2019/12/chrome-80-content-indexing-es-modules.html"
  port: ""
  protocol: "https:"
  search: ""
  searchParams: URLSearchParams {}
  username: ""
}
*/

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

ฉันควรทำอย่างไรหากต้องการลิงก์ไปยังบางสิ่งโดยไม่มี id สมมติว่าฉันต้องการลิงก์ไปยังส่วนหัว ECMAScript Modules in Web Workers ดังที่คุณเห็นในภาพหน้าจอต่อไปนี้ <h1> ที่เป็นปัญหาไม่มีแอตทริบิวต์ id ซึ่งหมายความว่าฉันไม่สามารถลิงก์ไปยังส่วนหัวนี้ได้ ซึ่งนี่คือปัญหาที่ Text Fragments แก้ไขได้

เครื่องมือสำหรับนักพัฒนาเว็บแสดงส่วนหัวที่ไม่มี id

Text Fragments

ข้อเสนอส่วนย่อยของข้อความเพิ่มการรองรับการระบุตัวอย่างข้อความในแฮช URL เมื่อไปยัง URL ที่มีส่วนข้อความดังกล่าว User Agent จะเน้นและดึงดูดความสนใจของผู้ใช้ได้

ความเข้ากันได้กับเบราว์เซอร์

Browser Support

  • Chrome: 89.
  • Edge: 89.
  • Firefox: 131.
  • Safari: 18.2.

Source

ด้วยเหตุผลด้านความปลอดภัย ฟีเจอร์นี้กำหนดให้ต้องเปิดลิงก์ในบริบท noopener ดังนั้น โปรดตรวจสอบว่าได้รวม rel="noopener" ไว้ในมาร์กอัป Anchor <a> หรือเพิ่ม noopener ลงในรายการฟีเจอร์ฟังก์ชันการทำงานของหน้าต่าง Window.open()

start

รูปแบบที่ง่ายที่สุดของไวยากรณ์ Text Fragment คือสัญลักษณ์แฮช # ตามด้วย :~:text= และสุดท้ายคือ start ซึ่งแสดงถึงข้อความที่เข้ารหัสเปอร์เซ็นต์ที่ฉันต้องการลิงก์ไป

#:~:text=start

ตัวอย่างเช่น สมมติว่าฉันต้องการลิงก์ไปยังส่วนหัว ECMAScript Modules in Web Workers ในบล็อกโพสต์ที่ประกาศฟีเจอร์ใน Chrome 80 URL ในกรณีนี้จะเป็นดังนี้

https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules%20in%20Web%20Workers

ระบบจะเน้นข้อความที่ตัดตอนมาในลักษณะนี้ หากคุณคลิกลิงก์ในเบราว์เซอร์ที่รองรับ เช่น Chrome ระบบจะไฮไลต์ Fragment ข้อความและเลื่อนไปที่มุมมอง

ข้อความที่แยกส่วนจะเลื่อนเข้ามาในมุมมองและไฮไลต์ไว้

start และ end

แล้วถ้าฉันต้องการลิงก์ไปยังส่วนทั้งหมดที่มีชื่อว่า ECMAScript Modules in Web Workers ไม่ใช่แค่ส่วนหัวล่ะ การเข้ารหัสเปอร์เซ็นต์ข้อความทั้งหมดของส่วนจะทำให้ URL ที่ได้ยาวเกินไปจนใช้งานไม่ได้

โชคดีที่มีวิธีที่ดีกว่า ฉันสามารถตีกรอบส่วนที่เฉพาะเจาะจงของข้อความด้วยไวยากรณ์ start,end แทนที่จะเป็นข้อความทั้งหมด ฉันระบุคำที่เข้ารหัสเปอร์เซ็นต์ 2-3 คำที่จุดเริ่มต้นของส่วนข้อความ และคำที่เข้ารหัสเปอร์เซ็นต์ 2-3 คำที่ส่วนท้ายของส่วนข้อความ โดยคั่นด้วยคอมมา

ซึ่งจะมีลักษณะดังนี้

https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules%20in%20Web%20Workers,ES%20Modules%20in%20Web%20Workers.

สำหรับ start ฉันมี ECMAScript%20Modules%20in%20Web%20Workers ตามด้วยคอมมา และตามด้วย ES%20Modules%20in%20Web%20Workers. เป็น end เมื่อคุณคลิกผ่านในเบราว์เซอร์ที่รองรับ เช่น Chrome ระบบจะไฮไลต์ทั้งส่วนและเลื่อนให้เห็น

ข้อความที่แยกส่วนจะเลื่อนเข้ามาในมุมมองและไฮไลต์

คุณอาจสงสัยว่าทำไมฉันจึงเลือก start และ end จริงๆ แล้ว URL ที่สั้นกว่าเล็กน้อยอย่าง https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules,Web%20Workers. ซึ่งมีเพียง 2 คำในแต่ละด้านก็ใช้ได้เช่นกัน เปรียบเทียบ start และ end กับค่าก่อนหน้า

หากเราก้าวไปอีกขั้นและใช้คำเพียงคำเดียวสำหรับทั้ง start และ end คุณจะเห็นว่าเรากำลังประสบปัญหา URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript,Workers. สั้นลงไปอีก แต่ส่วนข้อความที่ไฮไลต์ไม่ใช่ส่วนที่เลือกไว้แต่แรกแล้ว การไฮไลต์จะหยุดที่คำว่า Workers. คำแรก ซึ่งถูกต้อง แต่ไม่ใช่สิ่งที่ฉันตั้งใจจะไฮไลต์ ปัญหาคือส่วนที่เลือกไม่ได้ระบุไว้อย่างไม่ซ้ำกันด้วยค่า start และ end แบบคำเดียวในปัจจุบัน

ส่วนของข้อความที่ไม่ได้ตั้งใจจะไฮไลต์เลื่อนเข้ามาในมุมมองและไฮไลต์

prefix- และ -suffix

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

ข้อความในบล็อกโพสต์: ส่วนย่อย URL ของข้อความ ตอนนี้ผู้ใช้หรือผู้เขียนสามารถลิงก์ไปยังส่วนที่เฉพาะเจาะจงของหน้าเว็บได้โดยใช้ส่วนข้อความที่ระบุไว้ใน URL เมื่อโหลดหน้าเว็บ เบราว์เซอร์จะไฮไลต์ข้อความและเลื่อนส่วนย่อยนั้นให้ปรากฏในมุมมอง ตัวอย่างเช่น URL ด้านล่างจะโหลดหน้า Wiki สำหรับ &quot;แมว&quot; และเลื่อนไปยังเนื้อหาที่ระบุไว้ในพารามิเตอร์ `text`
ข้อความที่ตัดตอนมาจากบล็อกโพสต์ประกาศเกี่ยวกับส่วนย่อยของข้อความ

โปรดสังเกตว่าในภาพหน้าจอด้านบน คำว่า "text" ปรากฏ 4 ครั้ง รายการที่ 4 เขียนด้วยแบบอักษรโค้ดสีเขียว หากต้องการลิงก์ไปยังคำนี้โดยเฉพาะ ฉันจะตั้งค่า start เป็น text เนื่องจากคำว่า "text" มีเพียงคำเดียว จึงไม่มี end ฉันควรทำอย่างไรต่อไป URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=text ตรงกับคำว่า "Text" ที่ปรากฏครั้งแรกในส่วนหัวแล้ว

Text Fragment ที่ตรงกับ "Text" รายการแรก

แต่โชคดีที่มีวิธีแก้ไข ในกรณีเช่นนี้ ฉันสามารถระบุ prefix- และ -suffix ได้ คำที่อยู่ก่อน "text" ซึ่งเป็นแบบอักษรโค้ดสีเขียวคือ "the" และคำที่อยู่หลังคือ "parameter" คำว่า "text" อีก 3 คำที่เหลือไม่มีคำที่อยู่รอบๆ เหมือนกัน เมื่อทราบข้อมูลนี้แล้ว ฉันสามารถปรับแต่ง URL ก่อนหน้าและเพิ่ม prefix- และ -suffix ได้ พารามิเตอร์เหล่านี้ต้องเข้ารหัสเป็นเปอร์เซ็นต์และมีคำได้มากกว่า 1 คำเช่นเดียวกับพารามิเตอร์อื่นๆ https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=the-,text,-parameter เพื่อให้โปรแกรมแยกวิเคราะห์ระบุ prefix- และ -suffix ได้อย่างชัดเจน คุณต้องแยกข้อมูลดังกล่าวออกจาก start และ end (ไม่บังคับ) ด้วยขีดกลาง -

การจับคู่ส่วนข้อความที่ตรงกับรายการ "text" ที่เลือก

ไวยากรณ์แบบเต็ม

ไวยากรณ์แบบเต็มของส่วนข้อความมีดังนี้ (วงเล็บเหลี่ยมระบุพารามิเตอร์ที่ไม่บังคับ) ค่าของพารามิเตอร์ทั้งหมดต้องเข้ารหัสด้วยเปอร์เซ็นต์ ซึ่งสำคัญอย่างยิ่งสำหรับอักขระขีดกลาง -, เครื่องหมายแอมเพอร์แซนด์ & และคอมมา , เพื่อไม่ให้ระบบตีความว่าเป็นส่วนหนึ่งของไวยากรณ์คำสั่งข้อความ

#:~:text=[prefix-,]start[,end][,-suffix]

prefix-, start, end และ -suffix แต่ละรายการจะจับคู่ได้เฉพาะข้อความภายในองค์ประกอบระดับบล็อกเดียว แต่ช่วง start,end ทั้งหมดสามารถครอบคลุมหลายบล็อกได้ ตัวอย่างเช่น :~:text=The quick,lazy dog ไม่ตรงกันในตัวอย่างต่อไปนี้ เนื่องจากสตริงเริ่มต้น "The quick" ไม่ปรากฏภายในองค์ประกอบระดับบล็อกเดียวที่ไม่มีการขัดจังหวะ

<div>
  The
  <div></div>
  quick brown fox
</div>
<div>jumped over the lazy dog</div>

แต่จะตรงกันในตัวอย่างต่อไปนี้

<div>The quick brown fox</div>
<div>jumped over the lazy dog</div>

การสร้าง URL ของส่วนข้อความด้วยส่วนขยายเบราว์เซอร์

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

Link to Text Fragment browser extension.

ข้อความหลายส่วนใน URL เดียว

โปรดทราบว่าข้อความที่แยกส่วนหลายรายการอาจปรากฏใน URL เดียว ส่วนข้อความที่เฉพาะเจาะจงต้องคั่นด้วยอักขระแอมเพอร์แซนด์ & ตัวอย่างลิงก์ที่มีส่วนข้อความ 3 ส่วนมีดังนี้ https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=Text%20URL%20Fragments&text=text,-parameter&text=:~:text=On%20islands,%20birds%20can%20contribute%20as%20much%20as%2060%25%20of%20a%20cat's%20diet

ข้อความที่แยกส่วน 3 รายการใน URL เดียว

การผสมผสานองค์ประกอบและส่วนย่อยของข้อความ

คุณสามารถรวม Fragment ขององค์ประกอบแบบดั้งเดิมเข้ากับ Fragment ของข้อความได้ คุณสามารถใช้ทั้ง 2 อย่างใน URL เดียวกันได้ เช่น เพื่อให้มีตัวเลือกสำรองที่มีความหมายในกรณีที่ข้อความต้นฉบับในหน้าเว็บมีการเปลี่ยนแปลง เพื่อให้ส่วนข้อความไม่ตรงกันอีกต่อไป URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1:~:text=Give%20us%20feedback%20in%20our%20Product%20Forums. ที่ลิงก์ไปยังส่วนแสดงความคิดเห็นในฟอรัมผลิตภัณฑ์มีทั้งส่วนย่อยขององค์ประกอบ (HTML1) และส่วนย่อยของข้อความ (text=Give%20us%20feedback%20in%20our%20Product%20Forums.) ดังนี้

การลิงก์กับทั้ง Fragment องค์ประกอบและ Fragment ข้อความ

คำสั่ง Fragment

มีองค์ประกอบหนึ่งของไวยากรณ์ที่ฉันยังไม่ได้อธิบาย นั่นคือคำสั่ง Fragment :~: เพื่อหลีกเลี่ยงปัญหาความเข้ากันได้กับส่วนย่อยขององค์ประกอบ URL ที่มีอยู่ตามที่แสดง ข้อกำหนดเฉพาะของส่วนย่อยข้อความจะแนะนำคำสั่งส่วนย่อย คำสั่งส่วนย่อยคือส่วนหนึ่งของส่วนย่อย URL ที่คั่นด้วยลำดับโค้ด :~: โดยสงวนไว้สำหรับคำสั่ง User Agent เช่น text= และจะถูกตัดออกจาก URL ระหว่างการโหลดเพื่อให้สคริปต์ของผู้เขียนไม่สามารถโต้ตอบกับสคริปต์ดังกล่าวได้โดยตรง คำสั่ง User Agent เรียกอีกอย่างว่าคำสั่ง ในกรณีที่เป็นรูปธรรม text= จึงเรียกว่าคำสั่งข้อความ

การตรวจจับฟีเจอร์

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

if ('fragmentDirective' in document) {
  // Text Fragments is supported.
}

การตรวจหาฟีเจอร์มีไว้สำหรับกรณีที่มีการสร้างลิงก์แบบไดนามิก (เช่น โดยเครื่องมือค้นหา) เป็นหลัก เพื่อหลีกเลี่ยงการแสดงลิงก์ส่วนข้อความไปยังเบราว์เซอร์ที่ไม่รองรับ

การจัดรูปแบบส่วนย่อยของข้อความ

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

:root::target-text {
  color: MarkText;
  background: Mark;
}

อย่างที่คุณเห็น เบราว์เซอร์จะแสดงตัวเลือกเทียม ::target-text ที่คุณใช้เพื่อปรับแต่งการไฮไลต์ที่ใช้ได้ เช่น คุณสามารถออกแบบข้อความที่แยกส่วนให้เป็นข้อความสีดำบนพื้นหลังสีแดง และเช่นเคย อย่าลืมตรวจสอบคอนทราสต์ของสีเพื่อให้การจัดรูปแบบการลบล้างไม่ทำให้เกิดปัญหาด้านการช่วยเหลือพิเศษ และตรวจสอบว่าการไฮไลต์โดดเด่นจากเนื้อหาที่เหลือจริงๆ

:root::target-text {
  color: black;
  background-color: red;
}

Polyfill

ฟีเจอร์ Text Fragments สามารถทำ Polyfill ได้ในระดับหนึ่ง เรามี Polyfill ซึ่งส่วนขยายใช้ภายในสำหรับเบราว์เซอร์ที่ไม่ได้ให้การสนับสนุนในตัวสำหรับส่วนย่อยของข้อความที่มีการใช้ฟังก์ชันการทำงานใน JavaScript

การสร้างลิงก์ Text Fragment แบบเป็นโปรแกรม

polyfill มีไฟล์ fragment-generation-utils.js ที่คุณสามารถนำเข้าและใช้เพื่อสร้างลิงก์ส่วนข้อความได้ ซึ่งระบุไว้ในตัวอย่างโค้ดดังนี้

const { generateFragment } = await import('https://unpkg.com/text-fragments-polyfill/dist/fragment-generation-utils.js');
const result = generateFragment(window.getSelection());
if (result.status === 0) {
  let url = `${location.origin}${location.pathname}${location.search}`;
  const fragment = result.fragment;
  const prefix = fragment.prefix ?
    `${encodeURIComponent(fragment.prefix)}-,` :
    '';
  const suffix = fragment.suffix ?
    `,-${encodeURIComponent(fragment.suffix)}` :
    '';
  const start = encodeURIComponent(fragment.textStart);
  const end = fragment.textEnd ?
    `,${encodeURIComponent(fragment.textEnd)}` :
    '';
  url += `#:~:text=${prefix}${start}${end}${suffix}`;
  console.log(url);
}

การรับส่วนข้อความเพื่อวัตถุประสงค์ด้านการวิเคราะห์

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

new URL(performance.getEntries().find(({ type }) => type === 'navigate').name).hash;

ความปลอดภัย

ระบบจะเรียกใช้คำสั่งส่วนข้อความเฉพาะในการนำทางแบบเต็ม (ไม่ใช่หน้าเดียวกัน) ซึ่งเป็นผลมาจากการเปิดใช้งานของผู้ใช้ นอกจากนี้ การนําทางที่มาจากต้นทางที่ต่างจากปลายทางต้องมีการนําทางเกิดขึ้นในบริบท noopener เพื่อให้ทราบว่าหน้าปลายทางมีการแยกอย่างเพียงพอ คำสั่งส่วนย่อยของข้อความจะใช้กับเฟรมหลักเท่านั้น ซึ่งหมายความว่าระบบจะไม่ค้นหาข้อความภายใน iframe และการไปยังส่วนต่างๆ ของ iframe จะไม่เรียกใช้ส่วนข้อความ

ความเป็นส่วนตัว

สิ่งสำคัญคือการใช้ข้อกำหนดของส่วนข้อความต้องไม่เปิดเผยว่าพบส่วนข้อความในหน้าเว็บหรือไม่ แม้ว่าส่วนย่อยขององค์ประกอบจะอยู่ภายใต้การควบคุมของผู้เขียนหน้าเว็บต้นฉบับอย่างสมบูรณ์ แต่ทุกคนก็สามารถสร้างส่วนย่อยของข้อความได้ จำได้ไหมว่าในตัวอย่างของฉันไม่มีวิธีลิงก์ไปยังส่วนหัว ECMAScript Modules in Web Workers เนื่องจาก <h1> ไม่มี id แต่ทุกคนรวมถึงฉันสามารถลิงก์ไปยังที่ใดก็ได้โดยการสร้างส่วนข้อความอย่างระมัดระวัง

สมมติว่าฉันเปิดเครือข่ายโฆษณาที่เป็นอันตราย evil-ads.example.com ลองจินตนาการต่อไปว่าใน iframe โฆษณาอันหนึ่ง ฉันได้สร้าง iframe แบบข้ามต้นทางที่ซ่อนอยู่ไปยัง dating.example.com แบบไดนามิกด้วย URL ส่วนย่อยของข้อความ dating.example.com#:~:text=Log%20Out เมื่อผู้ใช้โต้ตอบกับโฆษณา หากพบข้อความ "ออกจากระบบ" ฉันจะทราบว่าเหยื่อเข้าสู่ระบบ dating.example.com อยู่ ซึ่งฉันสามารถใช้เพื่อสร้างโปรไฟล์ผู้ใช้ได้ เนื่องจากการใช้งาน Text Fragments แบบง่ายๆ อาจตัดสินว่าการจับคู่ที่สำเร็จควรทำให้เกิดการเปลี่ยนโฟกัส ใน evil-ads.example.com ฉันจึงสามารถฟังเหตุการณ์ blur เพื่อให้ทราบเมื่อมีการจับคู่เกิดขึ้น ใน Chrome เราได้ใช้ส่วนย่อยของข้อความในลักษณะที่สถานการณ์ดังกล่าวไม่สามารถเกิดขึ้นได้

การโจมตีอีกรูปแบบหนึ่งอาจเป็นการใช้ประโยชน์จากการจราจรของข้อมูลในเครือข่ายตามตำแหน่งการเลื่อน สมมติว่าฉันมีสิทธิ์เข้าถึงบันทึกการจราจรของข้อมูลในเครือข่ายของเหยื่อ เช่น ในฐานะผู้ดูแลระบบอินทราเน็ตของบริษัท ทีนี้ลองนึกภาพว่ามีเอกสารทรัพยากรบุคคลที่ยาวมากชื่อสิ่งที่ต้องทำหากคุณประสบกับ... แล้วตามด้วยรายการอาการต่างๆ เช่น ภาวะหมดไฟ ความวิตกกังวล เป็นต้น ฉันสามารถวางพิกเซลการติดตามไว้ข้างแต่ละรายการในลิสต์ได้ หากฉันระบุว่าการโหลดเอกสารเกิดขึ้นพร้อมกับการโหลดพิกเซลการติดตามข้างรายการหมดไฟ ฉันในฐานะผู้ดูแลระบบอินทราเน็ตจะระบุได้ว่าพนักงานคลิกลิงก์ส่วนข้อความที่มี :~:text=burn%20out ซึ่งพนักงานอาจคิดว่าเป็นความลับและไม่มีใครเห็น เนื่องจากตัวอย่างนี้ค่อนข้างจะสร้างขึ้นมาตั้งแต่แรก และเนื่องจากการใช้ประโยชน์จากตัวอย่างนี้ต้องเป็นไปตามเงื่อนไขเบื้องต้นที่เฉพาะเจาะจงมาก ทีมความปลอดภัยของ Chrome จึงประเมินความเสี่ยงของการใช้การเลื่อนในการนำทางว่าจัดการได้ User Agent อื่นๆ อาจเลือกแสดงองค์ประกอบ UI การเลื่อนด้วยตนเองแทน

สำหรับเว็บไซต์ที่ต้องการเลือกไม่ใช้ Chromium รองรับค่าส่วนหัวนโยบายเอกสารที่เว็บไซต์สามารถส่งได้ เพื่อให้ User Agent ไม่ประมวลผล URL ของส่วนย่อยของข้อความ

Document-Policy: force-load-at-top

การปิดใช้ส่วนย่อยของข้อความ

วิธีที่ง่ายที่สุดในการปิดใช้ฟีเจอร์นี้คือการใช้ส่วนขยายที่สามารถแทรกส่วนหัวการตอบกลับ HTTP เช่น ModHeader (ไม่ใช่ผลิตภัณฑ์ของ Google) เพื่อแทรกส่วนหัวการตอบกลับ (ไม่ใช่คำขอ) ดังนี้

Document-Policy: force-load-at-top

อีกวิธีหนึ่งที่ซับซ้อนกว่าในการเลือกไม่ใช้คือการใช้การตั้งค่าระดับองค์กร ScrollToTextFragmentEnabled หากต้องการดำเนินการนี้ใน macOS ให้วางคำสั่งต่อไปนี้ในเทอร์มินัล

defaults write com.google.Chrome ScrollToTextFragmentEnabled -bool false

ใน Windows ให้ทำตามเอกสารประกอบในเว็บไซต์การสนับสนุนของความช่วยเหลือของ Google Chrome Enterprise

ส่วนข้อความในการค้นเว็บ

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

หน้าผลการค้นหาของ Google Search ที่แสดงตัวอย่างข้อมูลแนะนำ แถบสถานะจะแสดง URL ของส่วนข้อความ
หลังจากคลิกผ่านแล้ว ระบบจะเลื่อนส่วนที่เกี่ยวข้องของหน้าเข้ามาในมุมมอง

บทสรุป

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

การรับทราบ

Text Fragments ได้รับการติดตั้งใช้งานและระบุโดย Nick Burris และ David Bokan โดยได้รับความช่วยเหลือจาก Grant Wang ขอขอบคุณ Joe Medley ที่ช่วยตรวจสอบเอกสารนี้อย่างละเอียด