बोल्डली से वहां लिंक करें जहां पहले किसी ने लिंक नहीं किया है: टेक्स्ट फ़्रैगमेंट

टेक्स्ट फ़्रैगमेंट की मदद से, यूआरएल फ़्रैगमेंट में टेक्स्ट स्निपेट तय किया जा सकता है. ऐसे टेक्स्ट फ़्रैगमेंट वाले यूआरएल पर नेविगेट करते समय, ब्राउज़र और/या उसे उपयोगकर्ता की जानकारी में लाया जा सकता है.

Thomas Steiner

फ़्रैगमेंट आइडेंटिफ़ायर

Chrome 80 एक बहुत बड़ी रिलीज़ थी. इसमें कई सुविधाओं का इंतज़ार था, जैसे कि वेब वर्कर में ECMAScript मॉड्यूल, नलीश कोलेसिंग, चैनल की चेन बनाने का वैकल्पिक तरीका वगैरह. हमेशा की तरह, रिलीज़ में कंपनी ने ब्लॉग पोस्ट Chromium ब्लॉग. आप नीचे स्क्रीनशॉट में ब्लॉग पोस्ट का एक अंश देख सकते हैं.

शायद आपके मन में यह सवाल होगा कि लाल रंग के सभी बॉक्स का क्या मतलब है. ये इस बात का नतीजा हैं कि DevTools में इस स्निपेट के बारे में ज़्यादा जानें. यह उन सभी एलिमेंट को हाइलाइट करता है जिनमें id एट्रिब्यूट होता है.

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

लाल रंग के बॉक्स में हाइलाइट किए गए किसी भी एलिमेंट का डीप लिंक दिया जा सकता है. इसके लिए, फ़्रैगमेंट आइडेंटिफ़ायर जिसे मैं फिर हैश फ़ंक्शन के हैश में इस्तेमाल करता हूं पेज का यूआरएल. यह मानते हुए कि मुझे हमें अपने प्रॉडक्ट फ़ोरम वाला बॉक्स हालाँकि, मैं यूआरएल को मैन्युअल तौर पर https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1. जैसा कि डेवलपर टूल के एलिमेंट पैनल में देखा जा सकता है, उस एलिमेंट में id मौजूद होता है HTML1 एट्रिब्यूट की वैल्यू सबमिट करें.

अगर मैं इस यूआरएल को JavaScript के URL() कंस्ट्रक्टर से पार्स करूं, तो अलग-अलग कॉम्पोनेंट दिखेंगे. #HTML1 की वैल्यू वाली hash प्रॉपर्टी पर ध्यान दें.

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: ""
}
*/

किसी एलिमेंट के id को ढूंढने के लिए, मुझे डेवलपर टूल खोलना था. हालांकि, इसके बावजूद मुझे अपने काम के एलिमेंट का पता लगाना था इस बात की संभावना के बारे में कि पेज के इस खास सेक्शन को इसके लेखक ने लिंक किया था ब्लॉग पोस्ट.

अगर मैं id के बिना किसी चीज़ से लिंक करना चाहूं, तो क्या होगा? मान लें कि मुझे ECMAScript मॉड्यूल से लिंक करना है शीर्षक में. नीचे दिए गए स्क्रीनशॉट में देखा जा सकता है कि जिस <h1> की शिकायत की गई है वह में id एट्रिब्यूट है. इसका मतलब है कि मेरे पास इस हेडिंग को लिंक करने का कोई तरीका नहीं है. यही समस्या है कि टेक्स्ट फ़्रैगमेंट हल किए जा रहे हैं.

टेक्स्ट के फ़्रैगमेंट

टेक्स्ट फ़्रैगमेंट प्रस्ताव के लिए सहायता मिलती है जो यूआरएल हैश में टेक्स्ट स्निपेट तय करता है. इस तरह के टेक्स्ट फ़्रैगमेंट वाले किसी यूआरएल पर नेविगेट करते समय, उपयोगकर्ता एजेंट पर ज़ोर देने और/या उसे लोगों का ध्यान खींचने में मदद मिलती है.

ब्राउज़र के साथ काम करना

