Verlinken, wo noch niemand etwas verknüpft hat: Textfragmente

Mit Textfragmenten können Sie ein Text-Snippet im URL-Fragment angeben. Beim Aufrufen einer URL mit einem solchen Textfragment kann der Browser und/oder die Nutzenden darauf aufmerksam machen.

Thomas Steiner

Fragment-IDs

Chrome 80 war eine große Veröffentlichung. Sie enthielt eine Reihe von mit Spannung erwarteten Funktionen wie ECMAScript-Module in Web Workers, Null Coalescing und optionale verkettung. Die Veröffentlichung erfolgte wie gewohnt angekündigt durch ein Blogpost in der Chromium-Blog Im Screenshot unten sehen Sie einen Auszug aus dem Blogpost.

Sie fragen sich wahrscheinlich, was all die roten Kästchen bedeuten. Sie sind das Ergebnis der Ausführung des folgenden Snippets in den Entwicklertools. Alle Elemente, die ein id-Attribut haben, werden hervorgehoben.

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

Ich kann einen Deeplink zu jedem Element platzieren, das mit einem roten Kästchen markiert ist. Fragmentbezeichner die ich dann im Hash des . Angenommen, ich möchte einen Deeplink zum Feld Feedback in unseren Produktforen in der Seitenleiste erstellen. Dazu könnte ich die URL manuell erstellen: https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1. Wie Sie im Elementbereich der Entwicklertools sehen können, hat das betreffende Element ein id mit dem Wert HTML1.

Wenn ich diese URL mit dem URL()-Konstruktor von JavaScript parse, sind die verschiedenen Komponenten sichtbar. Beachten Sie das Attribut hash mit dem Wert #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: ""
}
*/

Die Tatsache, dass ich die Entwicklertools öffnen musste, um die id eines Elements zu finden, spricht Bände über die Wahrscheinlichkeit, mit der dieser bestimmte Bereich der Seite vom Autor Blogpost zu lesen.

Was ist, wenn ich einen Link zu etwas ohne id erstellen möchte? Angenommen, ich möchte auf die ECMAScript-Module unter "Web Workers". Wie Sie im folgenden Screenshot sehen können, muss die betreffende <h1> nicht haben ein id-Attribut, was bedeutet, dass ich nicht auf diese Überschrift verlinken kann. Dieses Problem wird durch Textfragmente gelöst.

Textfragmente

Mit dem Vorschlag Text Fragments wird die Angabe eines Text-Snippets im URL-Hash unterstützt. Wenn Sie zu einer URL mit einem solchen Textfragment navigieren, kann der User-Agent betonen und/oder die Aufmerksamkeit der Nutzenden darauf lenken.

Browserkompatibilität

Aus Sicherheitsgründen müssen Links in einem noopener-Kontext. Achten Sie daher darauf, rel="noopener" in Ihrem Anker-Markup für <a> oder Hinzufügen noopener zu Ihrem Window.open() Liste der Fensterfunktionsfunktionen.

start

In ihrer einfachsten Form sieht die Syntax von Textfragmenten so aus: Das Rautensymbol # gefolgt von :~:text= und abschließend start, was den prozentcodierten Text darstellt, auf den ich eine Verknüpfung herstellen möchte.

#:~:text=start

Angenommen, ich möchte auf die Überschrift ECMAScript-Module in Web Workers in der Blogpost zu Funktionen in Chrome 80, lautet die URL in diesem Fall:

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

Das Textfragment wird so hervorgehoben. Wenn Sie in einem unterstützten Browser wie Chrome auf den Link klicken, wird das Textfragment hervorgehoben und in den Blick gescrollt:

start und end

Was ist, wenn ich einen Link zum gesamten Abschnitt mit dem Titel ECMAScript-Module in Web Workers erstellen möchte, nur die Überschrift? Die Prozentcodierung des gesamten Textes des Abschnitts würde zu der resultierenden URL führen. unpraktischerweise lang.

