Menautkan dengan cara tebal yang belum pernah ditautkan sebelumnya: Fragmen Teks

Fragmen Teks memungkinkan Anda menentukan cuplikan teks di fragmen URL. Saat menavigasi ke URL dengan fragmen teks seperti itu, browser dapat menekankan dan/atau menarik perhatian pengguna.

Thomas Steiner

ID Fragmen

Chrome 80 adalah rilis besar. Program tersebut berisikan berbagai fitur yang sangat dinantikan seperti Modul ECMAScript di Web Worker, penggabungan nullish, perantaian opsional, dan lainnya. Rilis tersebut, seperti biasa, yang diumumkan melalui postingan blog di Blog Chromium. Anda dapat melihat cuplikan postingan blog di screenshot di bawah.

Anda mungkin bertanya-tanya apa arti semua kotak merah tersebut. Tabel sementara adalah hasil dari menjalankan cuplikan berikut di DevTools. Atribut ini menandai semua elemen yang memiliki atribut id.

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

Saya dapat menempatkan deep link ke elemen apa pun yang ditandai dengan kotak merah berkat ID fragmen yang kemudian saya gunakan dalam hash URL halaman. Dengan asumsi saya ingin membuat deep link ke kotak Beri kami masukan di Forum Produk di samping, saya dapat melakukannya dengan membuat URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1 secara manual. Seperti yang dapat Anda lihat di panel Elemen Developer Tools, elemen yang dimaksud memiliki id dengan nilai HTML1.

Jika saya mengurai URL ini dengan konstruktor URL() JavaScript, komponen yang berbeda akan terungkap. Perhatikan properti hash dengan nilai #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: ""
}
*/

Namun, fakta bahwa saya harus membuka Developer Tools untuk menemukan id elemen menunjukkan kemungkinan bahwa bagian halaman tertentu ini dimaksudkan untuk ditautkan oleh penulis postingan blog.

Bagaimana jika saya ingin menautkan ke sesuatu tanpa id? Misalnya saya ingin menautkan ke Modul ECMAScript di judul Web Workers. Seperti yang dapat Anda lihat pada screenshot di bawah, <h1> yang dimaksud tidak memiliki atribut id, yang berarti saya tidak dapat menautkan ke judul ini. Masalah inilah yang Fragmen teks terselesaikan.

Fragmen Teks

Proposal Fragmen Teks menambahkan dukungan untuk menentukan cuplikan teks dalam hash URL. Saat menavigasi ke URL dengan fragmen teks tersebut, agen pengguna dapat menekankan dan/atau membuatnya menjadi perhatian pengguna.

Kompatibilitas browser

Untuk alasan keamanan, fitur ini mengharuskan link dibuka dalam konteks noopener. Oleh karena itu, pastikan untuk menyertakan rel="noopener" dalam markup anchor <a> atau tambahkan noopener ke daftar Window.open() fitur fungsi jendela.

start

Dalam bentuknya yang paling sederhana, sintaksis Text Fragment adalah sebagai berikut: Simbol hash # diikuti dengan :~:text= dan terakhir start, yang mewakili dienkode dengan persen teks yang ingin saya tautkan.

#:~:text=start

Misalnya, saya ingin menautkan ke judul Modul ECMAScript di Web Worker di postingan blog yang mengumumkan fitur di Chrome 80, URL dalam hal ini adalah:

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

Fragmen teks ditekankan seperti ini. Jika Anda mengklik link di browser pendukung seperti Chrome, fragmen teks akan ditandai dan di-scroll agar terlihat:

start dan end

Sekarang, bagaimana jika saya ingin menautkan ke seluruh bagian berjudul Modul ECMAScript di Web Worker, bukan hanya judulnya? Enkode persentase seluruh teks bagian akan menghasilkan URL yang dihasilkan sangat panjang.

