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.

Fragment-IDs

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

<ph type="x-smartling-placeholder">

</ph>

Sie fragen sich wahrscheinlich, was die roten Kästchen bedeuten. Sie sind das Ergebnis von folgenden Snippet 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 zu der Funktion Geben Sie uns Feedback in der Produktforen im nebenbei kann 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.

<ph type="x-smartling-placeholder">

</ph>

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.

Wie gehe ich vor, wenn ich auf etwas ohne id verlinken 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. Das ist das Problem, Textfragmente lösen.

<ph type="x-smartling-placeholder">

</ph>

Textfragmente

Der Vorschlag Textfragmente unterstützt jetzt geben Sie ein Text-Snippet im URL-Hash an. 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 der einfachsten Form lautet die Syntax von Textfragmenten so: Das Hash-Symbol # gefolgt von :~:text= und schließlich start für den in Prozent codiert Text, auf den ich verlinken 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ützenden Browser wie Chrome auf den Link klicken, wird das Textfragment hervorgehoben und scrollt in den sichtbaren Bereich:

<ph type="x-smartling-placeholder">

</ph>

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.

Zum Glück gibt es eine bessere Lösung. Anstelle des gesamten Textes kann ich den gewünschten Text mithilfe der start,end-Syntax. Daher gebe ich am Anfang einige prozentcodierte Wörter des gewünschten Textes und einige prozentcodierte Wörter am Ende des gewünschten Textes, getrennt voneinander 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 folgt ein Komma , von ES%20Modules%20in%20Web%20Workers. als end. Wenn Sie auf einen Browser klicken, der diese Funktion unterstützt wie Chrome, ist der gesamte Bereich hervorgehoben und es wird zu den Ansicht gescrollt:

<ph type="x-smartling-placeholder">

</ph>

Jetzt fragst du dich vielleicht, was ich für 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 dem vorherigen Werte.

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 Die Hervorhebung stoppt beim ersten Auftreten des Wortes Workers.. Dies ist richtig, aber nicht das, was ich die Sie hervorheben möchten. Das Problem ist, dass der gewünschte Abschnitt nicht eindeutig durch das aktuelle Werte für start und end aus einem Wort:

<ph type="x-smartling-placeholder">

</ph>

prefix- und -suffix

Die Verwendung von Werten, die lang genug für start und end sind, ist eine Lösung, um einen eindeutigen Link zu erhalten. 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 ist, dass in dieser Version Textfragmente eingeführt:

<ph type="x-smartling-placeholder">

</ph>

Im Screenshot über dem Wort „Text“ erscheint viermal. Das vierte Vorkommen ist in einer grünen Codeschrift. Wenn ich auf dieses Wort verlinken wollte, würde ich start an text. Da das Wort „Text“ nur ein Wort besagt, kann kein end vorkommen. Was kann ich tun? Die URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=text Übereinstimmungen beim ersten Auftreten des Wortes „Text“ bereits in der Überschrift:

<ph type="x-smartling-placeholder">

</ph>

Zum Glück gibt es eine Lösung. In solchen Fällen kann ich einen prefix​- und einen -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 Gerät bestückt kann ich die vorherige URL optimieren und prefix- und -suffix hinzufügen. Genau wie die andere verwenden, müssen auch sie prozentcodiert werden und können mehr als ein Wort enthalten. 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 -.

<ph type="x-smartling-placeholder">

</ph>

Die 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 prozentcodiert werden. 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 stimmen jeweils nur mit Text in einem Element auf Blockebene aber vollständige start,end-Bereiche können 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

Es können mehrere Textfragmente in einer URL 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

<ph type="x-smartling-placeholder">

</ph>

Element- und Textfragmente vermischen

Traditionelle 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.):

<ph type="x-smartling-placeholder">

</ph>

Die Anweisung fragment

Es gibt ein Element der Syntax, das ich noch nicht erklärt habe: die Fragment-Anweisung :~:. 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 aus der URL entfernt. sodass Autorenskripts nicht direkt mit ihr interagieren können. Anweisungen für User-Agenten auch Anweisungen genannt. Im konkreten Fall wird text= daher als Textanweisung bezeichnet.

Funktionserkennung

Testen Sie das schreibgeschützte Attribut fragmentDirective auf document, um Unterstützung zu ermitteln. Das Fragment -Anweisung ist ein Mechanismus für URLs, um Anweisungen anzugeben, die an den Browser und nicht an den Dokument. 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. Eins könnten zum Beispiel Übersetzungshinweise sein.

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 werden Textfragmente in Browsern auf die gleiche Weise formatiert. mark (normalerweise Schwarz auf Gelb, die CSS-Systemfarben für mark). Das User-Agent-Stylesheet enthält CSS-Code, der wie folgt aussieht:

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