Glücklicherweise gibt es eine bessere Lösung. Anstelle des gesamten Textes kann ich den gewünschten Text mithilfe der start,end-Syntax. Daher gebe ich einige Prozentcodierte Wörter am Anfang des gewünschten Textes und einige Prozentcodierte Wörter am Ende des gewünschten Textes an, getrennt durch ein Komma ,.

Das sieht so aus:

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

Für start habe ich ECMAScript%20Modules%20in%20Web%20Workers, dann ein Komma , gefolgt von ES%20Modules%20in%20Web%20Workers. als end. Wenn du in einem unterstützten Browser wie Chrome klickst, wird der gesamte Bereich hervorgehoben und in den Blick gescrollt:

Sie fragen sich jetzt vielleicht, warum ich start und end ausgewählt habe. Die etwas kürzere URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules,Web%20Workers. mit nur zwei Wörtern auf jeder Seite funktioniert hätte. Vergleichen Sie start und end mit den vorherigen Werten.

Wenn ich noch einen Schritt weiter gehe und jetzt nur ein Wort für start und end verwende, können Sie dass ich in Schwierigkeiten bin. URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript,Workers. ist jetzt sogar noch kürzer, aber das markierte Textfragment ist nicht mehr das ursprünglich gewünschte. Die Hervorhebung endet beim ersten Vorkommen des Wortes Workers.. Das ist richtig, aber nicht das, was ich hervorheben wollte. Das Problem besteht darin, dass der gewünschte Abschnitt nicht eindeutig durch das aktuelle Werte für start und end aus einem Wort:

prefix- und -suffix

Eine Möglichkeit, einen eindeutigen Link zu erhalten, besteht darin, für start und end ausreichend lange Werte zu verwenden. In einigen Situationen ist dies jedoch nicht möglich. Weshalb habe ich mich für die Blogpost zur Chrome 80-Version als Beispiel verwenden? Die Antwort lautet: In dieser Version wurden Textfragmente eingeführt:

Im Screenshot oben ist das Wort „Text“ viermal zu sehen. Das vierte Vorkommen ist in einer grünen Codeschrift geschrieben. Wenn ich auf dieses Wort verlinken wollte, würde ich start an text. Da das Wort „Text“ nur ein Wort ist, kann es keine end geben. Was kann ich tun? Die URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=text stimmt mit dem ersten Vorkommen des Wortes „Text“ überein, das bereits in der Überschrift enthalten ist:

Zum Glück gibt es eine Lösung. In solchen Fällen kann ich eine prefix​- und eine -suffix angeben. Die Wort vor dem grünen Code "Text" ist „der“ und das Wort danach „Parameter“. Keine der genannten weitere drei Vorkommnisse des Wortes „text“ dieselben umliegenden Wörter enthält. Mit diesem Wissen kann ich die vorherige URL anpassen und prefix- und -suffix hinzufügen. Wie die anderen Parameter müssen auch diese mit Prozentzeichen codiert sein und können aus mehreren Wörtern bestehen. https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=the-,text,-parameter. Damit der Parser prefix- und -suffix eindeutig identifizieren kann, müssen sie voneinander getrennt werden aus dem start und dem optionalen end mit einem Bindestrich -.

Vollständige Syntax

Die vollständige Syntax von Textfragmenten finden Sie unten. (Quadratische Klammern kennzeichnen einen optionalen Parameter.) Die Werte für alle Parameter müssen als Prozentzeichen codiert sein. Das ist besonders wichtig für -, kaufmännisches Und & und Komma ,, damit diese nicht als Teil des Textes interpretiert werden Syntax der Anweisung.

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

prefix-, start, end und -suffix werden nur mit Text innerhalb eines einzelnen Elements auf Blockebene abgeglichen. Vollständige start,end-Bereiche können jedoch mehrere Blöcke umfassen. Beispiel: :~:text=The quick,lazy dog wird im folgenden Beispiel nicht übereinstimmen, String „The Quick“ nicht in einem einzelnen, ununterbrochenen Element auf Blockebene erscheint:

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

