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

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

Thomas Steiner

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

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

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

ถ้าฉันแยกวิเคราะห์ 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 ซึ่งหมายความว่าเราจะลิงก์กับส่วนหัวนี้ไม่ได้ นี่คือปัญหาที่ Text Fragment แก้ไขได้

ส่วนย่อยข้อความ

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

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

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

start

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

#:~:text=start

ตัวอย่างเช่น สมมติว่าฉันต้องการลิงก์ไปยังส่วนหัวโมดูล ECMAScript ใน 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 ระบบจะไฮไลต์ส่วนข้อความไว้และเลื่อนเข้ามาในมุมมอง

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

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

โชคดีที่มีวิธีแก้ไข ในกรณีเช่นนี้ ฉันสามารถระบุ prefix​- และ -suffix ได้ คำที่อยู่ก่อนแบบอักษรของโค้ดสีเขียว "text" คือ "the" และคำหลังคือ "parameter" ไม่มีคำว่า "ข้อความ" อีก 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=[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 ของ Fragment ข้อความด้วยส่วนขยายของเบราว์เซอร์

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

• ลิงก์ไปยังส่วนข้อความสำหรับ Google Chrome
• ลิงก์ไปยังส่วนข้อความสำหรับ Microsoft Edge
• ลิงก์ไปยังส่วนข้อความสำหรับ Mozilla Firefox
• ลิงก์ไปยังส่วนข้อความสำหรับ Apple Safari

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

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

ส่วนย่อยขององค์ประกอบแบบดั้งเดิมนำมาใช้ร่วมกับ Fragment ข้อความได้ การมี 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

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

สามารถทดแทนได้

คุณเติมข้อความให้กับฟีเจอร์ Fragments ได้ในระดับหนึ่ง เรามี polyfill ซึ่งใช้ภายในโดยส่วนขยายสำหรับเบราว์เซอร์ที่ไม่ได้ให้การสนับสนุนในตัวสำหรับ Text Fragment ที่มีการใช้ฟังก์ชันนี้ใน 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);
}

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

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

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

ความปลอดภัย

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

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

การติดตั้งใช้งานข้อกำหนดเกี่ยวกับ Fragments ต้องไม่รั่วไหลว่าพบส่วนย่อยข้อความในหน้าเว็บหรือไม่ แม้ว่า Fragment ขององค์ประกอบจะอยู่ภายใต้การควบคุมของผู้เขียนหน้าต้นฉบับ แต่ทุกคนสามารถสร้าง Fragment ของข้อความได้ จำได้ไหมว่าในตัวอย่างด้านบนไม่มีวิธีลิงก์ไปยังส่วนหัว 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 แล้ว ซึ่งผมสามารถใช้สร้างโปรไฟล์ผู้ใช้ได้ เนื่องจากการใช้ Fragments แบบไร้เดียงสาอาจตัดสินใจว่าการจับคู่ที่ประสบความสำเร็จควรจะต้องมีการเปลี่ยนโฟกัส เปิด evil-ads.example.com ผมจึงสามารถรอฟังเหตุการณ์ blur และจึงทราบได้ว่าการจับคู่เกิดขึ้นเมื่อใด ใน Chrome เราได้ติดตั้งใช้งาน Fragment ข้อความไว้ในลักษณะที่สถานการณ์ข้างต้นจะไม่เกิดขึ้น

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

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

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 ของ Fragments ข้อความที่สร้างขึ้นโดยอัตโนมัติ

บทสรุป

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

ลิงก์ที่เกี่ยวข้อง

• ฉบับร่างของข้อกำหนด
• ตรวจสอบแท็ก
• รายการสถานะ Chrome Platform
• ข้อบกพร่องในการติดตามของ Chrome
• ชุดข้อความความตั้งใจที่จะจัดส่ง
• ชุดข้อความ WebKit-Dev
• เทรดตำแหน่งมาตรฐานของ Mozilla

ข้อความแสดงการยอมรับ

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