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

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

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

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

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

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

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

  • Chrome: 89.
  • ขอบ: 89
  • Firefox: ไม่สนับสนุน
  • Safari: ไม่รองรับ

แหล่งที่มา

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

start

ในรูปแบบที่ง่ายที่สุด ไวยากรณ์ของส่วนย่อยข้อความมีดังนี้: สัญลักษณ์แฮช # แล้วตามด้วย :~: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 ส่วนข้อความจะถูกไฮไลต์ เลื่อนเข้ามาในมุมมอง

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

start และ end

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

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

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

วันที่
การจับคู่ส่วนย่อยข้อความในการเกิด "ข้อความ" ครั้งแรก

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

<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 เดียว

โปรดทราบว่าส่วนย่อยข้อความหลายรายการอาจปรากฏใน 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

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

การตรวจหาฟีเจอร์

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

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

ความปลอดภัย

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

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

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

สมมติว่าฉันใช้งานเครือข่ายโฆษณาที่ชั่วร้าย evil-ads.example.com ลองคิดต่อว่าในโฆษณาของฉัน iframes ฉันสร้าง iframe แบบข้ามต้นทางแบบไดนามิกไปยัง dating.example.com ด้วยข้อความ URL ของ Fragment วันที่ dating.example.com#:~:text=Log%20Out เมื่อผู้ใช้โต้ตอบกับโฆษณา หากข้อความ "ออกจากระบบ" พบแล้ว ผมทราบว่าเหยื่อกำลัง เข้าสู่ระบบ dating.example.com ซึ่งฉันสามารถใช้สำหรับทำโปรไฟล์ผู้ใช้ได้ ตั้งแต่ข้อความไร้เดียงสา การใช้ Fragment อาจช่วยให้การจับคู่ที่ประสบความสำเร็จควรสร้างสวิตช์โฟกัส 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 ส่วนย่อยข้อความเป็นฟีเจอร์ที่มีประสิทธิภาพในการลิงก์ไปยังข้อความที่กำหนดเองบนหน้าเว็บ นักวิชาการ สามารถใช้ URL นี้ในการให้การอ้างอิงที่ถูกต้องแม่นยำสูงหรือลิงก์อ้างอิงได้ เครื่องมือค้นหาสามารถใช้ เป็น Deep Link ไปยังผลการค้นหาข้อความในหน้าเว็บ เว็บไซต์โซเชียลเน็ตเวิร์กสามารถใช้เพื่อให้ผู้ใช้แชร์ ข้อความของหน้าเว็บบางอย่าง แทนที่จะเป็นภาพหน้าจอที่ไม่สามารถเข้าถึงได้ ฉันหวังว่าคุณจะเริ่ม การใช้ URL ส่วนย่อยข้อความ ว่ามีประโยชน์เหมือนผมเลย อย่าลืมติดตั้ง เบราว์เซอร์ลิงก์ไปยังส่วนย่อยข้อความ ส่วนขยาย

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

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