In diesem Beispiel stimmt sie jedoch überein:

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

Textfragment-URLs mit einer Browsererweiterung erstellen

Das manuelle Erstellen von Textfragment-URLs ist mühsam, insbesondere wenn es darum geht sicherzustellen, eindeutig. Die Spezifikation enthält einige Tipps und die genauen Schritte zum Generieren von Textfragment-URLs. Wir stellen eine Open-Source-Browsererweiterung namens Link zum Text-Fragment, mit dem Sie auf einen beliebigen Text verlinken, indem Sie ihn auswählen und dann auf "Link in ausgewählten Text kopieren" klicken. im Kontext . Diese Erweiterung ist für die folgenden Browser verfügbar:

• Link zum Textfragment für Google Chrome
• Link zum Textfragment für Microsoft Edge
• Link zum Textfragment für Mozilla Firefox
• Link zum Textfragment für Apple Safari

Mehrere Textfragmente in einer URL

In einer URL können mehrere Textfragmente vorkommen. Die jeweiligen Textfragmente müssen Durch das kaufmännische Und-Zeichen (&) getrennt. Hier ist ein Beispiel für einen Link mit drei Textfragmenten: 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

Element- und Textfragmente vermischen

Elementfragmente können mit Textfragmenten kombiniert werden. Es ist völlig in Ordnung, beides in derselben URL verwenden, um beispielsweise eine sinnvolle Alternative zur Verfügung zu stellen, falls der Originaltext auf der Seite sodass das Textfragment nicht mehr übereinstimmt. URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1:~:text=Give%20us%20feedback%20in%20our%20Product%20Forums. auf den Link Feedback geben in der Produktforen enthält sowohl ein Elementfragment (HTML1) als auch ein Textfragment (text=Give%20us%20feedback%20in%20our%20Product%20Forums.):

Die Fragmentanweisung

Es gibt ein Element der Syntax, das ich noch nicht erklärt habe: die Fragmentanweisung :~:. Um dies zu vermeiden Kompatibilitätsprobleme mit bestehenden URL-Elementfragmenten, wie oben gezeigt, Das Fragment wird mithilfe der Spezifikation für Textfragmente eingeführt. . Die Anweisung fragment ist ein Teil des URL-Fragments, das durch die Codesequenz getrennt ist. :~: Sie ist für User-Agent-Anweisungen wie text= reserviert und wird beim Laden aus der URL entfernt, damit Autorscripts nicht direkt damit interagieren können. Anweisungen für User-Agenten auch Anweisungen genannt. Im konkreten Fall wird text= daher als Textanweisung bezeichnet.

Funktionserkennung

Um die Unterstützung zu prüfen, testen Sie die schreibgeschützte Property fragmentDirective auf document. Die Fragmentdirektive ist ein Mechanismus für URLs, mit dem Anweisungen an den Browser und nicht an das Dokument angegeben werden. Es soll direkte Interaktionen mit dem Autorenskript vermeiden, damit künftige User-Agents Anweisungen können hinzugefügt werden, ohne dass Sie befürchten müssen, funktionsgefährdende Änderungen an bestehenden Inhalten vorzunehmen. Ein mögliches Beispiel für solche zukünftigen Ergänzungen sind Übersetzungshinweise.

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

Die Funktionserkennung ist hauptsächlich für Fälle vorgesehen, in denen Links dynamisch generiert werden (z. B. durch Suchmaschinen), um zu vermeiden, dass Textfragmente an Browser gesendet werden, die diese nicht unterstützen.

Stile für Textfragmente festlegen

Standardmäßig formatieren Browser Textfragmente auf die gleiche Weise wie mark (in der Regel schwarz auf gelb, die Systemfarben für mark). Das User-Agent-Stylesheet enthält CSS, das so aussieht:

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

