Google menggunakan teknologi AI untuk menerjemahkan konten ke dalam bahasa pilihan Anda. Terjemahan AI mungkin mengandung kesalahan.

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

Fragmen Teks memungkinkan Anda menentukan cuplikan teks dalam fragmen URL. Saat membuka URL dengan fragmen teks tersebut, browser dapat menekankan dan menarik perhatian pengguna.

Thomas Steiner

ID fragmen

Chrome 80 adalah rilis besar. Versi ini berisi sejumlah fitur yang sangat dinantikan seperti Modul ECMAScript di Web Worker, nullish coalescing, optional chaining, dan lainnya. Seperti biasa, rilis ini diumumkan melalui postingan blog di blog Chromium. Anda dapat melihat cuplikan postingan blog di screenshot berikut.

Postingan blog Chromium dengan kotak merah di sekitar elemen dengan atribut `id`.

Anda mungkin bertanya-tanya apa arti semua kotak merah tersebut. Hasil ini diperoleh dari menjalankan cuplikan berikut di DevTools. Alat 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. Misalnya, saya ingin membuat deep link ke kotak Berikan masukan di Forum Produk kami di bagian 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 di Developer Tools, elemen yang dimaksud memiliki atribut id dengan nilai HTML1.

Jika saya mengurai URL ini dengan konstruktor URL() JavaScript, berbagai komponen akan ditampilkan. 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 tertentu dari halaman ini dimaksudkan untuk ditautkan oleh penulis postingan blog.

Bagaimana jika saya ingin menautkan ke sesuatu tanpa id? Misalnya, saya ingin menautkan ke judul Modul ECMAScript di Web Worker. Seperti yang Anda lihat dalam screenshot berikut, <h1> yang dimaksud tidak memiliki atribut id, yang berarti tidak ada cara untuk menautkan ke judul ini. Masalah inilah yang diselesaikan oleh Fragmen Teks.

Fragmen Teks

Proposal Fragmen Teks menambahkan dukungan untuk menentukan cuplikan teks dalam hash URL. Saat membuka URL dengan fragmen teks tersebut, agen pengguna dapat menekankan dan menarik perhatian pengguna ke fragmen teks tersebut.

Kompatibilitas browser

Browser Support

Source

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 fitur fungsi jendela Window.open().

`start`

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

#:~:text=start

Misalnya, jika saya ingin menautkan ke judul Modul ECMAScript di Web Worker di postingan blog yang mengumumkan fitur di Chrome 80, URL dalam kasus 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 ke tampilan:

Fragmen teks di-scroll ke tampilan dan ditandai.

`start` dan `end`

Sekarang, bagaimana jika saya ingin menautkan ke seluruh bagian berjudul ECMAScript Modules in Web Workers, bukan hanya judulnya? Melakukan encoding persen pada seluruh teks bagian akan membuat URL yang dihasilkan menjadi terlalu panjang.

Untungnya, ada cara yang lebih baik. Daripada seluruh teks, saya dapat membingkai bagian tertentu dari teks dengan sintaksis start,end. Saya menentukan beberapa kata yang dienkode persen di awal fragmen teks, dan beberapa kata yang dienkode persen di akhir fragmen teks, yang dipisahkan dengan koma.

Tampilannya terlihat 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 dengan ES%20Modules%20in%20Web%20Workers. sebagai end. Saat Anda mengklik di browser pendukung seperti Chrome, seluruh bagian akan ditandai dan di-scroll ke tampilan:

Sekarang Anda mungkin bertanya-tanya tentang pilihan start dan end saya. 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 melangkah 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. bahkan lebih pendek sekarang, tetapi fragmen teks yang ditandai bukan lagi yang awalnya dipilih. Penandaan berhenti pada kemunculan pertama kata Workers., yang memang benar, tetapi bukan yang ingin saya tandai. Masalahnya adalah bagian yang dipilih tidak diidentifikasi secara unik oleh nilai start dan end satu kata saat ini:

Fragmen teks yang tidak diinginkan di-scroll ke tampilan dan ditandai.