Untungnya ada cara yang lebih baik. Daripada seluruh teks, saya dapat membingkai teks yang diinginkan menggunakan tombol Sintaksis start,end. Oleh karena itu, saya menentukan beberapa kata yang dienkode dengan persen di awal dari teks yang diinginkan, dan beberapa kata yang dienkode dengan persen di akhir teks yang diinginkan, dipisahkan dengan koma ,.

Tampilannya seperti ini:

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

Untuk start, saya memiliki ECMAScript%20Modules%20in%20Web%20Workers, lalu koma , diikuti oleh ES%20Modules%20in%20Web%20Workers. sebagai end. Saat Anda mengklik browser pendukung seperti Chrome, seluruh bagian akan disorot dan di-scroll hingga terlihat:

Sekarang Anda mungkin bertanya-tanya tentang pilihan saya untuk start dan end. Sebenarnya, URL yang sedikit lebih pendek https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules,Web%20Workers. dengan hanya dua kata di setiap sisi juga akan berfungsi. Bandingkan start dan end dengan nilai sebelumnya.

Jika saya mengambil langkah lebih jauh dan sekarang hanya menggunakan satu kata untuk start dan end, Anda dapat melihat bahwa saya dalam masalah. URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript,Workers. sekarang bahkan lebih pendek, namun fragmen teks yang disorot tidak lagi sesuai dengan yang diinginkan. Penandaan berhenti pada kemunculan pertama kata Workers., yang benar, tetapi bukan yang ingin saya tandai. Masalahnya adalah bagian yang diinginkan tidak diidentifikasi secara unik oleh nilai start dan end satu kata saat ini:

prefix- dan -suffix

Menggunakan nilai yang cukup panjang untuk start dan end adalah salah satu solusi untuk mendapatkan link unik. Namun, dalam beberapa situasi, hal ini tidak mungkin. Sebagai catatan tambahan, mengapa saya memilih postingan blog rilis Chrome 80 sebagai contoh? Jawabannya adalah dalam rilis ini, Fragmen Teks diperkenalkan:

Perhatikan bagaimana pada screenshot di atas kata "text" muncul empat kali. Kemunculan keempatnya adalah ditulis dalam {i>font<i} kode hijau. Jika saya ingin menautkan ke kata tertentu ini, saya akan menyetel start ke text. Karena kata "text" hanya terdiri dari satu kata, tidak boleh ada end. Bagaimana sekarang? URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=text cocok pada kemunculan pertama kata "Text" yang sudah ada di judul:

Untungnya, ada solusinya. Dalam kasus seperti ini, saya dapat menentukan prefix​- dan -suffix. Kata sebelum font kode hijau "text" adalah "the", dan kata setelahnya adalah "parameter". Tidak ada tiga kemunculan kata "teks" lainnya yang memiliki kata di sekitarnya yang sama. Dibekali dengan fitur ini saya dapat mengubah URL sebelumnya serta menambahkan prefix- dan -suffix. Seperti lainnya parameter, parameter tersebut juga harus dienkode dengan persen dan dapat berisi lebih dari satu kata. https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=the-,text,-parameter. Agar parser dapat mengidentifikasi prefix- dan -suffix dengan jelas, keduanya harus dipisahkan dari start dan end opsional dengan tanda hubung -.

Sintaksis lengkap

Sintaksis lengkap Fragmen Teks ditampilkan di bawah. (Tanda kurung siku menunjukkan parameter opsional.) Nilai untuk semua parameter harus dienkode persen. Hal ini sangat penting untuk karakter tanda hubung -, ampersand &, dan koma ,, sehingga tidak ditafsirkan sebagai bagian dari sintaksis direktif teks.

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

Setiap prefix-, start, end, dan -suffix hanya akan mencocokkan teks dalam satu elemen tingkat blok, tetapi rentang start,end lengkap dapat mencakup beberapa blok. Misalnya, :~:text=The quick,lazy dog akan gagal cocok dalam contoh berikut, karena string awal "The quick" tidak muncul dalam satu elemen tingkat blok yang tidak terganggu:

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

