Ajouter un lien en gras lorsque personne n'a encore associé de lien: fragments de texte

Les fragments de texte vous permettent de spécifier un extrait de texte dans le fragment d'URL. Lorsque vous accédez à une URL contenant un tel fragment de texte, le navigateur peut mettre l'accent sur et/ou la porter à l'attention de l'utilisateur.

Thomas Steiner

Identifiants de fragment

Chrome 80 a été une version majeure. Il contenait un certain nombre de fonctionnalités très attendues comme Modules ECMAScript dans Web Workers coalescing nulliste, chaînage facultatif, et plus encore. Comme d'habitude, annoncé par le biais d'un article de blog sur le Blog Chromium. La capture d'écran ci-dessous présente un extrait de l'article de blog.

Article de blog Chromium avec des cases rouges autour des éléments comportant un attribut id.

Vous vous demandez probablement ce que signifient toutes les cases rouges. Elles sont le résultat de l'exécution dans les outils de développement. Il met en évidence tous les éléments qui comportent un attribut id.

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

Je peux placer un lien profond vers n'importe quel élément mis en évidence par un cadre rouge grâce au identifiant de fragment que j'utilise ensuite dans le hachage l'URL de votre page. En supposant que je souhaite créer un lien profond vers la page Faites-nous part de vos commentaires dans notre Forums des produits dans le Pour ce faire, vous pouvez créer manuellement l'URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1 Comme vous pouvez le voir dans le panneau "Elements" (Éléments) des outils pour les développeurs, l'élément en question possède un id. avec la valeur HTML1.

Outils de développement affichant l'id d'un élément.

Si j'analyse cette URL avec le constructeur URL() de JavaScript, les différents composants sont révélés. Notez la propriété hash avec la valeur #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: ""
}
*/

Le fait que j'ai dû ouvrir les outils pour les développeurs pour trouver le id d'un élément en dit long sur la probabilité que l'auteur de la section de la page renvoie un lien l'article de blog.

Que se passe-t-il si je souhaite créer un lien vers un élément sans id ? Supposons que je souhaite créer un lien vers les modules ECMAScript dans les nœuds de calcul Web. Comme vous pouvez le voir dans la capture d'écran ci-dessous, le <h1> en question ne Avoir un attribut id, ce qui signifie qu'il est impossible de créer un lien vers ce titre. C’est le problème que Résolution des fragments de texte.

Outils de développement affichant un titre sans id.

Fragments de texte

La proposition Fragments de texte est compatible avec en spécifiant un extrait de texte dans le hachage de l'URL. Lorsque vous accédez à une URL contenant un tel fragment de texte, l'user-agent peut le mettre en valeur et/ou attirer l'attention de l'utilisateur.

Compatibilité du navigateur

Navigateurs pris en charge

  • Chrome: 89
  • Edge: 89
  • Firefox: non compatible.
  • Safari: non compatible.

Source

Pour des raisons de sécurité, cette fonctionnalité nécessite que les liens soient ouverts dans un Contexte noopener Par conséquent, assurez-vous d'inclure rel="noopener" dans votre <a> (balisage d'ancrage ou ajout) noopener à votre Window.open() : liste des fonctionnalités des fenêtres.

start

Dans sa forme la plus simple, la syntaxe des fragments de texte est la suivante: le symbole dièse # suivi de :~:text= et enfin start, qui représente encodé en pourcentage le texte vers lequel je veux créer un lien.

#:~:text=start

Par exemple, supposons que je souhaite créer un lien vers l'en-tête ECMAScript Modules in Web Workers dans la section article de blog annonçant les fonctionnalités de Chrome 80, l'URL dans ce cas serait:

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

Le fragment de texte est mis en avant comme ceci. Si vous cliquez sur le lien dans un navigateur compatible tel que Chrome, le fragment de texte est mis en surbrillance et jusqu'à l'affichage:

Fragment de texte affiché en surbrillance et mis en surbrillance.