`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 dapat dilakukan. Sebagai catatan, mengapa saya memilih postingan blog rilis Chrome 80 sebagai contoh? Jawabannya adalah karena dalam rilis ini, Fragmen Teks diperkenalkan:

Teks postingan blog: Fragmen URL Teks. Pengguna atau penulis kini dapat menautkan ke bagian tertentu dari halaman menggunakan fragmen teks yang disediakan dalam URL. Saat halaman dimuat, browser akan menandai teks dan men-scroll fragmen ke tampilan. Misalnya, URL di bawah memuat halaman wiki untuk 'Cat' dan men-scroll ke konten yang tercantum dalam parameter `text`. — Kutipan postingan blog pengumuman Fragmen Teks.

Perhatikan bahwa dalam screenshot di atas, kata "text" muncul empat kali. Kemunculan keempat ditulis dalam font kode hijau. Jika ingin menautkan ke kata tertentu ini, saya akan menetapkan 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:

Pencocokan Fragmen Teks pada kemunculan pertama "Text".

Untungnya, ada solusi. 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 satu pun dari tiga kemunculan kata "text" lainnya yang memiliki kata-kata di sekitarnya yang sama. Berbekal pengetahuan ini, saya dapat mengubah URL sebelumnya dan menambahkan prefix- dan -suffix. Seperti parameter lainnya, parameter ini juga harus dienkode 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 -.

Pencocokan Fragmen Teks pada kemunculan "teks" yang dipilih.

Sintaksis lengkap

Sintaksis lengkap Fragmen Teks adalah sebagai berikut. (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 perintah teks.

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

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

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

Namun, dalam contoh ini, kueri tersebut cocok:

<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 sangat membosankan, terutama saat memastikan URL tersebut unik. Jika Anda benar-benar ingin, 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 ke Fragmen Teks 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:

Beberapa fragmen teks dalam satu URL

Perhatikan bahwa beberapa fragmen teks dapat muncul dalam satu URL. Fragmen teks tertentu harus dipisahkan dengan karakter ampersand &. Berikut 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.

Menggabungkan fragmen elemen dan teks

Fragmen elemen tradisional dapat digabungkan dengan fragmen teks. Tidak masalah jika keduanya ada 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 Berikan masukan di Forum Produk kami berisi fragmen elemen (HTML1), serta fragmen teks (text=Give%20us%20feedback%20in%20our%20Product%20Forums.):

Penautan dengan fragmen elemen dan fragmen teks.

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, spesifikasi Fragmen Teks memperkenalkan perintah fragmen. Perintah fragmen adalah bagian dari fragmen URL yang dibatasi oleh urutan kode :~:. ID ini dicadangkan untuk petunjuk agen pengguna, seperti text=, dan dihapus dari URL selama pemuatan sehingga skrip penulis tidak dapat berinteraksi langsung dengannya. Petunjuk agen pengguna juga disebut perintah. Dalam kasus konkret, text= disebut sebagai perintah teks.

Deteksi fitur

Untuk mendeteksi dukungan, uji properti fragmentDirective hanya baca di document. Perintah fragmen adalah mekanisme bagi URL untuk menentukan petunjuk yang ditujukan ke browser, bukan dokumen. Hal ini dimaksudkan untuk menghindari interaksi langsung dengan skrip penulis, sehingga petunjuk agen pengguna di masa mendatang dapat ditambahkan tanpa khawatir akan menimbulkan perubahan yang dapat menyebabkan gangguan pada konten yang ada. Salah satu contoh potensial dari penambahan di masa mendatang tersebut adalah petunjuk terjemahan.

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

Deteksi fitur terutama ditujukan untuk kasus saat link dibuat secara dinamis (misalnya oleh mesin telusur) untuk menghindari penayangan link fragmen teks ke browser yang tidak mendukungnya.

Menata gaya fragmen teks

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

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

Seperti yang Anda lihat, browser mengekspos pemilih pseudo ::target-text yang dapat Anda gunakan untuk menyesuaikan penandaan 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 penandaan benar-benar menonjol secara visual dari konten lainnya.

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

Polyfill

Fitur Fragmen Teks dapat di-polyfill sampai batas tertentu. Kami menyediakan polyfill, yang digunakan secara internal oleh ekstensi, untuk browser yang tidak menyediakan dukungan bawaan untuk Fragmen Teks yang fungsinya diimplementasikan dalam 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 diuraikan dalam contoh kode:

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 berikut untuk mengekstrak informasi.

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 origin yang berbeda dengan tujuan mengharuskan navigasi dilakukan dalam konteks noopener, sehingga halaman tujuan diketahui cukup terisolasi. Perintah fragmen teks hanya diterapkan ke frame utama. Artinya, teks tidak akan ditelusuri di dalam iframe, dan navigasi iframe tidak akan memanggil fragmen teks.

Privasi

Penting bahwa penerapan spesifikasi Fragmen Teks tidak membocorkan apakah fragmen teks ditemukan di halaman atau tidak. Meskipun fragmen elemen sepenuhnya berada di bawah kontrol penulis halaman asli, fragmen teks dapat dibuat oleh siapa saja. Ingat bagaimana dalam contoh saya, 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 secara hati-hati?

Bayangkan saya menjalankan jaringan iklan jahat evil-ads.example.com. Bayangkan juga bahwa di salah satu iframe iklan, saya secara dinamis membuat iframe lintas origin tersembunyi ke dating.example.com dengan URL Fragmen Teks dating.example.com#:~:text=Log%20Out setelah pengguna berinteraksi dengan iklan. Jika teks "Log Out" ditemukan, saya tahu korban sedang login ke dating.example.com, yang dapat saya gunakan untuk membuat profil pengguna. Karena implementasi Fragmen Teks yang sederhana mungkin memutuskan bahwa kecocokan yang berhasil akan menyebabkan pengalihan fokus, di evil-ads.example.com, saya dapat memproses peristiwa blur dan dengan demikian mengetahui kapan kecocokan terjadi. Di Chrome, kami telah menerapkan Fragmen Teks sedemikian rupa sehingga skenario tersebut tidak dapat terjadi.

Serangan lain mungkin mengeksploitasi traffic jaringan berdasarkan posisi scroll. Asumsikan saya memiliki akses ke log traffic jaringan korban, misalnya sebagai administrator intranet perusahaan. Sekarang bayangkan ada dokumen sumber daya manusia yang panjang berjudul Petunjuk Jika Anda Menderita... dan kemudian daftar kondisi seperti burn out, anxiety, dll. Saya dapat menempatkan piksel pelacakan di samping setiap item dalam daftar. Jika saya kemudian menentukan bahwa pemuatan dokumen terjadi bersamaan dengan pemuatan piksel pelacakan di samping, misalnya, item burn out, saya kemudian dapat, sebagai administrator intranet, menentukan bahwa seorang karyawan telah mengklik link fragmen teks dengan :~:text=burn%20out yang mungkin dianggap rahasia oleh karyawan tersebut dan tidak dapat dilihat oleh siapa pun. Karena contoh ini agak dibuat-buat dan eksploitasinya memerlukan prasyarat yang sangat spesifik, tim keamanan Chrome mengevaluasi risiko penerapan scroll pada navigasi agar dapat dikelola. Agen pengguna lain dapat 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 header respons HTTP, 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 berikut 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 atau ringkasan cepat dengan cuplikan konten dari situs yang relevan. Cuplikan pilihan ini kemungkinan besar akan muncul saat penelusuran berbentuk pertanyaan. Saat mengklik cuplikan pilihan, pengguna akan dibawa langsung ke teks cuplikan pilihan di halaman web sumber. Hal ini berfungsi berkat URL Fragmen Teks yang dibuat secara otomatis.

Halaman hasil penelusuran Google yang menampilkan cuplikan pilihan. Status bar menampilkan URL Fragmen Teks.

Setelah diklik, bagian halaman yang relevan akan di-scroll ke tampilan.

Kesimpulan

URL Fragmen Teks adalah fitur canggih 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. Semoga Anda mulai menggunakan URL Fragmen Teks dan menganggapnya bermanfaat seperti saya. Pastikan untuk menginstal ekstensi browser Link ke Fragmen Teks.

Link terkait

Ucapan terima kasih

Fragmen Teks diimplementasikan dan ditentukan oleh Nick Burris dan David Bokan, dengan kontribusi dari Grant Wang. Terima kasih kepada Joe Medley atas peninjauan menyeluruh terhadap dokumen ini.