Wie Sie sehen, zeigt der Browser einen Pseudo-Selektor an. ::target-text, mit dem Sie angewendete Markierung anpassen. Sie könnten Ihre Textfragmente beispielsweise so gestalten, dass sie schwarz sind. Text auf rotem Hintergrund. 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;
}

Polyfüllbarkeit

Die Funktion „Textfragmente“ kann zu einem gewissen Grad mit Polyfüllung gefüllt 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.

Programmatische Generierung von Textfragment-Links

Polyfill enthält eine Datei fragment-generation-utils.js, die Sie importieren und zum Generieren von Textfragment-Links verwenden können. Dies ist wie im Codebeispiel unten beschrieben:

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, weshalb Browser Textfragmente entfernen. damit diese Seiten nicht unterbrochen werden. Es gibt eine bestätigte Anforderung um Textfragmente-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

Anweisungen zu Textfragmenten werden nur bei vollständigen Navigationen (nicht auf derselben Seite) aufgerufen, die das Ergebnis von a Nutzeraktivierung. Außerdem ist bei Navigationen, die von einem anderen Startort als dem Ziel ausgehen, das die Navigation in einem noopener-Kontext wie dass die Zielseite bekanntermaßen ausreichend isoliert ist. Anweisungen zu Textfragmenten sind 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 hätte ein böses Werbenetzwerk evil-ads.example.com. Stellen Sie sich außerdem vor, iFrames Ich habe dynamisch einen verborgenen ursprungsübergreifenden iFrame unter dating.example.com mit einem Text erstellt Fragment-URL dating.example.com#:~:text=Log%20Out 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 ein naiver Text Die Fragment-Implementierung könnte entscheiden, dass eine erfolgreiche Übereinstimmung zu einem Fokuswechsel führen sollte. evil-ads.example.com Ich könnte auf das blur-Ereignis warten und somit wissen, wann eine Übereinstimmung aufgetreten ist. 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 gleichzeitige Laden des Dokuments zusammen mit dem Laden des neben dem Burn-out-Element befindet, kann ich dann als Intranet-Administrator feststellen, Ein Mitarbeiter hat auf einen Textfragment-Link mit :~:text=burn%20out geklickt, den der Mitarbeiter dass sie vertraulich und für niemanden sichtbar waren. Da dieses Beispiel eher von Anfang an entwickelt wurde und da für deren Ausnutzung sehr spezifische Voraussetzungen erfüllt sein müssen, hat das Chrome-Sicherheitsteam das Risiko der Implementierung von Scrolling bei der Navigation als überschaubar 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

Am einfachsten lässt sich die Funktion mit einer Erweiterung deaktivieren, die eine HTTP-Antwort einschleusen kann. Header, z. B. ModHeader (kein Google-Produkt) verwenden möchten, um einen Antwortheader (keine Anfrage) einzufügen:

Document-Policy: force-load-at-top

Eine weitere, aufwendigere Möglichkeit der Deaktivierung ist die Verwendung der Unternehmenseinstellung ScrollToTextFragmentEnabled Fügen Sie dazu unter macOS den folgenden Befehl in das Terminal ein.

defaults write com.google.Chrome ScrollToTextFragmentEnabled -bool false

Folgen Sie unter Windows der Dokumentation zum Support für Google Chrome Enterprise-Hilfe Website.

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. Diese hervorgehobenen Snippets erscheinen am ehesten, wenn eine Suche in Form einer Frage. Durch Klicken auf ein hervorgehobenes Snippet gelangt der Nutzer direkt zur entsprechenden Snippet-Text auf der Quell-Webseite. Dies funktioniert mithilfe der automatisch erstellten Textfragment-URLs.

<ph type="x-smartling-placeholder">

</ph>

Fazit

„Text Fragments URL“ ist eine leistungsstarke Funktion zum Verlinken auf beliebigen Text auf Webseiten. Der wissenschaftliche kann die Community damit sehr genaue Zitationen 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, Sie beginnen mit Textfragment-URLs und finde sie genauso nützlich wie ich. Achten Sie darauf, Browser für Link zum Textfragment .

Weitere Informationen

• Entwurf der Spezifikationen
• TAG-Überprüfung
• Eintrag zum Chrome-Plattformstatus
• Tracking-Fehler in Chrome
• Intent to Ship-Thread
• WebKit-Dev-Thread
• Mozilla-Standardthreads für Positions-Thread

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 (Unsplash).