start et end

Que se passe-t-il si je souhaite créer un lien vers l'intégralité de la section intitulée Modules ECMAScript dans les scripts Web Worker, et non juste son titre ? Si vous encodez en pourcentage l'intégralité du texte de la section, vous obtenez l'URL obtenue n'est pas si long.

Heureusement, il existe une meilleure solution. Plutôt que l'intégralité du texte, je peux encadrer le texte souhaité en utilisant Syntaxe start,end. Par conséquent, je spécifie quelques mots encodés en pourcentage au début du texte souhaité et quelques mots encodés en pourcentage à la fin du texte souhaité, séparés par une virgule ,.

Cela se présente comme suit:

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

Pour start, j'ai ECMAScript%20Modules%20in%20Web%20Workers, suivi d'une virgule , par ES%20Modules%20in%20Web%20Workers. sous le nom end. Lorsque vous cliquez sur un navigateur compatible comme Chrome, toute la section est mise en surbrillance et fait défiler l'écran jusqu'à l'affichage:

Fragment de texte affiché en surbrillance et mis en surbrillance.

Vous vous interrogez peut-être sur mon choix concernant start et end. En fait, l'URL un peu plus courte https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules,Web%20Workers. avec seulement deux mots de chaque côté aurait également fonctionné. Comparez start et end avec les valeurs précédentes.

Si je vais un peu plus loin et n'utilisez qu'un seul mot pour start et end, vous pouvez que j'ai des ennuis. L'URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript,Workers. est encore plus court, mais le fragment de texte en surbrillance n'est plus celui souhaité à l'origine. La la mise en surbrillance s'arrête à la première occurrence du mot Workers., ce qui est correct, mais ce n'est pas que vous souhaitez mettre en avant. Le problème est que la section souhaitée n'est pas identifiée de manière unique par le Valeurs start et end actuelles à un mot:

Fragment de texte non souhaité affiché à l'écran et mis en surbrillance.

prefix- et -suffix

L'utilisation de valeurs suffisamment longues pour start et end constitue une solution pour obtenir un lien unique. Toutefois, cela n'est pas toujours possible dans certains cas. D'autre part, pourquoi ai-je choisi Exemple d'article de blog sur la version Chrome 80 ? La réponse est que, dans cette version, les fragments de texte sont ont été introduites:

Texte de l&#39;article de blog: Fragments d&#39;URL de texte. Les utilisateurs ou les auteurs peuvent désormais créer un lien vers une partie spécifique d&#39;une page à l&#39;aide d&#39;un fragment de texte fourni dans une URL. Une fois la page chargée, le navigateur met le texte en surbrillance et fait défiler le fragment pour l&#39;afficher. Par exemple, l&#39;URL ci-dessous charge une page wiki pour &quot;Chat&quot;. et fait défiler l&#39;écran jusqu&#39;au contenu répertorié dans le paramètre &quot;text&quot;.
Extrait de blog concernant l'annonce des fragments de texte.

Notez que dans la capture d'écran au-dessus du mot « text », apparaît quatre fois. La quatrième occurrence est dans une police codée en vert. Si je voulais créer un lien vers ce mot particulier, je définirais start à text. Puisque le mot « texte » qu'un seul mot, il ne peut pas y avoir de end. Que se passe-t-il ensuite ? La URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=text correspond à la première occurrence du mot "Texte" déjà dans l'en-tête:

Mise en correspondance des fragments de texte à la première occurrence de "Text".

Heureusement, il existe une solution. Dans ce cas, je peux spécifier un prefix​- et un -suffix. La avant la police de code verte "text" est "the" et le mot après est "parameter". Aucune des les trois autres occurrences du mot "texte" sont entourés des mêmes mots. Avec ceci je peux modifier l'URL précédente et ajouter prefix- et -suffix. Comme les autres les paramètres doivent également être encodés en pourcentage et peuvent contenir plusieurs mots. https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=the-,text,-parameter. Pour permettre à l'analyseur d'identifier clairement les éléments prefix- et -suffix, ils doivent être séparés à partir de l'élément start et de l'élément end facultatif avec un tiret -.