Wie Sie sehen, zeigt der Browser eine Pseudoauswahl ::target-text an, mit der Sie die angewendete Hervorhebung anpassen können. Sie könnten Ihre Textfragmente beispielsweise als schwarzen Text auf rotem Hintergrund gestalten. Denken Sie wie immer daran, Farbkontrast prüfen sodass der überschriebene Stil keine Probleme mit der Barrierefreiheit verursacht. Achten Sie darauf, dass die Hervorhebung sich optisch vom Rest des Inhalts abheben.

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

Polyfill-Fähigkeit

Die Funktion „Textfragmente“ kann bis zu einem gewissen Grad mithilfe von Polyfills implementiert werden. Wir bieten eine Polyfill, das intern von die Erweiterung für Browser, bieten integrierte Unterstützung für Textfragmente, bei denen die Funktionalität in JavaScript implementiert ist.

Generierung von programmatischen Textfragment-Links

Polyfill enthält eine Datei fragment-generation-utils.js, die Sie importieren und zum Generieren von Textfragment-Links verwenden können. Das wird im folgenden Codebeispiel veranschaulicht:

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

Textfragmente für Analysezwecke erhalten

Viele Websites verwenden das Fragment für das Routing. Aus diesem Grund entfernen Browser Textfragmente, damit diese Seiten nicht beschädigt werden. Es gibt eine bestätigte Anforderung um Text-Fragment-Links zu Seiten bereitzustellen, z. B. zu Analysezwecken, aber die vorgeschlagene Lösung ist noch nicht implementiert. Als Behelfslösung können Sie vorerst den folgenden Code verwenden, um um die gewünschten Informationen anzuzeigen.

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

Sicherheit

Textfragment-Direktiven werden nur bei vollständigen Navigationen (nicht auf derselben Seite) aufgerufen, die auf eine Nutzeraktion zurückzuführen sind. Außerdem muss die Navigation von einem anderen Ursprung als dem Ziel in einem noopener-Kontext erfolgen, sodass die Zielseite hinreichend isoliert ist. Direktiven für Textfragmente werden nur auf den Hauptframe angewendet. Das bedeutet, dass in iFrames nicht nach Text gesucht wird. ruft kein Textfragment auf.

Datenschutz

Es ist wichtig, dass bei Implementierungen der Text Fragments-Spezifikation keine Datenlecks auftreten, Fragment auf einer Seite gefunden wurde oder nicht. Elementfragmente können hingegen vollständig Autor der Originalseite, Textfragmente können von jedem erstellt werden. Erinnern Sie sich, wie in meinem Beispiel oben Es gab keine Möglichkeit, auf die Überschrift ECMAScript-Module in Web Workers zu verlinken, da das <h1> dies die keine id haben, sondern dass alle, auch ich, Links zu beliebigen Orten erstellen können, das Textfragment?

Angenommen, ich betreibe ein bösartiges Werbenetzwerk evil-ads.example.com. Angenommen, in einem meiner Anzeigen-iframes habe ich dynamisch einen versteckten, plattformübergreifenden iframe zu dating.example.com mit einer Textfragment-URLdating.example.com#:~:text=Log%20Out erstellt, sobald der Nutzer mit der Anzeige interagiert. Wenn der Text „Abmelden“ angezeigt wird gefunden wurde, weiß ich, dass das Opfer dating.example.com angemeldet, womit ich zum Erstellen von Nutzerprofilen arbeiten kann. Da eine naive Implementierung von Textfragmenten möglicherweise festlegt, dass eine erfolgreiche Übereinstimmung einen Fokuswechsel auslösen soll, könnte ich auf evil-ads.example.com auf das Ereignis blur warten und so erkennen, wann eine Übereinstimmung stattgefunden hat. In Chrome, wir haben Textfragmente so implementiert, dass das obige Szenario nicht eintreten kann.