Namun, itu cocok dengan contoh berikut:

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

Membuat URL Fragmen Teks dengan ekstensi browser

Membuat URL Fragmen Teks secara manual itu melelahkan, terutama dalam hal memastikan bersifat unik. Jika Anda benar-benar ingin melakukannya, spesifikasi ini memiliki beberapa tips dan mencantumkan langkah-langkah yang tepat untuk membuat URL Fragmen Teks. Kami menyediakan ekstensi browser open source yang disebut Link to Text Fragment yang memungkinkan Anda menautkan ke teks apa pun dengan memilihnya, lalu mengklik "Salin Link ke Teks yang Dipilih" di menu konteks. Ekstensi ini tersedia untuk browser berikut:

• Link ke Fragmen Teks untuk Google Chrome
• Menautkan ke Text Fragment untuk Microsoft Edge
• Link ke Fragmen Teks untuk Mozilla Firefox
• Link ke Fragmen Teks untuk Apple Safari

Beberapa fragmen teks dalam satu URL

Perhatikan bahwa beberapa fragmen teks dapat muncul dalam satu URL. Fragmen teks tertentu harus dipisahkan dengan karakter ampersan &. Berikut adalah contoh link dengan tiga fragmen teks: 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

Mencampur elemen dan fragmen teks

Fragmen elemen tradisional dapat digabungkan dengan fragmen teks. Anda dapat menggunakan keduanya di URL yang sama, misalnya, untuk memberikan penggantian yang bermakna jika teks asli di halaman berubah, sehingga fragmen teks tidak lagi cocok. URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1:~:text=Give%20us%20feedback%20in%20our%20Product%20Forums. yang tertaut ke bagian Beri kami masukan di Forum Produk berisi fragmen elemen (HTML1), serta fragmen teks (text=Give%20us%20feedback%20in%20our%20Product%20Forums.):

Perintah fragmen

Ada satu elemen sintaksis yang belum saya jelaskan: perintah fragmen :~:. Untuk menghindari masalah kompatibilitas dengan fragmen elemen URL yang ada seperti yang ditunjukkan di atas, spesifikasi Fragmen Teks memperkenalkan perintah fragmen. Perintah fragmen adalah bagian dari fragmen URL yang dibatasi oleh urutan kode :~:. Atribut ini disediakan untuk petunjuk agen pengguna, seperti text=, dan dihapus dari URL selama pemuatan sehingga skrip penulis tidak dapat berinteraksi secara langsung dengannya. Petunjuk agen pengguna juga disebut perintah. Dalam kasus konkret, text= disebut perintah teks.

Deteksi fitur

Untuk mendeteksi dukungan, uji properti fragmentDirective hanya baca di document. Fragmen adalah mekanisme bagi URL untuk menentukan petunjuk yang diarahkan ke browser, bukan dokumen. Hal ini dimaksudkan untuk menghindari interaksi langsung dengan skrip penulis, sehingga agen pengguna di masa depan petunjuk dapat ditambahkan tanpa takut memasukkan perubahan yang dapat menyebabkan gangguan pada konten yang sudah ada. paket Premium AI contoh yang potensial dari penambahan di masa mendatang dapat berupa petunjuk terjemahan.

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

Deteksi fitur terutama ditujukan untuk kasus ketika link dihasilkan secara dinamis (misalnya dengan mesin telusur) untuk menghindari penyajian link fragmen teks ke browser yang tidak mendukungnya.

Menata gaya fragmen teks

Secara default, browser menata gaya fragmen teks dengan cara yang sama mark (biasanya berwarna hitam berlatar kuning, warna sistem CSS untuk mark). Stylesheet agen pengguna berisi CSS yang terlihat seperti ini:

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