सुरक्षा की वजहों से, इस सुविधा के लिए ज़रूरी है कि लिंक noopener कॉन्टेक्स्ट. इसलिए, अपनी क्वेरी के लिए rel="noopener" आपके <a> ऐंकर मार्कअप या जोड़ें noopener को आपके Window.open() विंडो के फ़ंक्शन की सुविधाओं की सूची.

start

अपने सबसे आसान रूप में, टेक्स्ट फ़्रैगमेंट का सिंटैक्स इस तरह है: हैश सिंबल # के बाद :~:text= और आखिर में start, जो प्रतिशत में एन्कोड किया गया लेख जोड़ें, जिसे मैं लिंक करना चाहता हूँ.

#:~:text=start

उदाहरण के लिए, मान लें कि मुझे वेब वर्कर में ECMAScript मॉड्यूल हेडिंग का इस्तेमाल करना है Chrome 80 की सुविधाओं के बारे में एलान करने वाली ब्लॉग पोस्ट, तो यूआरएल यह होगा:

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

टेक्स्ट फ़्रैगमेंट पर इस तरह ज़ोर दिया जाता है. अगर Chrome जैसे काम करने वाले ब्राउज़र में लिंक पर क्लिक किया जाता है, तो टेक्स्ट फ़्रैगमेंट हाइलाइट हो जाता है और व्यू में स्क्रोल करता है:

start और end

अब अगर मैं वेब वर्कर में ECMAScript मॉड्यूल टाइटल वाले पूरे सेक्शन को लिंक करना चाहूं, तो क्या होगा इसकी हेडिंग? प्रतिशत के तौर पर कोड में बदलने पर, सेक्शन का पूरा टेक्स्ट तैयार हो जाएगा लंबे समय तक नहीं चलाया जा सकता.

सौभाग्य से, इसका एक बेहतर तरीका है. पूरे टेक्स्ट के बजाय, start,end सिंटैक्स. इसलिए, मैंने शुरुआत में प्रतिशत के तौर पर एन्कोड किए गए कुछ शब्दों को और कुछ प्रतिशत-एन्कोडेड शब्दों को चाहते हैं, जो मनचाहे टेक्स्ट के आखिर में मौजूद होते हैं और कॉमा , से.

यह ऐसा दिखेगा:

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

start के लिए, मेरे पास ECMAScript%20Modules%20in%20Web%20Workers है. इसके बाद, कॉमा , है ES%20Modules%20in%20Web%20Workers. ने end के तौर पर. जब आप इसके साथ काम करने वाले ब्राउज़र पर क्लिक करते हैं Chrome की तरह, पूरा सेक्शन हाइलाइट किया जाता है और व्यू में स्क्रोल किया जाता है:

अब आपको मेरी पसंद के हिसाब से, start और end पसंद आ सकते हैं. दरअसल, थोड़ा छोटा यूआरएल https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules,Web%20Workers. उसके हर तरफ़ सिर्फ़ दो शब्द लिखने से भी काम किया जा सकता था. start और end की तुलना पिछली वैल्यू.

अगर मैं एक कदम आगे बढ़ लूं और अब start और end दोनों के लिए सिर्फ़ एक शब्द का इस्तेमाल करूं, तो आप मुझे परेशानी हो रही है. यूआरएल https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript,Workers. अब और भी छोटा हो गया है, लेकिन हाइलाइट किया गया टेक्स्ट फ़्रैगमेंट अब मूल रूप से वैसा नहीं है जैसा आपको चाहिए. कॉन्टेंट बनाने हाइलाइटिंग शब्द Workers. शब्द के पहले आने पर ही बंद हो जाता है, जो सही है, लेकिन यह नहीं है जिसका मकसद हाइलाइट करना है. समस्या यह है कि मनचाहे सेक्शन की पहचान वर्तमान एक-शब्द start और end मान:

prefix- और -suffix

start और end के लिए काफ़ी लंबी वैल्यू का इस्तेमाल करना, यूनीक लिंक पाने का एक समाधान है. हालांकि, कुछ परिस्थितियों में ऐसा नहीं किया जा सकता है. एक और बात यह है कि मैंने उदाहरण के लिए, Chrome 80 रिलीज़ ब्लॉग पोस्ट? इसका जवाब यह है कि इस रिलीज़ में टेक्स्ट फ़्रैगमेंट पेश किए गए थे:

ध्यान दें कि "टेक्स्ट" शब्द के ऊपर स्क्रीनशॉट में ऐसा कैसे है चार बार दिखता है. यह इवेंट अगली बार दोहराया जाएगा हरे कोड के फ़ॉन्ट में लिखा होना चाहिए. अगर मुझे इस शब्द से लिंक करना है, तो मैं start को सेट करूंगा text तक. "टेक्स्ट" शब्द से सिर्फ़ एक शब्द है, end नहीं बनाया जा सकता. अब आगे क्या होगा? कॉन्टेंट बनाने यूआरएल https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=text "टेक्स्ट" शब्द के पहले आने से मैच करता है पहले से शीर्षक में:

सौभाग्य से, इसका एक समाधान है. इस तरह के मामलों में, prefix​- और -suffix तय किए जा सकते हैं. कॉन्टेंट बनाने हरे कोड के पहले शब्द फ़ॉन्ट "text" "द" है और इसके बाद "पैरामीटर" है. इनमें से कोई नहीं "टेक्स्ट" शब्द के अन्य तीन उदाहरण जिसमें आस-पास के शब्द हों. इस सुरक्षा सिग्नल की मदद से जानकारी है, तो मैं पिछले यूआरएल में बदलाव कर सकता हूं और prefix- और -suffix जोड़ सकता हूं. अन्य की तरह पैरामीटर को भी प्रतिशत-एन्कोडेड में शामिल करना होगा और उनमें एक से ज़्यादा शब्द हो सकते हैं. https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=the-,text,-parameter पर टैप करें. पार्सर को prefix- और -suffix को साफ़ तौर पर पहचानने के लिए, उन्हें अलग करना ज़रूरी है start से और डैश - के साथ वैकल्पिक end.

पूरा सिंटैक्स

टेक्स्ट फ़्रैगमेंट का पूरा सिंटैक्स नीचे दिखाया गया है. (स्क्वेयर ब्रैकेट एक वैकल्पिक पैरामीटर दिखाते हैं.) सभी पैरामीटर की वैल्यू, प्रतिशत के तौर पर कोड में बदली जानी चाहिए. यह डैश के लिए विशेष रूप से महत्वपूर्ण है -, एंपरसैंड &, और कॉमा , वर्ण, इसलिए उन्हें टेक्स्ट के हिस्से के रूप में नहीं समझा जा रहा है डायरेक्टिव सिंटैक्स.

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

prefix-, start, end, और -suffix में से हर एक, सिर्फ़ एक में मौजूद टेक्स्ट से मेल खाएगा ब्लॉक-लेवल के एलिमेंट, लेकिन पूरी start,end रेंज एक से ज़्यादा ब्लॉक में इस्तेमाल की जा सकती हैं. उदाहरण के लिए, नीचे दिए गए उदाहरण में :~:text=The quick,lazy dog मेल नहीं खाएगा, क्योंकि स्ट्रिंग "तेज़" किसी एक, अबाधित ब्लॉक-लेवल एलिमेंट के अंदर नहीं दिखता:

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

हालांकि, इस उदाहरण में यह यूआरएल मौजूद है:

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

ब्राउज़र एक्सटेंशन के साथ टेक्स्ट फ़्रैगमेंट यूआरएल बनाना

टेक्स्ट फ़्रैगमेंट के यूआरएल मैन्युअल तरीके से बनाना मुश्किल होता है. खास तौर पर तब, जब यह पक्का करने की बात हो कि वे अद्वितीय. अगर आप चाहें, तो इस स्पेसिफ़िकेशन में कुछ सलाह दी गई हैं. साथ ही, इसमें टेक्स्ट फ़्रैगमेंट यूआरएल जनरेट करने का तरीका. हम एक ओपन सोर्स ब्राउज़र एक्सटेंशन उपलब्ध कराते हैं, जिसे टेक्स्ट फ़्रैगमेंट का लिंक, जो आपको यह सुविधा देता है किसी भी टेक्स्ट को लिंक करने के लिए उसे चुनें. इसके बाद, "चुने गए टेक्स्ट का लिंक कॉपी करें" पर क्लिक करें कॉन्टेक्स्ट में मेन्यू. यह एक्सटेंशन, इन ब्राउज़र के लिए उपलब्ध है:

• Google Chrome के लिए टेक्स्ट फ़्रैगमेंट का लिंक
• Microsoft Edge के लिए टेक्स्ट फ़्रैगमेंट का लिंक
• Mozilla Firefox के लिए टेक्स्ट फ़्रैगमेंट का लिंक
• Apple Safari के लिए टेक्स्ट फ़्रैगमेंट का लिंक

एक यूआरएल में कई टेक्स्ट फ़्रैगमेंट

ध्यान दें कि एक यूआरएल में, टेक्स्ट के कई फ़्रैगमेंट दिख सकते हैं. विशेष टेक्स्ट फ़्रैगमेंट को एंपरसैंड वर्ण & से अलग किए गए. यहां तीन टेक्स्ट फ़्रैगमेंट वाले लिंक का उदाहरण दिया गया है: 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.

एलिमेंट और टेक्स्ट फ़्रैगमेंट मिलाना

ट्रेडिशनल एलिमेंट फ़्रैगमेंट को टेक्स्ट फ़्रैगमेंट के साथ जोड़ा जा सकता है. दोनों उपयोगकर्ताओं के लिए एक साथ कुछ एक ही यूआरएल में डालें. उदाहरण के लिए, ताकि पेज पर मौजूद मूल टेक्स्ट होने पर, उपयोगकर्ताओं को एक बेहतरीन विकल्प दिया जा सके बदलाव करता है, ताकि टेक्स्ट फ़्रैगमेंट अब मेल न खाए. यूआरएल https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1:~:text=Give%20us%20feedback%20in%20our%20Product%20Forums. लिंक करने के लिए हमें सुझाव, राय या शिकायत भेजें प्रॉडक्ट फ़ोरम सेक्शन इसमें एलिमेंट फ़्रैगमेंट (HTML1) और टेक्स्ट फ़्रैगमेंट, दोनों शामिल होते हैं (text=Give%20us%20feedback%20in%20our%20Product%20Forums.):

फ़्रैगमेंट डायरेक्टिव

सिंटैक्स का एक एलिमेंट है जिसके बारे में मैंने अब तक नहीं बताया है: फ़्रैगमेंट डायरेक्टिव :~:. इससे बचने के लिए मौजूदा यूआरएल एलिमेंट फ़्रैगमेंट के साथ काम करने से जुड़ी समस्याओं के बारे में ऊपर बताया गया है, टेक्स्ट फ़्रैगमेंट स्पेसिफ़िकेशन, फ़्रैगमेंट की जानकारी देता है डायरेक्टिव. फ़्रैगमेंट डायरेक्टिव, यूआरएल फ़्रैगमेंट का वह हिस्सा है जिसे कोड क्रम से अलग किया जाता है :~:. यह वैल्यू, उपयोगकर्ता एजेंट के निर्देशों के लिए रिज़र्व है, जैसे कि text=. इसे यूआरएल से हटा दिया जाता है ताकि लेखक स्क्रिप्ट इसके साथ सीधे इंटरैक्ट न कर सकें. उपयोगकर्ता एजेंट के लिए निर्देश इन्हें निर्देश भी कहा जाता है. इसलिए, ठोस मामले में text= को टेक्स्ट डायरेक्टिव कहा जाता है.

सुविधा की पहचान

सहायता का पता लगाने के लिए, document पर रीड-ओनली fragmentDirective प्रॉपर्टी की जांच करें. फ़्रैगमेंट डायरेक्टिव, यूआरएल का एक ऐसा तरीका है जिसमें निर्देश के बजाय ब्राउज़र को भेजे जाने वाले निर्देश होते हैं दस्तावेज़. इसका मकसद, लेखक की स्क्रिप्ट के साथ सीधे तौर पर इंटरैक्ट करने से बचना है, ताकि आने वाले समय में उपयोगकर्ता एजेंट मौजूदा कॉन्टेंट में नुकसान पहुंचाने वाले बदलाव शुरू करने से डरे बिना, निर्देश जोड़े जा सकते हैं. एक आने वाले समय में इस तरह के जोड़े जाने का मतलब, अनुवाद से जुड़े सुझाव हो सकता है.

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