Mise en correspondance de fragments de texte à l'occurrence souhaitée de "text".

La syntaxe complète

La syntaxe complète des fragments de texte est présentée ci-dessous. Les crochets indiquent un paramètre facultatif. Les valeurs de tous les paramètres doivent être encodées en pourcentage. Ceci est particulièrement important pour le tiret -, esperluette & et virgule , : ils ne sont donc pas interprétés comme faisant partie du texte de la directive.

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

Chacun des éléments prefix-, start, end et -suffix ne met en correspondance que le texte d'un seul élément au niveau du bloc, mais les plages start,end complètes peuvent couvrir plusieurs blocs. Par exemple, Dans l'exemple suivant, :~:text=The quick,lazy dog n'aura pas de correspondance, car la paire valeur/clé string "Le rapide" n'apparaît pas dans un seul élément ininterrompu au niveau du bloc:

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

Cependant, il correspond dans cet exemple:

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

Créer des URL de fragment de texte avec une extension de navigateur

Créer manuellement des URL de fragments de texte est fastidieux, surtout pour s'assurer qu'elles sont uniques. Si vous le souhaitez, la spécification contient quelques conseils et indique étapes pour générer des URL de fragment de texte. Nous proposons une extension de navigateur open source appelée Lien vers un fragment de texte : un lien vers un texte en le sélectionnant, puis en cliquant sur « Copier le lien vers le texte sélectionné » en contexte . Cette extension est disponible pour les navigateurs suivants:

Lien vers un fragment de texte .

Plusieurs fragments de texte dans une même URL

Notez que plusieurs fragments de texte peuvent apparaître dans une même URL. Les fragments de texte particuliers doivent être séparés par une esperluette &. Voici un exemple de lien avec trois fragments de texte: 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

Trois fragments de texte dans une URL.

Combiner des fragments d'éléments et de texte

Les fragments d'éléments traditionnels peuvent être associés à des fragments de texte. Il est tout à fait normal d'avoir à la fois dans la même URL, par exemple, pour proposer une solution de remplacement pertinente dans le cas où le texte d'origine sur la page est modifié, de sorte que le fragment de texte ne corresponde plus. L'URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1:~:text=Give%20us%20feedback%20in%20our%20Product%20Forums. en cliquant sur le lien Envoyez-nous vos commentaires dans notre Section Forums des produits contient à la fois un fragment d'élément (HTML1) et un fragment de texte (text=Give%20us%20feedback%20in%20our%20Product%20Forums.):

Association à la fois au fragment d'élément et au fragment de texte.

La directive de fragment

Il existe un élément de la syntaxe que je n'ai pas encore expliqué: la directive de fragment :~:. Pour éviter les problèmes de compatibilité avec les fragments d'URL existants, comme indiqué ci-dessus, La spécification des fragments de texte introduit le fragment directive. La directive de fragment est une partie du fragment d'URL délimitée par la séquence de code. :~: Elle est réservée aux instructions pour les user-agents tels que text= et est supprimée de l'URL. pendant le chargement, de sorte que les scripts d'auteur ne puissent pas interagir directement avec lui. Les instructions pour user-agent sont également appelées directives. Dans le cas concret, text= est donc appelé directive textuelle.

Détection de caractéristiques

Pour détecter la compatibilité, testez la propriété fragmentDirective en lecture seule sur document. Le fragment est un mécanisme permettant aux URL de spécifier des instructions destinées au navigateur plutôt que la méthode document. Il est conçu pour éviter toute interaction directe avec le script de l'auteur, afin que les futurs user-agents des instructions peuvent être ajoutées sans craindre d'apporter des modifications destructives au contenu existant. Un comme les indications de traduction.

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