Ein weiterer Angriff könnte darin bestehen, den Netzwerkverkehr basierend auf der Scroll-Position auszunutzen. Angenommen, ich hatte Zugriff auf Netzwerk-Traffic-Protokolle meines Opfers, z. B. als Administrator eines Unternehmens-Intranets. Stellen Sie sich nun vor, langes Personaldokument Was tun Sie im Falle von Problemen und eine Liste wie Burn-out oder Angst. könnte ich ein Tracking-Pixel neben jedem Element auf dem Liste. Wenn ich dann feststelle, dass das Laden des Dokuments zeitlich mit dem Laden des Tracking-Pixels neben dem Element Burn-out zusammenfällt, kann ich als Intranet-Administrator feststellen, dass ein Mitarbeiter auf einen Link zu einem Textfragment mit :~:text=burn%20out geklickt hat, das er möglicherweise für vertraulich und für niemanden sichtbar gehalten hat. Da dieses Beispiel von vornherein etwas konstruiert ist und für die Ausnutzung sehr spezifische Voraussetzungen erfüllt sein müssen, hat das Chrome-Sicherheitsteam das Risiko der Implementierung von „Scrollen bei Navigation“ als beherrschbar eingestuft. Andere User-Agents können sich dafür entscheiden, stattdessen ein manuelles Scroll-UI-Element anzuzeigen.

Für Websites, die diese Funktion deaktivieren möchten, unterstützt Chromium Dokumentrichtlinie -Headerwert, den sie senden können, damit User-Agents keine Textfragment-URLs verarbeiten können.

Document-Policy: force-load-at-top

Textfragmente deaktivieren

Die Funktion lässt sich am einfachsten mit einer Erweiterung deaktivieren, die HTTP-Antwortheader einschleusen kann, z. B. ModHeader (kein Google-Produkt). So fügen Sie einen Antwort- (nicht Anfrage-)Header ein:

Document-Policy: force-load-at-top

Eine weitere, etwas aufwändigere Möglichkeit, die Funktion zu deaktivieren, ist die Verwendung der Enterprise-Einstellung ScrollToTextFragmentEnabled. Fügen Sie dazu unter macOS den folgenden Befehl in das Terminal ein.

defaults write com.google.Chrome ScrollToTextFragmentEnabled -bool false

Unter Windows folgen Sie der Dokumentation auf der Supportwebsite der Google Chrome Enterprise-Hilfe.

Textfragmente in der Websuche

Bei einigen Suchanfragen bietet die Suchmaschine von Google eine schnelle Antwort oder Zusammenfassung mit einem Inhalt Snippet von einer relevanten Website. Solche Hervorgehobene Snippets erscheinen insbesondere bei Suchanfragen, die als Frage formuliert sind. Durch Klicken auf ein hervorgehobenes Snippet gelangt der Nutzer direkt zum Text des hervorgehobenen Snippets auf der Quellwebseite. Dies funktioniert mithilfe der automatisch erstellten Textfragment-URLs.

</ph>

Fazit

Die URL für Textfragmente ist eine leistungsstarke Funktion, mit der Sie auf beliebigen Text auf Webseiten verlinken können. Die wissenschaftliche Gemeinschaft kann damit sehr genaue Quellenangaben oder Referenzlinks bereitstellen. Suchmaschinen können mit Deeplink zu Textergebnissen auf Seiten. In sozialen Netzwerken können Nutzer Inhalte teilen, bestimmte Abschnitte einer Webseite anstelle von Screenshots, die nicht zugänglich sind. Ich hoffe, dass Sie Textfragment-URLs verwenden und sie genauso nützlich finden wie ich. Installieren Sie dazu die Browsererweiterung Link zum Textfragment.

Weitere Informationen

• Entwurf der Spezifikationen
• TAG-Überprüfung
• Eintrag zum Chrome-Plattformstatus
• Tracking-Fehler in Chrome
• Thread „Intent to Ship“
• WebKit-Dev-Thread
• Thread zur Positionierung von Mozilla-Standards

Danksagungen

„Text Fragments“ wurde von Nick Burris implementiert und spezifiziert. David Bokan, mit Beiträgen von Förderung von Wang. Vielen Dank an Joe Medley für gründliche Durchsicht dieses Artikels an. Hero-Image von Greg Rakozy auf Unsplash.