Seperti yang dapat Anda lihat, browser mengekspos pemilih semu ::target-text yang dapat Anda gunakan untuk menyesuaikan sorotan yang diterapkan. Misalnya, Anda dapat mendesain fragmen teks menjadi teks hitam dengan latar belakang merah. Seperti biasa, pastikan untuk memeriksa kontras warna agar gaya penggantian Anda tidak menyebabkan masalah aksesibilitas dan pastikan penyorotan benar-benar terlihat menonjol dibandingkan konten lainnya.

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

Kemampuan Polyfill

Fitur Fragmen Teks dapat di-polyfill hingga batas tertentu. Kami menyediakan polyfill, yang digunakan secara internal oleh ekstensi, untuk browser yang tidak menyediakan dukungan bawaan untuk Fragmen Teks tempat fungsi diterapkan di JavaScript.

Pembuatan link Fragmen Teks Terprogram

Polyfill berisi file fragment-generation-utils.js yang dapat Anda impor dan gunakan untuk membuat link Fragmen Teks. Hal ini dirangkum dalam contoh kode di bawah:

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

Mendapatkan Fragmen Teks untuk tujuan analisis

Banyak situs menggunakan fragmen untuk pemilihan rute, itulah sebabnya browser menghapus Fragmen Teks agar tidak merusak halaman tersebut. Ada kebutuhan yang diakui untuk mengekspos link Fragmen Teks ke halaman, misalnya, untuk tujuan analisis, tetapi solusi yang diusulkan belum diterapkan. Sebagai solusi untuk saat ini, Anda dapat menggunakan kode di bawah untuk mengekstrak informasi yang diinginkan.

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

Keamanan

Perintah fragmen teks hanya dipanggil pada navigasi penuh (bukan halaman yang sama) yang merupakan hasil dari aktivasi pengguna. Selain itu, navigasi yang berasal dari asal yang berbeda dengan tujuan akan mengharuskan navigasi dilakukan dalam konteks noopener, sehingga halaman tujuan diketahui cukup terisolasi. Perintah fragmen teks hanya diterapkan ke {i>frame<i} utama. Artinya, teks tidak akan ditelusuri di dalam iframe dan iframe navigasi tidak akan memanggil fragmen teks.

Privasi

Implementasi spesifikasi Fragmen Teks tidak harus membocorkan apakah teks apakah fragmen ditemukan di halaman atau tidak. Sementara fragmen elemen sepenuhnya berada di bawah kendali penulis halaman asli, fragmen teks dapat dibuat oleh siapa saja. Ingat bagaimana dalam contoh saya di atas tidak ada cara untuk menautkan ke judul ECMAScript Modules in Web Workers, karena <h1> tidak memiliki id, tetapi bagaimana siapa pun, termasuk saya, dapat menautkan ke mana saja dengan membuat fragmen teks dengan cermat?

Bayangkan saya menjalankan jaringan iklan jahat evil-ads.example.com. Selanjutnya, bayangkan bahwa di salah satu iframe iklan, saya membuat iframe lintas origin tersembunyi secara dinamis ke dating.example.com dengan URL Fragment Teks dating.example.com#:~:text=Log%20Out setelah pengguna berinteraksi dengan iklan. Jika teks "Logout" ditemukan, saya tahu korban saat ini login ke dating.example.com, yang dapat saya gunakan untuk pembuatan profil pengguna. Karena Teks yang naif Implementasi Fragment mungkin memutuskan bahwa pencocokan yang berhasil harus menyebabkan pengalihan fokus, di evil-ads.example.com Saya dapat memproses peristiwa blur dan mengetahui saat terjadi kecocokan. Di Chrome, kami telah menerapkan Fragmen Teks sedemikian rupa sehingga skenario di atas tidak dapat terjadi.

