ส่วนย่อยข้อความช่วยให้คุณระบุตัวอย่างข้อความในส่วน URL ได้ เมื่อไปยัง URL ที่มีส่วนย่อยของข้อความดังกล่าว เบราว์เซอร์สามารถเน้นและ/หรือดึงความสนใจของผู้ใช้ได้
ตัวระบุส่วนย่อย
Chrome 80 เป็นรุ่นใหญ่ โดยมีฟีเจอร์มากมายที่มีความคาดหวังสูง เช่น โมดูล ECMAScript ใน Web Workers, การรวมข้อมูลแบบ Nullish, ห่วงโซ่ที่ไม่บังคับ และอีกมากมาย การเปิดตัวครั้งนี้มีการประกาศผ่านบล็อกโพสต์ในบล็อก Chromium ตามปกติ คุณสามารถดูข้อความที่ตัดตอนมาจากบล็อกโพสต์ได้ในภาพหน้าจอด้านล่าง
![](https://web.dev/static/articles/text-fragments/image/egsW6tkKWYI8IHE6JyMZ.png?authuser=5&hl=th)
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
![](https://web.dev/static/articles/text-fragments/image/whVXhhrYwA55S3i4J3l5.png?authuser=5&hl=th)
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
ซึ่งหมายความว่าเราจะลิงก์กับส่วนหัวนี้ไม่ได้ นี่คือปัญหาที่
Text Fragment แก้ไขได้
![](https://web.dev/static/articles/text-fragments/image/1g4rTS1q5LKHEHnDoF9o.png?authuser=5&hl=th)
id
ส่วนย่อยข้อความ
ข้อเสนอส่วนย่อยข้อความจะเพิ่มการรองรับการระบุตัวอย่างข้อความในแฮช URL เมื่อไปยัง URL ที่มีส่วนย่อยข้อความดังกล่าว User Agent จะเน้นและ/หรือดึงความสนใจของผู้ใช้ได้
ความเข้ากันได้กับเบราว์เซอร์
ด้วยเหตุผลด้านความปลอดภัย ฟีเจอร์นี้กำหนดให้ต้องเปิดลิงก์ในบริบทของ noopener
ดังนั้น อย่าลืมใส่ rel="noopener"
ในมาร์กอัป Anchor ของ <a>
หรือเพิ่ม noopener
ลงในรายการฟีเจอร์ฟังก์ชันการทำงานของหน้าต่าง Window.open()
start
รูปแบบที่ง่ายที่สุด ไวยากรณ์ของส่วนย่อยข้อความเป็นดังนี้ สัญลักษณ์แฮช #
ตามด้วย :~:text=
และสุดท้าย start
ซึ่งเป็นข้อความที่เข้ารหัสด้วยเปอร์เซ็นต์ที่ฉันต้องการลิงก์
#:~:text=start
ตัวอย่างเช่น สมมติว่าฉันต้องการลิงก์ไปยังส่วนหัวโมดูล ECMAScript ใน Web Workers ในบล็อกโพสต์ประกาศฟีเจอร์ต่างๆ ใน Chrome 80 โดย URL ในกรณีนี้จะเป็นดังนี้
ส่วนย่อยของข้อความถูกเน้นเช่นนี้ หากคุณคลิกลิงก์ในเบราว์เซอร์ที่รองรับ เช่น Chrome ระบบจะไฮไลต์ส่วนข้อความไว้และเลื่อนเข้ามาในมุมมอง
![](https://web.dev/static/articles/text-fragments/image/D3jwPrJlvN3FmJo3pADt.png?authuser=5&hl=th)
start
และend
ฉันต้องทำอย่างไรหากต้องการลิงก์กับส่วนทั้งหมดที่ชื่อว่า ECMAScript Modules in Web Workers ไม่ใช่แค่ส่วนหัวของส่วนนี้ การเข้ารหัสข้อความของทั้งส่วนด้วยเปอร์เซ็นต์จะทำให้ URL ที่ได้นั้นยาวในทางปฏิบัติไม่ได้
โชคดีที่มีวิธีที่ดีกว่า ฉันจัดเฟรมข้อความที่ต้องการได้โดยใช้ไวยากรณ์ start,end
แทนที่จะใช้ข้อความทั้งหมด ดังนั้น ฉันจึงระบุคำที่เข้ารหัสแบบเปอร์เซ็นต์ 2-3 คำไว้ที่ช่วงต้นของข้อความที่ต้องการ และคำที่เข้ารหัสแบบเปอร์เซ็นต์ที่ท้ายข้อความที่ต้องการ 2-3 คำโดยคั่นด้วยเครื่องหมายจุลภาค ,
ซึ่งมีลักษณะดังนี้
สำหรับ start
ฉันมี ECMAScript%20Modules%20in%20Web%20Workers
แล้วตามด้วยคอมมา ,
ตามด้วย ES%20Modules%20in%20Web%20Workers.
เป็น end
เมื่อคุณคลิกผ่านเบราว์เซอร์ที่รองรับ
เช่น Chrome ระบบจะไฮไลต์ส่วนทั้งส่วนและเลื่อนเข้ามาในมุมมอง
![](https://web.dev/static/articles/text-fragments/image/2yTYmKnjHTnqXkcmHF1F.png?authuser=5&hl=th)
ตอนนี้คุณอาจสงสัยเกี่ยวกับตัวเลือก 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
ที่เป็นคำเดียวในปัจจุบัน
![](https://web.dev/static/articles/text-fragments/image/GGbbtHBpsoFyubnISyZw.png?authuser=5&hl=th)
prefix-
และ-suffix
การใช้ค่าเป็นเวลานานพอสำหรับ start
และ end
เป็นโซลูชันหนึ่งที่จะทำให้ได้รับลิงก์ที่ไม่ซ้ำกัน
แต่ในบางกรณีก็ไม่สามารถทำเช่นนั้นได้ ทำไมฉันจึงเลือกบล็อกโพสต์เปิดตัว Chrome 80
เป็นตัวอย่าง คำตอบก็คือในรุ่นนี้ เราได้แนะนำ Fragments ข้อความ:
![ข้อความบล็อกโพสต์: ส่วนย่อย URL ข้อความ ตอนนี้ผู้ใช้หรือผู้เขียนจะลิงก์ไปยังส่วนใดส่วนหนึ่งของหน้าเว็บได้โดยใช้ส่วนย่อยข้อความที่ให้ไว้ใน URL เมื่อโหลดหน้าเว็บแล้ว เบราว์เซอร์จะไฮไลต์ข้อความและเลื่อนส่วนย่อยเข้ามาในมุมมอง เช่น URL ด้านล่างโหลดหน้าวิกิสำหรับคำว่า "Cat" แล้วเลื่อนไปยังเนื้อหาที่แสดงในพารามิเตอร์ "text"](https://web.dev/static/articles/text-fragments/image/blog-post-text-text-url-67d2c112b0147.png?authuser=5&hl=th)
โปรดสังเกตว่าในภาพหน้าจอเหนือคำว่า "ข้อความ" ปรากฏ 4 ครั้ง รายการครั้งที่ 4 จะเขียน
ด้วยแบบอักษรรหัสสีเขียว หากฉันต้องการลิงก์ไปที่คำนี้ ฉันจะตั้งค่า start
เป็น text
เนื่องจากคำว่า "text" คือคำเดียวเท่านั้น จึงไม่สามารถมี end
ได้ ขั้นตอนต่อไป URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=text
ตรงกับรายการแรกของคำว่า "Text" ที่อยู่ในส่วนหัวอยู่แล้ว
![](https://web.dev/static/articles/text-fragments/image/nXxCskUwdCxwxejPSSZW.png?authuser=5&hl=th)
โชคดีที่มีวิธีแก้ไข ในกรณีเช่นนี้ ฉันสามารถระบุ 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
ที่ไม่บังคับด้วยเครื่องหมายขีดกลาง -
![](https://web.dev/static/articles/text-fragments/image/J3L5BVSMmzGY6xdkabP6.png?authuser=5&hl=th)
ไวยากรณ์แบบเต็ม
ไวยากรณ์แบบเต็มของส่วนย่อยข้อความจะแสดงอยู่ด้านล่าง (วงเล็บเหลี่ยมหมายถึงพารามิเตอร์ที่ไม่บังคับ)
ค่าสำหรับพารามิเตอร์ทั้งหมดต้องเข้ารหัสเปอร์เซ็นต์ ข้อมูลนี้สำคัญอย่างยิ่งสำหรับอักขระขีด -
, เครื่องหมายและ &
และคอมมา ,
ดังนั้นระบบจึงไม่ตีความอักขระเหล่านั้นว่าเป็นส่วนหนึ่งของไวยากรณ์คำสั่งแบบข้อความ
#:~: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
![](https://web.dev/static/articles/text-fragments/image/ASLtFCPoHvyTKrAtKAv4.png?authuser=5&hl=th)
มีข้อความหลายส่วนใน 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
![](https://web.dev/static/articles/text-fragments/image/ffsq7aoSoVd9q6r5cquY.png?authuser=5&hl=th)
การรวมองค์ประกอบและข้อความบางส่วน
ส่วนย่อยขององค์ประกอบแบบดั้งเดิมนำมาใช้ร่วมกับ 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.
)
![](https://web.dev/static/articles/text-fragments/image/JRKCM6Ihrq8sgRZRiymr.png?authuser=5&hl=th)
คำสั่ง 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 ข้อความที่สร้างขึ้นโดยอัตโนมัติ
![](https://web.dev/static/articles/text-fragments/image/KbZgnGxZOOymLxYPZyGH.png?authuser=5&hl=th)
![](https://web.dev/static/articles/text-fragments/image/4Q7zk9xBnb2uw8GRaLnU.png?authuser=5&hl=th)
บทสรุป
URL ของส่วนย่อยข้อความเป็นฟีเจอร์ที่มีประสิทธิภาพในการลิงก์ไปยังข้อความที่กำหนดเองบนหน้าเว็บ ชุมชนนักวิชาการสามารถใช้ฟอรัมนี้เพื่อให้ลิงก์อ้างอิงหรืออ้างอิงที่มีความแม่นยำสูง เครื่องมือค้นหาสามารถใช้ ลิงก์ในรายละเอียดกับผลการค้นหาข้อความในหน้าเว็บ เว็บไซต์โซเชียลเน็ตเวิร์กสามารถใช้แพลตฟอร์มนี้เพื่อให้ผู้ใช้แชร์ ข้อความเฉพาะของหน้าเว็บแทนภาพหน้าจอที่เข้าถึงได้ เราหวังว่าคุณจะเริ่ม ใช้ URL ของ Fragment ข้อความ และพบว่ามีประโยชน์เช่นเดียวกับฉัน อย่าลืมติดตั้งส่วนขยายเบราว์เซอร์ ลิงก์ไปยังส่วนข้อความ
ลิงก์ที่เกี่ยวข้อง
- ฉบับร่างของข้อกำหนด
- ตรวจสอบแท็ก
- รายการสถานะ Chrome Platform
- ข้อบกพร่องในการติดตามของ Chrome
- ชุดข้อความความตั้งใจที่จะจัดส่ง
- ชุดข้อความ WebKit-Dev
- เทรดตำแหน่งมาตรฐานของ Mozilla
ข้อความแสดงการยอมรับ
Text Fragment ได้รับการนำมาใช้และระบุโดย Nick Burris และ David Bokan ด้วยการมีส่วนร่วมจาก Grant Wang ขอขอบคุณ Joe Medley สำหรับการตรวจสอบบทความนี้อย่างละเอียด รูปภาพหลักโดย Greg Rakozy ใน Unsplash