सुविधा की पहचान मुख्य रूप से उन मामलों में की जाती है जहां लिंक डाइनैमिक रूप से जनरेट होते हैं. उदाहरण के लिए, खोज इंजन) के लिए).

टेक्स्ट के हिस्सों को स्टाइल करना

डिफ़ॉल्ट रूप से, ब्राउज़र टेक्स्ट फ़्रैगमेंट को उनकी स्टाइल की तरह स्टाइल देते हैं mark (आम तौर पर, पीले रंग पर काला, सीएसएस के सिस्टम के रंग mark के लिए). उपयोगकर्ता-एजेंट स्टाइलशीट में सीएसएस होता है जो इस तरह दिखता है:

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

जैसा कि आपको दिख रहा है, ब्राउज़र एक नकली सिलेक्टर दिखाता है ::target-text, जिसका इस्तेमाल किया जा सकता है लागू की गई हाइलाइटिंग को कस्टमाइज़ करें. उदाहरण के लिए, अपने टेक्स्ट फ़्रैगमेंट को काला डिज़ाइन किया जा सकता है टेक्स्ट को लाल रंग के बैकग्राउंड के तौर पर इस्तेमाल किया जा सकता है. हमेशा की तरह, कलर कंट्रास्ट की जांच करना इसलिए, बदलाव करने की स्टाइल में दी गई वजह से सुलभता से जुड़ी समस्याएं न हों. साथ ही, यह पक्का किया जा सके कि हाइलाइट करने की सुविधा असल में हो अन्य कॉन्टेंट से अलग दिखें.

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

पॉलीफ़िलेबिलिटी

टेक्स्ट फ़्रैगमेंट की सुविधा को कुछ हद तक पॉलीफ़िल किया जा सकता है. हम आपको polyfill, जिसका इस्तेमाल आंतरिक रूप से ये करते हैं एक्सटेंशन, उन ब्राउज़र के लिए जो उन टेक्स्ट फ़्रैगमेंट के लिए बिल्ट-इन सहायता उपलब्ध कराएं जहां JavaScript में फ़ंक्शन लागू किया गया हो.

प्रोग्रैम्ड तरीके से टेक्स्ट के फ़्रैगमेंट का लिंक जनरेट करें

पॉलीफ़िल में एक फ़ाइल होती है fragment-generation-utils.js है, जिसे इंपोर्ट करके टेक्स्ट फ़्रैगमेंट लिंक जनरेट करने के लिए इस्तेमाल किया जा सकता है. यह है यहां दिए गए कोड सैंपल में बताया गया है:

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

आंकड़े जुटाने के लिए टेक्स्ट फ़्रैगमेंट पाना

कई साइटें, रूटिंग के लिए फ़्रैगमेंट का इस्तेमाल करती हैं. इसलिए, ब्राउज़र टेक्स्ट फ़्रैगमेंट को हटा देते हैं ताकि वे पेज टूट न जाएं. कई अपनी ज़रूरत को स्वीकार किया टेक्स्ट फ़्रैगमेंट के लिंक पेजों पर दिखाएं, जैसे विश्लेषण के मकसद से, लेकिन प्रस्तावित समाधान अभी तक लागू नहीं किया गया है. अभी के लिए समाधान के रूप में, आप एक्सट्रैक्ट करने के लिए नीचे दिए गए कोड का इस्तेमाल कर सकते हैं आपको अपने काम की जानकारी चाहिए.

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

सुरक्षा

टेक्स्ट फ़्रैगमेंट डायरेक्टिव सिर्फ़ पूरे (एक ही पेज नहीं) नेविगेशन पर इस्तेमाल किए जाते हैं, जो a उपयोगकर्ता को ऐक्टिवेट करना. इसके अलावा, डेस्टिनेशन से अलग ऑरिजिन से शुरू होने वाले नेविगेशन के लिए यह ज़रूरी है कि एक जगह से दूसरी जगह जाने के लिए noopener संदर्भ, जैसे कि गंतव्य पेज काफ़ी रूप से अलग देखा गया है. टेक्स्ट फ़्रैगमेंट डायरेक्टिव सिर्फ़ मुख्य फ़्रेम पर लागू किया जाता है. इसका मतलब है कि टेक्स्ट को iframe और iframe में नहीं खोजा जाएगा नेविगेशन से टेक्स्ट फ़्रैगमेंट शुरू नहीं होगा.

