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

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

Thomas Steiner

ตัวระบุรายการ

Chrome 80 เป็นรุ่นที่สำคัญ โดยมีฟีเจอร์มากมายที่ทุกคนตั้งตารอ เช่น โมดูล ECMAScript ใน Web Workers, การแยกส่วนแบบไม่มีข้อมูล, การเชื่อมโยงแบบไม่บังคับ และอีกมากมาย เราได้ประกาศการเปิดตัวผ่านบล็อกโพสต์ในบล็อก 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 ใน Web Workers ดังที่คุณเห็นในภาพหน้าจอด้านล่าง <h1> ที่เป็นปัญหาไม่มีแอตทริบิวต์ id ซึ่งหมายความว่าเราไม่สามารถลิงก์กับส่วนหัวนี้ได้ นี่คือปัญหาที่ ข้อความ Fragment แก้ได้

เครื่องมือสําหรับนักพัฒนาซอฟต์แวร์แสดงส่วนหัวที่ไม่มี id

ข้อความที่ตัดตอนมา

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

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

การรองรับเบราว์เซอร์

  • Chrome: 89.
  • Edge: 89
  • Firefox: 131
  • Safari Technology Preview: รองรับ

แหล่งที่มา

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

start

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

#:~:text=start

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

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

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

ระบบเลื่อนส่วนของข้อความเข้ามาในมุมมองและไฮไลต์

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 เป็นตัวอย่าง คำตอบคือในรุ่นนี้มีการเปิดตัวข้อความที่ตัดตอนมา

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

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

ลิงก์ไปยังข้อความส่วนย่อย ส่วนขยายของเบราว์เซอร์

ส่วนย่อยของข้อความหลายส่วนใน 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 เดียว

การผสมองค์ประกอบและข้อความที่ตัดตอน

คุณสามารถรวมส่วนย่อยขององค์ประกอบแบบเดิมกับส่วนย่อยข้อความได้ คุณมีทั้ง 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 เพื่อหลีกเลี่ยงปัญหาด้านความเข้ากันได้กับส่วนย่อยขององค์ประกอบ URL ที่มีอยู่ดังที่แสดงด้านบน คําสั่งเกี่ยวกับ 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 ได้ในระดับหนึ่ง เรามี Polyfill ซึ่งส่วนขยายใช้ภายในสําหรับเบราว์เซอร์ที่ไม่รองรับการฝังฟังก์ชันการทำงานใน JavaScript ของข้อความที่ตัดตอน

การสร้างลิงก์ของข้อความแบบเป็นโปรแกรม

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);
}

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

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

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

ความปลอดภัย

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

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

การใช้ข้อกำหนด Fragments ข้อความต้องไม่ทำให้รั่วไหล ไม่ว่าจะพบส่วนย่อยข้อความในหน้าเว็บหรือไม่ แม้ว่าส่วนย่อยองค์ประกอบจะอยู่ภายใต้การควบคุมของผู้เขียนหน้าเว็บเดิมโดยสมบูรณ์ แต่ทุกคนสามารถสร้างส่วนย่อยข้อความได้ จำได้ไหมว่าในตัวอย่างด้านบน ไม่มีวิธีลิงก์ไปยังส่วนหัวโมดูล ECMAScript ใน 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 ที่แสดงตัวอย่างข้อมูล แถบสถานะจะแสดง URL ของตัวอย่างข้อความ
หลังจากคลิกผ่าน ระบบจะเลื่อนส่วนที่เกี่ยวข้องของหน้าเว็บมาแสดง

บทสรุป

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

กิตติกรรมประกาศ

Nick Burris และ David Bokan เป็นผู้ติดตั้งใช้งานและระบุข้อมูลเกี่ยวกับข้อความที่ตัดตอน โดยมี Grant Wang เป็นผู้มีส่วนร่วม ขอขอบคุณ Joe Medley ที่ช่วยตรวจสอบบทความนี้อย่างละเอียด รูปภาพหลักโดย Greg Rakozy ใน Unsplash