Serangan lainnya mungkin mengeksploitasi lalu lintas jaringan berdasarkan posisi scroll. Anggap saya memiliki akses ke log traffic jaringan korban, seperti admin intranet perusahaan. Sekarang bayangkan di sana sudah ada dokumen panjang tentang Apa yang Harus Dilakukan Jika Anda Menderita... dan kemudian daftar kondisi seperti kejenuhan, kecemasan, dll. Saya dapat menempatkan piksel pelacakan di samping setiap item pada daftar. Jika kemudian saya menentukan bahwa pemuatan dokumen secara temporal terjadi bersamaan dengan pemuatan piksel pelacakan di samping, misalnya, item burn out, saya dapat, sebagai admin intranet, menentukan bahwa karyawan telah mengklik link fragmen teks dengan :~:text=burn%20out yang mungkin dianggap karyawan sebagai rahasia dan tidak terlihat oleh siapa pun. Karena contoh ini agak dibuat-buat untuk memulai dan karena eksploitasinya memerlukan prasyarat yang sangat spesifik untuk dipenuhi, tim keamanan Chrome mengevaluasi risiko penerapan scroll pada navigasi agar dapat dikelola. Agen pengguna lain mungkin memutuskan untuk menampilkan elemen UI scroll manual.

Untuk situs yang ingin memilih tidak ikut, Chromium mendukung nilai header Kebijakan Dokumen yang dapat dikirim sehingga agen pengguna tidak akan memproses URL Fragmen Teks.

Document-Policy: force-load-at-top

Menonaktifkan fragmen teks

Cara termudah untuk menonaktifkan fitur ini adalah dengan menggunakan ekstensi yang dapat memasukkan respons HTTP {i>header<i}, misalnya, ModHeader (bukan produk Google), untuk menyisipkan header respons (bukan permintaan) sebagai berikut:

Document-Policy: force-load-at-top

Cara lain yang lebih rumit untuk memilih tidak ikut adalah dengan menggunakan setelan perusahaan ScrollToTextFragmentEnabled. Untuk melakukannya di macOS, tempel perintah di bawah di terminal.

defaults write com.google.Chrome ScrollToTextFragmentEnabled -bool false

Di Windows, ikuti dokumentasi di situs dukungan Bantuan Google Chrome Enterprise.

Fragmen teks di penelusuran web

Untuk beberapa penelusuran, mesin telusur Google memberikan jawaban cepat atau ringkasan dengan cuplikan konten dari situs yang relevan. Cuplikan pilihan ini kemungkinan besar akan muncul saat penelusuran berbentuk pertanyaan. Mengklik cuplikan pilihan akan mengarahkan pengguna langsung ke konten unggulan pada halaman web sumber. Hal ini berfungsi berkat URL Fragmen Teks yang dibuat otomatis.

Kesimpulan

URL Fragmen Teks adalah fitur yang efektif untuk menautkan ke teks arbitrer di halaman web. Komunitas ilmiah dapat menggunakannya untuk memberikan link kutipan atau referensi yang sangat akurat. Mesin telusur dapat menggunakannya untuk melakukan deeplink ke hasil teks di halaman. Situs jejaring sosial dapat menggunakannya untuk memungkinkan pengguna membagikan bagian tertentu dari halaman web, bukan screenshot yang tidak dapat diakses. Saya harap Anda mulai menggunakan URL Fragmen Teks dan merasakan manfaatnya seperti yang saya rasakan. Pastikan untuk menginstal browser Link ke Text Fragment .

Link terkait

• Draf spesifikasi
• Peninjauan TAG
• Entri Status Platform Chrome
• Bug pelacakan Chrome
• Rencana untuk Mengirimkan rangkaian pesan
• Thread WebKit-Dev
• Rangkaian pesan posisi standar Mozilla

Ucapan terima kasih

Text Fragment diimplementasikan dan ditentukan oleh Nick Burris dan David Bokan, dengan kontribusi dari Berikan Wang. Terima kasih kepada Joe Medley atas peninjauan artikel ini secara menyeluruh. Banner besar oleh Greg Rakozy di Buka pembuka.