La détection de caractéristiques est principalement destinée aux cas où des liens sont générés dynamiquement (par exemple, moteurs de recherche) pour éviter de diffuser des fragments de texte dans des navigateurs qui ne les prennent pas en charge.

Appliquer un style aux fragments de texte

Par défaut, les navigateurs appliquent le même style aux fragments de texte mark (généralement noir sur jaune, Les couleurs système du CSS pour mark). La feuille de style user-agent contient du code CSS qui se présente comme suit:

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

Comme vous pouvez le voir, le navigateur expose un pseudo-sélecteur ::target-text que vous pouvez utiliser pour personnaliser la mise en surbrillance appliquée. Par exemple, vous pouvez créer des fragments de texte noirs sur un fond rouge. Comme toujours, assurez-vous de vérifier le contraste des couleurs afin que le style de remplacement n'entraîne pas de problèmes d'accessibilité et que la mise en surbrillance se démarque visuellement du reste du contenu.

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

Polyfillabilité

La fonctionnalité "Fragments de texte" peut être émulée dans une certaine mesure. Nous fournissons polyfill, utilisé en interne par l'extension, pour les navigateurs qui n'utilisent pas prennent en charge les fragments de texte lorsque la fonctionnalité est implémentée en JavaScript.

Génération de liens vers des fragments de texte programmatique

Le polyfill contient un fichier fragment-generation-utils.js, que vous pouvez importer et utiliser pour générer des liens de fragment de texte. C'est décrits dans l'exemple de code ci-dessous:

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

Obtenir des fragments de texte à des fins d'analyse

De nombreux sites utilisent le fragment pour leur routage. C'est pourquoi les navigateurs suppriment les fragments de texte. afin de ne pas créer de panne sur ces pages. Il existe un besoin confirmé pour présenter les liens des fragments de texte vers des pages, par exemple à des fins d'analyse, mais la solution proposée n'est pas encore mise en œuvre. Pour le moment, vous pouvez utiliser le code ci-dessous pour extraire les informations souhaitées.

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

Sécurité

Les directives de fragment de texte ne sont appelées que lors de navigations complètes (non sur une même page) résultant d'une a activation utilisateur. De plus, les navigations en provenance d'un point de départ différent de la destination nécessitent le la navigation doit avoir lieu Contexte noopener, tel que que la page de destination est suffisamment isolée. Les directives de fragment de texte ne sont appliquée au cadre principal. Cela signifie qu'aucun texte ne sera recherché dans les cadres iFrame, la navigation n'appelle pas de fragment de texte.

Confidentialité

Il est important que les implémentations de la spécification des fragments de texte ne divulguent aucune information a été détecté ou non sur une page. Alors que les fragments d'éléments sont entièrement contrôlés par le service auteur de la page d'origine, les fragments de texte peuvent être créés par n'importe qui. Vous vous souvenez que dans mon exemple ci-dessus il n'était pas possible de créer un lien vers l'en-tête ECMAScript Modules in Web Workers, car <h1> n'avait n'ont pas de id, mais comment n'importe qui, y compris moi, pourrait simplement créer un lien vers n'importe où en créant le fragment de texte ?

Imaginez que je dirige un réseau publicitaire malveillant evil-ads.example.com. Imaginez davantage que, dans l'une de vos annonces, iFrames J'ai créé dynamiquement un iFrame multi-origine caché vers dating.example.com avec un élément Text URL du fragment dating.example.com#:~:text=Log%20Out une fois que l'utilisateur interagit avec l'annonce. Si le texte « Se déconnecter » je sais que la victime est actuellement connecté à dating.example.com, que je pourrais utiliser pour le profilage des utilisateurs. Puisqu'un texte naïf L'implémentation des fragments peut décider qu'une correspondance réussie doit provoquer un changement de sélection, sur evil-ads.example.com : je pourrais écouter l'événement blur et savoir ainsi quand une correspondance s'est produite. Dans Dans Chrome, nous avons implémenté les fragments de texte de telle sorte que le scénario ci-dessus ne puisse pas se produire.

