{"id":82602,"date":"2022-09-01T07:51:21","date_gmt":"2022-09-01T05:51:21","guid":{"rendered":"https:\/\/rmarketingdigital.com\/development\/boldly-link-where-no-one-has-linked-before-text-fragments\/"},"modified":"2021-07-06T10:12:33","modified_gmt":"2021-07-06T08:12:33","slug":"boldly-link-where-no-one-has-linked-before-text-fragments","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/fr\/dev\/boldly-link-where-no-one-has-linked-before-text-fragments\/","title":{"rendered":"Lien audacieux l\u00e0 o\u00f9 personne n&#039;a li\u00e9 auparavant: Fragments de texte"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contenidos<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/boldly-link-where-no-one-has-linked-before-text-fragments\/#Fragment-Identifiers\" >Fragment Identifiers<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/boldly-link-where-no-one-has-linked-before-text-fragments\/#Text-Fragments\" >Text Fragments<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/boldly-link-where-no-one-has-linked-before-text-fragments\/#Browser-compatibility\" >Browser compatibility<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/boldly-link-where-no-one-has-linked-before-text-fragments\/#textStart\" >textStart<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/boldly-link-where-no-one-has-linked-before-text-fragments\/#textStart-and-textEnd\" >textStart and textEnd<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/boldly-link-where-no-one-has-linked-before-text-fragments\/#prefix-and-suffix\" >prefix- and -suffix<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/boldly-link-where-no-one-has-linked-before-text-fragments\/#The-full-syntax\" >The full syntax<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/boldly-link-where-no-one-has-linked-before-text-fragments\/#Creating-Text-Fragment-URLs-with-a-browser-extension\" >Creating Text Fragment URLs with a browser extension<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/boldly-link-where-no-one-has-linked-before-text-fragments\/#Multiple-text-fragments-in-one-URL\" >Multiple text fragments in one URL<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/boldly-link-where-no-one-has-linked-before-text-fragments\/#Mixing-element-and-text-fragments\" >Mixing element and text fragments<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/boldly-link-where-no-one-has-linked-before-text-fragments\/#The-fragment-directive\" >The fragment directive<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/boldly-link-where-no-one-has-linked-before-text-fragments\/#Feature-detection\" >Feature detection<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/boldly-link-where-no-one-has-linked-before-text-fragments\/#Polyfillability\" >Polyfillability<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/boldly-link-where-no-one-has-linked-before-text-fragments\/#Security\" >Security<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/boldly-link-where-no-one-has-linked-before-text-fragments\/#Privacy\" >Privacy<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/boldly-link-where-no-one-has-linked-before-text-fragments\/#Disabling-text-fragments\" >Disabling text fragments<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/boldly-link-where-no-one-has-linked-before-text-fragments\/#Text-fragments-in-web-search\" >Text fragments in web search<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/boldly-link-where-no-one-has-linked-before-text-fragments\/#Conclusion\" >Conclusion<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/boldly-link-where-no-one-has-linked-before-text-fragments\/#Acknowledgements\" >Acknowledgements<\/a><\/li><\/ul><\/nav><\/div>\n<p><\/p>\n<div>\n<header class=\"w-article-header\">\n<p class=\"w-article-header__subhead w-mb--non\">\n          Text Fragments let you specify a text snippet in the URL fragment.<br \/>\nWhen navigating to a URL with such a text fragment, the browser can emphasize<br \/>\nand\/or bring it to the user&#8217;s attention.<\/p>\n<p>\n          <time>Jun 17, 2020<\/time><br \/>\n            Updated <time>Aug 26, 2020<\/time>\n        <\/p>\n<\/header>\n<h2 id=\"fragment-identifiers\"><span class=\"ez-toc-section\" id=\"Fragment-Identifiers\"><\/span>Fragment Identifiers <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Chrome\u00a080 was a big release.<br \/>\nIt contained a number of highly anticipated features like<br \/>\nECMAScript Modules in Web Workers,<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/v8.dev\/features\/nullish-coalescing\">nullish coalescing<\/a>,<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/v8.dev\/features\/optional-chaining\">optional chaining<\/a>, and more.<br \/>\nThe release was, as frecuente, announced through a<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/blog.chromium.org\/2019\/12\/chrome-80-content-indexing-es-modules.html\">blog art\u00edculo<\/a><br \/>\non the Chromium blog.<br \/>\nYou can see an excerpt of the blog art\u00edculo in the screenshot below.<\/p>\n<figure class=\"w-figure\">\n  <img alt='blog-red-ids-4086489' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/blog-red-ids-4086489.png' alt=\"\" class=\"w-screenshot\" width=\"400\"><figcaption class=\"w-figcaption\">Chromium blog art\u00edculo with red boxes around elements with an <code>id<\/code> attribute.<\/figcaption><\/figure>\n<p>You are probably asking yourself what all the red boxes mean.<br \/>\nThey are the result of running the following snippet in DevTools.<br \/>\nIt highlights all elements that have an <code>id<\/code> attribute.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\">document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelectorAll<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'[id]'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">forEach<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">el<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br>el<span class=\"token punctuation\">.<\/span>style<span class=\"token punctuation\">.<\/span>border <span class=\"token operator\">=<\/span> <span class=\"token string\">'solid 2px red'<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>I can place a deep link to any element highlighted with a red box thanks to the<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Basics_of_HTTP\/Identifying_resources_on_the_Web#Fragment\">fragment identifier<\/a><br \/>\nwhich I then use in the <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/URL\/hash\">hash<\/a><br \/>\nof the page&#8217;s URL.<br \/>\nAssuming I wanted to deep link to the <em>Give us feedback in our<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/support.google.com\/bin\/static.py?hl=en&amp;page=portal_groups.cs\">Product Forums<\/a><\/em><br \/>\nbox in the aside, I could do so by handcrafting the URL<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/blog.chromium.org\/2019\/12\/chrome-80-content-indexing-es-modules.html#HTML1\"><code>https:\/\/blog.chromium.org\/2019\/12\/chrome-80-content-indexing-es-modules.html<mark class=\"highlight-line highlight-line-active\">#HTML1<\/mark><\/code><\/a>.<br \/>\nAs you can see in the Elements panel of the Developer Tools, the element in question<br \/>\nhas an <code>id<\/code> attribute with the value <code>HTML1<\/code>.<\/p>\n<figure class=\"w-figure\">\n  <img alt='id-html1-5409468' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/id-html1-5409468.png' alt=\"\" class=\"w-screenshot\" width=\"600\"><figcaption class=\"w-figcaption\">Dev Tools showing the <code>id<\/code> of an element.<\/figcaption><\/figure>\n<p>If I parse this URL with JavaScript&#8217;s <code>URL()<\/code> constructor, the different components are revealed.<br \/>\nNotice the <code>hash<\/code> property with the value <code>#HTML1<\/code>.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"highlight-line\"><span class=\"token keyword\">new<\/span> <span class=\"token class-name\">URL<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'https:\/\/blog.chromium.org\/2019\/12\/chrome-80-content-indexing-es-modules.html#HTML1'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>The fact though that I had to open the Developer Tools to find the <code>id<\/code><br \/>\nof an element speaks volumes about the probability this particular section of the page<br \/>\nwas meant to be linked to by the author of the blog art\u00edculo.<\/p>\n<p>What if I want to link to something without an <code>id<\/code>?<br \/>\nSay I want to link to the <em>ECMAScript Modules in Web Workers<\/em> heading.<br \/>\nAs you can see in the screenshot below, the <code>&lt;h1&gt;<\/code> in question does not have an <code>id<\/code> attribute,<br \/>\nmeaning there is no way I can link to this heading.<br \/>\nThis is the problem that Text Fragments solve.<\/p>\n<figure class=\"w-figure\">\n  <img alt='id-missing-7627075' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/id-missing-7627075.png' alt=\"\" class=\"w-screenshot\" width=\"600\"><figcaption class=\"w-figcaption\">Dev Tools showing a heading without an <code>id<\/code>.<\/figcaption><\/figure>\n<h2 id=\"text-fragments\"><span class=\"ez-toc-section\" id=\"Text-Fragments\"><\/span>Text Fragments <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/wicg.github.io\/ScrollToTextFragment\/\">Text Fragments<\/a> proposal adds support<br \/>\nfor specifying a text snippet in the URL hash.<br \/>\nWhen navigating to a URL with such a text fragment, the user agent can emphasize<br \/>\nand\/or bring it to the user&#8217;s attention.<\/p>\n<h3 id=\"browser-compatibility\"><span class=\"ez-toc-section\" id=\"Browser-compatibility\"><\/span>Browser compatibility <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The Text Fragments feature is supported in version 80 and beyond of Chromium-based browsers.<br \/>\nAt the time of writing, Safari and Firefox have not publicly signaled an intent to implement<br \/>\nthe feature. See Related enlaces for pointers to the Safari and Firefox discussions.<\/p>\n<p>Note that these enlaces currently do not work when served across<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Redirections#Alternative_way_of_specifying_redirections\">client-side redirects<\/a><br \/>\nthat some common services like Twitter use.<br \/>\nYou can follow <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/crbug.com\/1055455\">crbug.com\/1055455<\/a> for progress on this issue.<br \/>\nRegular <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Redirections#Principle\">HTTP redirects<\/a><br \/>\nwork fine.<\/p>\n<p>For security reasons, the feature requires enlaces to be opened in a<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Link_types\/noopener\"><code>noopener<\/code><\/a><br \/>\ncontext.<br \/>\nTherefore, make sure to include<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/a#attr-rel\"><code>rel=\"noopener\"<\/code><\/a><br \/>\nin your <code>&lt;a&gt;<\/code> anchor markup or add <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/open#noopener\"><code>noopener<\/code><\/a><br \/>\nto your <code>Window.open()<\/code> list of window functionality features.<\/p>\n<h3 id=\"textstart\"><span class=\"ez-toc-section\" id=\"textStart\"><\/span><code>textStart<\/code> <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>In its simplest form, the syntax of Text Fragments is as follows:<br \/>\nThe hash symbol <code>#<\/code> followed by <code>:~:text=<\/code> and finally <code>textStart<\/code>, which represents the<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/encodeURIComponent\">percent-encoded<\/a><br \/>\ntext I want to link to.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-bash\"><code class=\"language-bash\"><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>For example, say that I want to link to the<br \/>\n<em>ECMAScript Modules in Web Workers<\/em> heading in the <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/blog.chromium.org\/2019\/12\/chrome-80-content-indexing-es-modules.html\">blog art\u00edculo announcing features in Chrome 80<\/a>, the URL in this case would be:<\/p>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/blog.chromium.org\/2019\/12\/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules%20in%20Web%20Workers\"><code>https:\/\/blog.chromium.org\/2019\/12\/chrome-80-content-indexing-es-modules.html<mark class=\"highlight-line highlight-line-active\">#:~:text=ECMAScript%20Modules%20in%20Web%20Workers<\/mark><\/code><\/a><\/p>\n<p>The text fragment is emphasized <mark class=\"highlight-line highlight-line-active\">like this<\/mark>.<br \/>\nIf you click the link in a supporting browser like Chrome, the text fragment is<br \/>\nhighlighted and scrolls into view:<\/p>\n<figure class=\"w-figure\">\n  <img alt='syntax-simple-3459258' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/syntax-simple-3459258.png' alt=\"\" class=\"w-screenshot\" width=\"400\"><figcaption class=\"w-figcaption\">Text fragment scrolled into view and highlighted.<\/figcaption><\/figure>\n<h3 id=\"textstart-and-textend\"><span class=\"ez-toc-section\" id=\"textStart-and-textEnd\"><\/span><code>textStart<\/code> and <code>textEnd<\/code> <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Now what if I want to link to the entire <em>section<\/em> titled <em>ECMAScript Modules in Web Workers<\/em>, not just its heading?<br \/>\nPercent-encoding the entire text of the section would make the resulting URL impracticably long.<\/p>\n<p>Luckily there is a better way. Rather than the entire text, I can frame the desired text<br \/>\nusing the <code>textStart,textEnd<\/code> syntax.<br \/>\nTherefore, I specify a couple of percent-encoded words at the beginning of the desired text,<br \/>\nand a couple of percent-encoded words at the end of the desired text, separated by a comma\u00a0<code>,<\/code>.<\/p>\n<p>That looks like this:<\/p>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/blog.chromium.org\/2019\/12\/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules%20in%20Web%20Workers,ES%20Modules%20in%20Web%20Workers.\"><code>https:\/\/blog.chromium.org\/2019\/12\/chrome-80-content-indexing-es-modules.html<mark class=\"highlight-line highlight-line-active\">#:~:text=ECMAScript%20Modules%20in%20Web%20Workers,ES%20Modules%20in%20Web%20Workers.<\/mark><\/code><\/a>.<\/p>\n<p>For <code>textStart<\/code>, I have <code>ECMAScript%20Modules%20in%20Web%20Workers<\/code>, then a comma\u00a0<code>,<\/code><br \/>\nfollowed by <code>ES%20Modules%20in%20Web%20Workers.<\/code> as <code>textEnd<\/code>.<br \/>\nWhen you click through on a supporting browser like Chrome, the whole section is highlighted<br \/>\nand scrolled into view:<\/p>\n<figure class=\"w-figure\">\n  <img alt='syntax-end-9771466' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/syntax-end-9771466.png' alt=\"\" class=\"w-screenshot\" width=\"400\"><figcaption class=\"w-figcaption\">Text fragment scrolled into view and highlighted.<\/figcaption><\/figure>\n<p>Now you may wonder about my choice of <code>textStart<\/code> and <code>textEnd<\/code>.<br \/>\nActually, the slightly shorter URL <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/blog.chromium.org\/2019\/12\/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules,Web%20Workers.\"><code>https:\/\/blog.chromium.org\/2019\/12\/chrome-80-content-indexing-es-modules.html<mark class=\"highlight-line highlight-line-active\">#:~:text=ECMAScript%20Modules,Web%20Workers.<\/mark><\/code><\/a><br \/>\nwith only two words on each side would have worked, too.<br \/>\nCompare <code>textStart<\/code> and <code>textEnd<\/code> with the previous values.<\/p>\n<p>If I take it one step further and now use only one word for both <code>textStart<\/code> and <code>textEnd<\/code>,<br \/>\nyou can see that I am in trouble.<br \/>\nThe URL <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/blog.chromium.org\/2019\/12\/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript,Workers.\"><code>https:\/\/blog.chromium.org\/2019\/12\/chrome-80-content-indexing-es-modules.html<mark class=\"highlight-line highlight-line-active\">#:~:text=ECMAScript,Workers.<\/mark><\/code><\/a><br \/>\nis even shorter now, but the highlighted text fragment is no longer the originally desired one.<br \/>\nThe highlighting stops at the first occurrence of the word <code>Workers.<\/code>, which is correct,<br \/>\nbut not what I intended to highlight.<br \/>\nThe problem is that the desired section is not uniquely identified<br \/>\nby the current one-word <code>textStart<\/code> and <code>textEnd<\/code> values:<\/p>\n<figure class=\"w-figure\">\n  <img alt='syntax-end-wrong-6459384' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/syntax-end-wrong-6459384.png' alt=\"\" class=\"w-screenshot\" width=\"400\"><figcaption class=\"w-figcaption\">Non-intended text fragment scrolled into view and highlighted.<\/figcaption><\/figure>\n<h3 id=\"prefix-and-suffix\"><span class=\"ez-toc-section\" id=\"prefix-and-suffix\"><\/span><code>prefix-<\/code> and <code>-suffix<\/code> <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Using long enough values for <code>textStart<\/code> and <code>textEnd<\/code> is one solution for obtaining a unique link.<br \/>\nIn some situations, however, this is not possible.<br \/>\nOn a side note, why did I choose the Chrome\u00a080 release blog art\u00edculo as my example?<br \/>\nThe answer is that in this release Text Fragments were introduced:<\/p>\n<figure class=\"w-figure\">\n  <img alt='text-fragments-1010851' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/text-fragments-1010851.png' alt=\"Blog post text: Text URL Fragments.\n    Users or authors can now link to a specific portion of a page\n    using a text fragment provided in a URL.\n    When the page is loaded, the browser highlights the text and scrolls the fragment into view.\n    For example, the URL below loads a wiki page for 'Cat'\n    and scrolls to the content listed in the `text` parameter.\" class=\"w-screenshot\" width=\"80%\"><figcaption class=\"w-figcaption\">Text Fragments announcement blog art\u00edculo excerpt.<\/figcaption><\/figure>\n<p>Notice how in the screenshot above the word \u00abtext\u00bb appears four times.<br \/>\nThe forth occurrence is written in a green code font.<br \/>\nIf I wanted to link to this particular word,<br \/>\nI would set <code>textStart<\/code> to <code>text<\/code>.<br \/>\nSince the word \u00abtext\u00bb is, well, only one word, there cannot be a <code>textEnd<\/code>.<br \/>\nWhat now?<br \/>\nThe URL<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/blog.chromium.org\/2019\/12\/chrome-80-content-indexing-es-modules.html#:~:text=text\"><code>https:\/\/blog.chromium.org\/2019\/12\/chrome-80-content-indexing-es-modules.html<mark class=\"highlight-line highlight-line-active\">#:~:text=text<\/mark><\/code><\/a><br \/>\nmatches at the first occurrence of the word \u00abText\u00bb already in the heading:<\/p>\n<figure class=\"w-figure\">\n  <img alt='first-text-5720769' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/first-text-5720769.png' alt=\"\" class=\"w-screenshot\" width=\"80%\"><figcaption class=\"w-figcaption\">Text Fragment matching at the first occurrence of \u00abText\u00bb.<\/figcaption><\/figure>\n<div class=\"w-aside w-aside--caution\">\n<p><strong>Caution:<\/strong><br \/>\nNote that text fragment matching is case-insensitive.<\/p>\n<\/div>\n<p>Luckily there is a solution.<br \/>\nIn cases like this, I can specify a <code>prefix\u200b-<\/code> and a <code>-suffix<\/code>.<br \/>\nThe word before the green code font \u00abtext\u00bb is \u00abthe\u00bb, and the word after is \u00abparameter\u00bb.<br \/>\nNone of the other three occurrences of the word \u00abtext\u00bb has the same surrounding words.<br \/>\nArmed with this knowledge, I can tweak the previous URL and add the <code>prefix-<\/code> and the <code>-suffix<\/code>.<br \/>\nLike the other parameters, they, too, need to be percent-encoded<br \/>\nand can contain more than one word.<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/blog.chromium.org\/2019\/12\/chrome-80-content-indexing-es-modules.html#:~:text=the-,text,-parameter\"><code>https:\/\/blog.chromium.org\/2019\/12\/chrome-80-content-indexing-es-modules.html<mark class=\"highlight-line highlight-line-active\">#:~:text=the-,text,-parameter<\/mark><\/code><\/a>.<br \/>\nTo allow the parser to clearly identify the <code>prefix-<\/code> and the <code>-suffix<\/code>,<br \/>\nthey need to be separated from the <code>textStart<\/code> and the optional <code>textEnd<\/code> with a dash\u00a0<code>-<\/code>.<\/p>\n<figure class=\"w-figure\">\n  <img alt='correct-text-4112619' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/correct-text-4112619.png' alt=\"\" class=\"w-screenshot\" width=\"80%\"><figcaption class=\"w-figcaption\">Text Fragment matching at the desired occurrence of \u00abtext\u00bb.<\/figcaption><\/figure>\n<h3 id=\"the-full-syntax\"><span class=\"ez-toc-section\" id=\"The-full-syntax\"><\/span>The full syntax <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The full syntax of Text Fragments is shown below. (Square brackets indicate an optional parameter.)<br \/>\nThe values for all parameters need to be percent-encoded.<br \/>\nThis is especially important for the dash <code>-<\/code>, ampersand <code>&amp;<\/code>, and comma <code>,<\/code> characters,<br \/>\nso they are not being interpreted as part of the text directive syntax.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-bash\"><code class=\"language-bash\"><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Each of <code>prefix-<\/code>, <code>textStart<\/code>, <code>textEnd<\/code>, and <code>-suffix<\/code> will only match text within a single<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Block-level_elements#Elements\">block-level element<\/a>,<br \/>\nbut full <code>textStart,textEnd<\/code> ranges <em>can<\/em> span multiple blocks.<br \/>\nFor example, <code>:~:text=The quick,lazy dog<\/code> will fail to match in the following example,<br \/>\nbecause the starting string \u00abThe quick\u00bb does not appear within a single,<br \/>\nuninterrupted block-level element:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\">  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>The<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>quick brown fox<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>jumped over the lazy dog<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>It does, however, match in this example:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\">  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>The quick brown fox<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>jumped over the lazy dog<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h3 id=\"creating-text-fragment-urls-with-a-browser-extension\"><span class=\"ez-toc-section\" id=\"Creating-Text-Fragment-URLs-with-a-browser-extension\"><\/span>Creating Text Fragment URLs with a browser extension <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Creating Text Fragments URLs by hand is tedious,<br \/>\nespecially when it comes to making sure they are unique.<br \/>\nIf you really want to, the specification has some tips and lists the exact<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/wicg.github.io\/ScrollToTextFragment\/#generating-text-fragment-directives\">steps for generating Text Fragment URLs<\/a>.<br \/>\nWe provide a browser extension called<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/chrome.google.com\/webstore\/detail\/link-to-text-fragment\/pbcodcjpfjdpcineamnnmbkkmkdpajjg\">Link to Text Fragment<\/a><br \/>\nthat lets you link to any text by selecting it, and then clicking \u00abCopy Link to Selected Text\u00bb<br \/>\nin the context menu.<\/p>\n<figure class=\"w-figure\">\n  <img alt='extension-1767766' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/extension-1767766.png' alt=\"\" class=\"w-screenshot\" width=\"100%\"><figcaption class=\"w-figcaption\">\n    <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/chrome.google.com\/webstore\/detail\/link-to-text-fragment\/pbcodcjpfjdpcineamnnmbkkmkdpajjg\"><br \/>\n      Link to Text Fragment<br \/>\n    <\/a><br \/>\n    browser extension.<br \/>\n  <\/figcaption><\/figure>\n<h3 id=\"multiple-text-fragments-in-one-url\"><span class=\"ez-toc-section\" id=\"Multiple-text-fragments-in-one-URL\"><\/span>Multiple text fragments in one URL <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Note that multiple text fragments can appear in one URL.<br \/>\nThe particular text fragments need to be separated by an ampersand character <code>&amp;<\/code>.<br \/>\nHere is an example link with three text fragments:<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/blog.chromium.org\/2019\/12\/chrome-80-content-indexing-es-modules.html#:~:text=Text%20URL%20Fragments&amp;text=text,-parameter&amp;text=:~:text=On%20islands,%20birds%20can%20contribute%20as%20much%20as%2060%25%20of%20a%20cat's%20diet\"><code>https:\/\/blog.chromium.org\/2019\/12\/chrome-80-content-indexing-es-modules.html<mark class=\"highlight-line highlight-line-active\">#:~:text=Text%20URL%20Fragments&amp;text=text,-parameter&amp;text=:~:text=On%20islands,%20birds%20can%20contribute%20as%20much%20as%2060%25%20of%20a%20cat's%20diet<mark class=\"highlight-line highlight-line-active\"><\/mark><\/mark><\/code><\/a>.<\/p>\n<figure class=\"w-figure\">\n  <img alt='three-text-fragments-2803398' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/three-text-fragments-2803398.png' alt=\"\" class=\"w-screenshot\" width=\"80%\"><figcaption class=\"w-figcaption\">Three text fragments in one URL.<\/figcaption><\/figure>\n<h3 id=\"mixing-element-and-text-fragments\"><span class=\"ez-toc-section\" id=\"Mixing-element-and-text-fragments\"><\/span>Mixing element and text fragments <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Traditional element fragments can be combined with text fragments.<br \/>\nIt is perfectly fine to have both in the same URL, for example,<br \/>\nto provide a meaningful fallback in case the original text on the page changes,<br \/>\nso that the text fragment does not match anymore.<br \/>\nThe URL<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/blog.chromium.org\/2019\/12\/chrome-80-content-indexing-es-modules.html#HTML1:~:text=Give%20us%20feedback%20in%20our%20Product%20Forums.\"><code>https:\/\/blog.chromium.org\/2019\/12\/chrome-80-content-indexing-es-modules.html<mark class=\"highlight-line highlight-line-active\">#HTML1:~:text=Give%20us%20feedback%20in%20our%20Product%20Forums.<\/mark><\/code><\/a><br \/>\nlinking to the <em>Give us feedback in our<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/support.google.com\/bin\/static.py?hl=en&amp;page=portal_groups.cs\">Product Forums<\/a><\/em> section<br \/>\ncontains both an element fragment (<code>HTML1<\/code>), as well as a text fragment<br \/>\n(<code>text=Give%20us%20feedback%20in%20our%20Product%20Forums.<\/code>):<\/p>\n<figure class=\"w-figure\">\n  <img alt='text-feedback-7184318' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/text-feedback-7184318.png' alt=\"\" class=\"w-screenshot\" width=\"237\"><figcaption class=\"w-figcaption\">Linking with both element fragment and text fragment.<\/figcaption><\/figure>\n<h3 id=\"the-fragment-directive\"><span class=\"ez-toc-section\" id=\"The-fragment-directive\"><\/span>The fragment directive <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>There is one element of the syntax I have not explained yet:<br \/>\nthe fragment directive <code>:~:<\/code>.<br \/>\nTo avoid compatibility issues with existing URL element fragments as shown above,<br \/>\nthe <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/wicg.github.io\/ScrollToTextFragment\/\">Text Fragments specification<\/a><br \/>\nintroduces the fragment directive.<br \/>\nThe fragment directive is a portion of the URL fragment delimited by the code sequence <code>:~:<\/code>.<br \/>\nIt is reserved for user agent instructions, such as <code>text=<\/code>,<br \/>\nand is stripped from the URL during loading so that author scripts cannot directly interact with it.<br \/>\nUser agent instructions are also called <em>directives<\/em>.<br \/>\nIn the concrete case, <code>text=<\/code> is therefore called a <em>text directive<\/em>.<\/p>\n<h3 id=\"feature-detection\"><span class=\"ez-toc-section\" id=\"Feature-detection\"><\/span>Feature detection <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To detect support, test for the read-only <code>fragmentDirective<\/code> property on <code>document<\/code>.<br \/>\nThe fragment directive is a mechanism for URLs to specify instructions<br \/>\ndirected to the browser rather than the document.<br \/>\nIt is meant to avoid direct interaction with author script,<br \/>\nso that future user agent instructions can be added without fear<br \/>\nof introducing breaking changes to existing content.<br \/>\nOne potential example of such future additions could be translation hints.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token string\">'fragmentDirective'<\/span> <span class=\"token keyword\">in<\/span> document<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<div class=\"w-aside w-aside--note\">\n<p>From Chrome\u00a080 to Chrome\u00a085, the <code>fragmentDirective<\/code> property was defined on<br \/>\n<code>Location.prototype<\/code>. For details on this change, see<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/WICG\/scroll-to-text-fragment\/issues\/130\">WICG\/scroll-to-text-fragment#130<\/a>.<\/p>\n<\/div>\n<p>Feature detection is mainly intended for cases where enlaces are dynamically generated<br \/>\n(for example by search engines) to avoid serving text fragments enlaces<br \/>\nto browsers that do not support them.<\/p>\n<h3 id=\"polyfillability\"><span class=\"ez-toc-section\" id=\"Polyfillability\"><\/span>Polyfillability <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The Text Fragments feature can be polyfilled to some extent.<br \/>\nThere is early <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/GoogleChromeLabs\/text-fragments-polyfill\">work in progress<\/a><br \/>\nto create an extension for browsers that do not support Text Fragments natively<br \/>\nwhere the functionality is implemented in JavaScript.<\/p>\n<h3 id=\"security\"><span class=\"ez-toc-section\" id=\"Security\"><\/span>Security <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Text fragment directives are invoked only on full (non-same-page) navigations<br \/>\nthat are the result of a<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/html.spec.whatwg.org\/multipage\/interaction.html#tracking-user-activation\">user activation<\/a>.<br \/>\nAdditionally, navigations originating from a different origin than the destination<br \/>\nwill require the navigation to take place in a<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/html.spec.whatwg.org\/multipage\/links.html#link-type-noopener\"><code>noopener<\/code><\/a> context,<br \/>\nsuch that the destination page is known to be sufficiently isolated.<br \/>\nText fragment directives are only applied to the main frame.<br \/>\nThis means that text will not be searched inside iframes,<br \/>\nand iframe navigation will not invoke a text fragment.<\/p>\n<h3 id=\"privacy\"><span class=\"ez-toc-section\" id=\"Privacy\"><\/span>Privacy <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>It is important that implementations of the Text Fragments specification<br \/>\ndo not leak whether a text fragment was found on a page or not.<br \/>\nWhile element fragments are fully under the control of the original page author,<br \/>\ntext fragments can be created by anyone.<br \/>\nRemember how in my example above there was no way to link to the<br \/>\n<em>ECMAScript Modules in Web Workers<\/em> heading, since the <code>&lt;h1&gt;<\/code> did not have an <code>id<\/code>,<br \/>\nbut how anyone, including me, could just link to anywhere by carefully crafting the text fragment?<\/p>\n<p>Imagine I ran an evil ad network <code>evil-ads.example.com<\/code>.<br \/>\nFurther imagine that in one of my ad iframes I dynamically created a hidden cross-origin iframe<br \/>\nto <code>dating.example.com<\/code> with a Text Fragment URL<br \/>\n<code>dating.example.com<mark class=\"highlight-line highlight-line-active\">#:~:text=Log%20Out<\/mark><\/code><br \/>\nonce the user interacts with the ad.<br \/>\nIf the text \u00abLog Out\u00bb is found, I know the victim is currently logged in to <code>dating.example.com<\/code>,<br \/>\nwhich I could use for user profiling.<br \/>\nSince a naive Text Fragments implementation might decide<br \/>\nthat a successful match should cause a focus switch,<br \/>\non <code>evil-ads.example.com<\/code> I could listen for the <code>blur<\/code> event and thus know when a match occurred.<br \/>\nIn Chrome, we have implemented Text Fragments in such a way that the above scenario cannot happen.<\/p>\n<p>Another attack might be to exploit network traffic based on scroll position.<br \/>\nAssume I had access to network traffic logs of my victim, like as the admin of a company intranet.<br \/>\nNow imagine there existed a long human resources document <em>What to Do If You Suffer From\u2026<\/em><br \/>\nand then a list of conditions like <em>burn out<\/em>, <em>anxiety<\/em>, etc.<br \/>\nI could place a tracking pixel next to each item on the list.<br \/>\nIf I then determine that loading the document temporally co-occurs<br \/>\nwith the loading of the tracking pixel next to, say, the <em>burn out<\/em> item,<br \/>\nI can then, as the intranet admin, determine that an employee has clicked through<br \/>\non a text fragment link with <code>:~:text=burn%20out<\/code><br \/>\nthat the employee may have assumed was confidential and not visible to anyone.<br \/>\nSince this example is somewhat contrived to begin with<br \/>\nand since its exploitation requires <em>very<\/em> specific preconditions to be met,<br \/>\nthe Chrome security team evaluated the risk of implementing scroll on navigation to be manageable.<br \/>\nOther user agents may decide to show a manual scroll UI element instead.<\/p>\n<p>For sites that still wish to opt-out, we have proposed a<br \/>\nDocument Policy<br \/>\nheader value that they can send, so user agents will not process Text Fragment URLs.<br \/>\nSince Document Policy is not yet shipped, we are running an<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/GoogleChrome\/OriginTrials\/blob\/gh-pages\/developer-guide.md\">origin trial<\/a><br \/>\nto apply this policy as an intermediate solution.<br \/>\nThe <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.chrome.com\/origintrials\/#\/view_trial\/3253850730775183361\">ForceLoadAtTop<\/a><br \/>\norigin trial is running from Chrome version 83 to 85.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-bash\"><code class=\"language-bash\">Document-Policy: force-load-at-top<\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h2 id=\"disabling-text-fragments\"><span class=\"ez-toc-section\" id=\"Disabling-text-fragments\"><\/span>Disabling text fragments <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The easiest way for disabling the feature is by using an extension<br \/>\nthat can inject HTTP response headers, for example,<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/chrome.google.com\/webstore\/detail\/modheader\/idgpnmonknjnojddfkpgkljpfnnfcklj\">ModHeader<\/a><br \/>\n(not a Google product), to insert a response (<em>not<\/em> request) header as follows:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-bash\"><code class=\"language-bash\">Document-Policy: force-load-at-top<\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Another, more involved, way to opt out is by using the enterprise setting<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/cloud.google.com\/docs\/chrome-enterprise\/policies\/?policy=ScrollToTextFragmentEnabled\"><code>ScrollToTextFragmentEnabled<\/code><\/a>.<br \/>\nTo do this on macOS, paste the command below in the terminal.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-bash\"><code class=\"language-bash\">defaults <span class=\"token function\">write<\/span> com.google.Chrome ScrollToTextFragmentEnabled -bool <span class=\"token boolean\">false<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>On Windows, follow the documentation on the<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/support.google.com\/chrome\/a\/answer\/9131254?hl=en\">Google Chrome Enterprise Help<\/a> support site.<\/p>\n<div class=\"w-aside w-aside--warning\">\n<p><strong>Warning:<\/strong><br \/>\nPlease only try this when you know what you are doing.<\/p>\n<\/div>\n<h2 id=\"text-fragments-in-web-search\"><span class=\"ez-toc-section\" id=\"Text-fragments-in-web-search\"><\/span>Text fragments in web search <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>For some searches, the search engine Google provides a quick answer or summary<br \/>\nwith a content snippet from a relevant website.<br \/>\nThese <em>featured snippets<\/em> are most likely to show up when a search is in the form of a question.<br \/>\nClicking a featured snippet takes the user directly to the featured snippet text on the source web page.<br \/>\nThis works thanks to automatically created Text Fragments URLs.<\/p>\n<figure class=\"w-figure\">\n  <img alt='google-serp-8636427' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/google-serp-8636427.png' alt=\"\" class=\"w-screenshot\" width=\"80%\"><figcaption class=\"w-figcaption\">Google search engine results page showing a featured snippet. The status bar shows the Text Fragments URL.<\/figcaption><\/figure>\n<figure class=\"w-figure\">\n  <img alt='google-help-9453381' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/google-help-9453381.png' alt=\"\" class=\"w-screenshot\" width=\"80%\"><figcaption class=\"w-figcaption\">After clicking through, the relevant section of the page is scrolled into view.<\/figcaption><\/figure>\n<h2 id=\"conclusion\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Text Fragments URL is a powerful feature to link to arbitrary text on webpages.<br \/>\nThe scholarly community can use it to provide highly accurate citation or reference enlaces.<br \/>\nSearch engines can use it to deeplink to text results on pages.<br \/>\nSocial networking sites can use it to let users share specific passages of a webpage<br \/>\nrather than inaccessible screenshots.<br \/>\nI hope you start<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/blog.chromium.org\/2019\/12\/chrome-80-content-indexing-es-modules.html#:~:text=Text%20URL%20Fragments&amp;text=text,-parameter&amp;text=:~:text=On%20islands,%20birds%20can%20contribute%20as%20much%20as%2060%25%20of%20a%20cat's%20diet\">using Text Fragment URLs<\/a><br \/>\nand find them as useful as I do.<br \/>\nBe sure to install the<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/chrome.google.com\/webstore\/detail\/link-to-text-fragment\/pbcodcjpfjdpcineamnnmbkkmkdpajjg\">Link to Text Fragment<\/a><br \/>\nbrowser extension.<\/p>\n<h2 id=\"acknowledgements\"><span class=\"ez-toc-section\" id=\"Acknowledgements\"><\/span>Acknowledgements <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Text Fragments was implemented and specified by<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/nickburris\">Nick Burris<\/a><br \/>\nand <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/bokand\">David Bokan<\/a>,<br \/>\nwith contributions from <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/grantjwang\">Grant Wang<\/a>.<br \/>\nThanks to <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/jpmedley\">Joe Medley<\/a> for the thorough review of this article.<br \/>\nHero image by <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/unsplash.com\/@grakozy\">Greg Rakozy<\/a> on<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/unsplash.com\/photos\/oMpAz-DN-9I\">Unsplash<\/a>.<\/p>\n<p>    <web-feedback additional-questions=\"api\"><\/web-feedback>\n  <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Text Fragments let you specify a text snippet in the URL fragment. When navigating to a URL with such a text fragment, the browser can emphasize and\/or bring it to&#8230;<\/p>","protected":false},"author":1,"featured_media":82603,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[1434,1411,1407],"class_list":["post-82602","post","type-post","status-publish","format-standard","has-post-thumbnail","category-dev","tag-chrome","tag-twitter","tag-word"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Boldly link where no one has linked before: Text Fragments - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"Text Fragments let you specify a text snippet in the URL fragment. When navigating to a URL with such a text fragment, the browser can emphasize and\/or\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/boldly-link-where-no-one-has-linked-before-text-fragments\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Boldly link where no one has linked before: Text Fragments\" \/>\n<meta property=\"og:description\" content=\"Text Fragments let you specify a text snippet in the URL fragment. When navigating to a URL with such a text fragment, the browser can emphasize and\/or\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/fr\/dev\/boldly-link-where-no-one-has-linked-before-text-fragments\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-01T05:51:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-7042847.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"360\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/boldly-link-where-no-one-has-linked-before-text-fragments\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/boldly-link-where-no-one-has-linked-before-text-fragments\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Boldly link where no one has linked before: Text Fragments\",\"datePublished\":\"2022-09-01T05:51:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/boldly-link-where-no-one-has-linked-before-text-fragments\\\/\"},\"wordCount\":2481,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/boldly-link-where-no-one-has-linked-before-text-fragments\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-7042847.jpg\",\"keywords\":[\"Chrome\",\"Twitter\",\"Word\"],\"articleSection\":[\"Dev\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/boldly-link-where-no-one-has-linked-before-text-fragments\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/boldly-link-where-no-one-has-linked-before-text-fragments\\\/\",\"name\":\"Boldly link where no one has linked before: Text Fragments - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/boldly-link-where-no-one-has-linked-before-text-fragments\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/boldly-link-where-no-one-has-linked-before-text-fragments\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-7042847.jpg\",\"datePublished\":\"2022-09-01T05:51:21+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"Text Fragments let you specify a text snippet in the URL fragment. When navigating to a URL with such a text fragment, the browser can emphasize and\\\/or\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/boldly-link-where-no-one-has-linked-before-text-fragments\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/boldly-link-where-no-one-has-linked-before-text-fragments\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-7042847.jpg\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-7042847.jpg\",\"width\":1200,\"height\":360,\"caption\":\"hero-7042847-3845570-jpg\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Boldly link where no one has linked before: Text Fragments - R Marketing Digital","description":"Text Fragments let you specify a text snippet in the URL fragment. When navigating to a URL with such a text fragment, the browser can emphasize and\/or","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rmarketingdigital.com\/fr\/dev\/boldly-link-where-no-one-has-linked-before-text-fragments\/","og_locale":"fr_FR","og_type":"article","og_title":"Boldly link where no one has linked before: Text Fragments","og_description":"Text Fragments let you specify a text snippet in the URL fragment. When navigating to a URL with such a text fragment, the browser can emphasize and\/or","og_url":"https:\/\/rmarketingdigital.com\/fr\/dev\/boldly-link-where-no-one-has-linked-before-text-fragments\/","og_site_name":"R Marketing Digital","article_published_time":"2022-09-01T05:51:21+00:00","og_image":[{"width":1200,"height":360,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-7042847.jpg","type":"image\/jpeg"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/dev\/boldly-link-where-no-one-has-linked-before-text-fragments\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/dev\/boldly-link-where-no-one-has-linked-before-text-fragments\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Boldly link where no one has linked before: Text Fragments","datePublished":"2022-09-01T05:51:21+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/dev\/boldly-link-where-no-one-has-linked-before-text-fragments\/"},"wordCount":2481,"image":{"@id":"https:\/\/rmarketingdigital.com\/dev\/boldly-link-where-no-one-has-linked-before-text-fragments\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-7042847.jpg","keywords":["Chrome","Twitter","Word"],"articleSection":["Dev"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/dev\/boldly-link-where-no-one-has-linked-before-text-fragments\/","url":"https:\/\/rmarketingdigital.com\/dev\/boldly-link-where-no-one-has-linked-before-text-fragments\/","name":"Boldly link where no one has linked before: Text Fragments - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/dev\/boldly-link-where-no-one-has-linked-before-text-fragments\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/dev\/boldly-link-where-no-one-has-linked-before-text-fragments\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-7042847.jpg","datePublished":"2022-09-01T05:51:21+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"Text Fragments let you specify a text snippet in the URL fragment. When navigating to a URL with such a text fragment, the browser can emphasize and\/or","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/dev\/boldly-link-where-no-one-has-linked-before-text-fragments\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/rmarketingdigital.com\/dev\/boldly-link-where-no-one-has-linked-before-text-fragments\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-7042847.jpg","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-7042847.jpg","width":1200,"height":360,"caption":"hero-7042847-3845570-jpg"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"Marketing num\u00e9rique","description":"Agence de r\u00e9f\u00e9rencement | Publicit\u00e9 sur les r\u00e9seaux sociaux | Gestion de communaut\u00e9","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"Marketing num\u00e9rique","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts\/82602","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/comments?post=82602"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts\/82602\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/media\/82603"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/media?parent=82602"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/categories?post=82602"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/tags?post=82602"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}