निजता

यह ज़रूरी है कि टेक्स्ट फ़्रैगमेंट स्पेसिफ़िकेशन लागू करने की वजह से, जब कोई टेक्स्ट लीक न हो फ़्रैगमेंट किसी पेज पर मिला या नहीं. एलिमेंट फ़्रैगमेंट पूरी तरह से मूल पेज लेखक, टेक्स्ट फ़्रैगमेंट कोई भी बना सकता है. ऊपर दिए गए उदाहरण में बताया गया तरीका याद रखें वेब वर्कर में ECMAScript मॉड्यूल हेडिंग से लिंक करने का कोई तरीका नहीं था, क्योंकि <h1> ने नहीं है कि उनके पास id है, लेकिन यह भी बना है कि कैसे मैं और कोई भी व्यक्ति किसी भी अन्य व्यक्ति टेक्स्ट फ़्रैगमेंट?

मान लें कि मैंने एक खराब विज्ञापन नेटवर्क evil-ads.example.com चलाया है. इसके अलावा, कल्पना करें कि मेरे किसी विज्ञापन में वे iframe जिनमें मैंने टेक्स्ट के साथ dating.example.com के लिए, डाइनैमिक तौर पर छिपा हुआ क्रॉस-ऑरिजिन iframe बनाया है फ़्रैगमेंट यूआरएल dating.example.com#:~:text=Log%20Out जब उपयोगकर्ता विज्ञापन के साथ इंटरैक्ट करता है. अगर आपकी साइट पर "लॉग आउट करें" टेक्स्ट मिल गया है, मुझे पता है कि पीड़ित व्यक्ति dating.example.com में लॉग इन किया है, जिसका इस्तेमाल मैं उपयोगकर्ता प्रोफ़ाइलिंग के लिए कर सकता हूं. छोटे-छोटे टेक्स्ट से फ़्रैगमेंट लागू करने का तरीका यह तय कर सकता है कि सही तरीके से मैच होने पर फ़ोकस स्विच चालू होना चाहिए evil-ads.example.com मैं blur इवेंट को सुन सकती हूं और इससे मुझे पता चल सकता है कि कोई मैच कब हुआ. तय सीमा में Chrome में, हमने टेक्स्ट फ़्रैगमेंट को इस तरह लागू किया है कि ऊपर दिया गया उदाहरण नहीं हो सकता.

दूसरा हमला, स्क्रोल की पोज़िशन के आधार पर नेटवर्क ट्रैफ़िक का फ़ायदा उठाना हो सकता है. मान लो कि मेरे पास इसका ऐक्सेस है मेरे शिकार के नेटवर्क ट्रैफ़िक लॉग, जैसे किसी कंपनी के इंट्रानेट के एडमिन के रूप में. अब कल्पना करें एक लंबा मानव संसाधन दस्तावेज़ क्या करना चाहिए अगर आपको उपभोक्ता है... और उसके बाद एक बर्न आउट, चिंता, जैसी स्थितियां. मैं हर आइटम के बगल में एक ट्रैकिंग पिक्सल लगा सकता हूं सूची. अगर मुझे लगता है कि दस्तावेज़ को बर्न आउट आइटम के बाद ट्रैकिंग पिक्सल जोड़ना है. इसके बाद, इंट्रानेट एडमिन के रूप में यह तय किया जा सकता है कि किसी कर्मचारी ने :~:text=burn%20out वाले ऐसे टेक्स्ट फ़्रैगमेंट लिंक पर क्लिक किया है जिसे उस कर्मचारी ने शायद यह मान लिया गया हो कि वह गोपनीय है और किसी को भी नहीं दिखेगी. क्योंकि यह उदाहरण कुछ हद तक पहले से इस्तेमाल की जा रही है और इसके इस्तेमाल के लिए बहुत खास पहले से तय शर्तों को पूरा करना ज़रूरी है. Chrome की सुरक्षा टीम ने नेविगेशन पर स्क्रोल करने की सुविधा को मैनेज करने के जोखिम का आकलन किया. इसकी जगह, अन्य उपयोगकर्ता एजेंट मैन्युअल तरीके से स्क्रोल करने वाला यूज़र इंटरफ़ेस (यूआई) एलिमेंट दिखाने का फ़ैसला ले सकते हैं.