Une autre attaque pourrait consister à exploiter le trafic réseau en fonction de la position de défilement. Supposons que j'ai eu accès à les journaux du trafic réseau de ma victime, comme l’administrateur de l’intranet d’une entreprise. Imaginons maintenant il existait un long document sur les ressources humaines intitulé Que faire si vous souffriez de..., suivi d'une liste comme un burn-out ou de l'anxiété, par exemple. Vous pouvez placer un pixel de suivi à côté de chaque élément liste. Si nous déterminons que le chargement du document coïncide temporairement avec le chargement de la le pixel de suivi à côté de l'élément burn-out, par exemple. En tant qu'administrateur de l'intranet, un employé a cliqué sur un lien fragment de texte contenant :~:text=burn%20out. avez pu supposer qu’elle était confidentielle et n’est visible par personne. Cet exemple étant quelque peu inventée dès le départ, et comme son exploitation nécessite de remplir des conditions préalables très spécifiques, l'équipe de sécurité Chrome a évalué le risque d'implémenter le défilement lors de la navigation comme étant gérable. D'autres user-agents peuvent décider d'afficher un élément d'interface utilisateur de défilement manuel à la place.

Pour les sites qui le souhaitent, Chromium accepte un Document Policy valeur d'en-tête qu'ils peuvent envoyer afin que les user-agents ne traitent pas les URL des fragments de texte.

Document-Policy: force-load-at-top

Désactiver des fragments de texte

Le moyen le plus simple de désactiver cette fonctionnalité consiste à utiliser une extension capable d'injecter une réponse HTTP des en-têtes, par exemple, ModHeader (pas un produit Google), pour insérer un en-tête de réponse (pas de requête) comme suit:

Document-Policy: force-load-at-top

Une autre méthode, plus complexe, consiste à utiliser le paramètre d'entreprise ScrollToTextFragmentEnabled Pour effectuer cette opération sous macOS, collez la commande ci-dessous dans le terminal.

defaults write com.google.Chrome ScrollToTextFragmentEnabled -bool false

Sous Windows, consultez la documentation Assistance Google Chrome Enterprise sur votre site.

Fragments de texte dans la recherche sur le Web

Pour certaines recherches, le moteur de recherche Google fournit une réponse rapide ou un résumé avec un contenu extrait d'un site Web pertinent. Ces extraits optimisés sont plus susceptibles de s'afficher lorsqu'une recherche prend la forme d'une question. En cliquant sur un extrait optimisé, l'utilisateur y accède directement sur la page Web source. Cela fonctionne grâce aux URL de fragments de texte créées automatiquement.

Page de résultats du moteur de recherche Google affichant un extrait optimisé. La barre d'état affiche l'URL des fragments de texte.
Une fois que vous avez cliqué dessus, la section appropriée de la page s'affiche à l'écran.

Conclusion

L'URL des fragments de texte est une fonctionnalité puissante qui permet de créer des liens vers du texte arbitraire sur des pages Web. L'érudit communauté peut l'utiliser pour fournir des liens de citation ou de référence très précis. Les moteurs de recherche peuvent utiliser pour créer des liens profonds vers des résultats textuels sur les pages. Les sites de réseaux sociaux peuvent l'utiliser pour permettre aux utilisateurs de partager passages spécifiques d'une page Web plutôt que des captures d'écran inaccessibles. J’espère que vous commencerez Utiliser des URL à fragments de texte et je les trouve aussi utiles que moi. Assurez-vous d'installer le Lien vers le navigateur de fragment de texte .

Remerciements

Les fragments de texte ont été implémentés et spécifiés par Nick Burris et David Bokan, avec la contribution de Grant Wang. Merci à Joe Medley d'avoir lisez attentivement cet article. Image héros de Greg Rakozy sur Unsplash.