ऑप्ट-आउट करने की इच्छा रखने वाली साइटों के लिए, Chromium दस्तावेज़ से जुड़ी नीति हेडर वैल्यू जिसे वह भेज सकता है, ताकि उपयोगकर्ता एजेंट, टेक्स्ट फ़्रैगमेंट यूआरएल को प्रोसेस न करें.

Document-Policy: force-load-at-top

टेक्स्ट फ़्रैगमेंट बंद करना

इस सुविधा को बंद करने का सबसे आसान तरीका, ऐसे एक्सटेंशन का इस्तेमाल करना है जो एचटीटीपी रिस्पॉन्स दे सकता है हेडर, उदाहरण के लिए, ModHeader (कोई Google प्रॉडक्ट नहीं) हेडर के तौर पर, इस तरह से जवाब (नहीं) शामिल करने के लिए:

Document-Policy: force-load-at-top

एंटरप्राइज़ सेटिंग का इस्तेमाल करना, ऑप्ट आउट करने का दूसरा तरीका है ScrollToTextFragmentEnabled. macOS पर ऐसा करने के लिए, नीचे दिए गए टर्मिनल में कमांड चिपकाएं.

defaults write com.google.Chrome ScrollToTextFragmentEnabled -bool false

Windows में, Google Chrome Enterprise सहायता सहायता की वेबसाइट पर जाएं.

वेब खोज में टेक्स्ट फ़्रैगमेंट

कुछ खोजों के लिए, सर्च इंजन Google, कॉन्टेंट के साथ तुरंत जवाब या खास जानकारी देता है स्निपेट. खोज के समय ये चुनिंदा स्निपेट दिख सकते हैं सवाल जैसा होता है. फ़ीचर्ड स्निपेट पर क्लिक करने के बाद, उपयोगकर्ता सीधे उस पर ले जाता है स्निपेट टेक्स्ट में डाला जाना चाहिए. यह अपने-आप बने टेक्स्ट फ़्रैगमेंट यूआरएल की मदद से काम करता है.

नतीजा

टेक्स्ट फ़्रैगमेंट यूआरएल, वेबपेजों पर आर्बिट्रेरी टेक्स्ट से लिंक करने की बेहतरीन सुविधा है. द विद्वान समुदाय इसका इस्तेमाल ज़्यादा सटीक उद्धरण या रेफ़रंस लिंक देने के लिए कर सकता है. सर्च इंजन इनका इस्तेमाल कर सकते हैं ताकि पेजों पर दिखने वाले टेक्स्ट के नतीजों को डीपलिंक किया जा सके. सोशल नेटवर्किंग साइटें इसका इस्तेमाल, उपयोगकर्ताओं को अपनी वेबसाइट और ऐप्लिकेशन के ऐसे स्क्रीनशॉट के बजाय जो वेबपेज के खास पैसेज हों. उम्मीद है कि टेक्स्ट फ़्रैगमेंट यूआरएल का इस्तेमाल करके और वे मुझे उतनी ही उपयोगी लगती हैं जितनी मुझे लगती हैं. कृपया टेक्स्ट फ़्रैगमेंट का लिंक ब्राउज़र एक्सटेंशन चुनें.

इसी विषय से जुड़े कुछ लिंक

• स्पेक्ट ड्राफ़्ट
• TAG की समीक्षा
• Chrome प्लैटफ़ॉर्म के स्टेटस की एंट्री
• Chrome ट्रैकिंग से जुड़ी गड़बड़ी
• थ्रेड शिप करने की इच्छा
• WebKit-Dev थ्रेड
• Mozilla स्टैंडर्ड पोज़िशन की थ्रेड

स्वीकार की गई

टेक्स्ट फ़्रैगमेंट को Nick Burris ने लागू और बताया डेविड बोकान, इनके योगदान के साथ ग्रांट वांग. इसके लिए, जो मेडली को धन्यवाद इस लेख में दी गई जानकारी पढ़ें. ग्रेग रकोज़ी की हीरो इमेज अनस्प्लैश.