टेक्स्ट फ़्रैगमेंट, आपको यूआरएल फ़्रैगमेंट में टेक्स्ट स्निपेट तय करने की सुविधा देते हैं. ऐसे टेक्स्ट फ़्रैगमेंट वाले किसी यूआरएल पर नेविगेट करते समय, ब्राउज़र उपयोगकर्ता के ध्यान पर ज़ोर दे सकता है और/या उसे ला सकता है.
फ़्रैगमेंट के आइडेंटिफ़ायर
Chrome 80 एक बड़ी रिलीज़ थी. इसमें ऐसी कई सुविधाएं शामिल थीं जिनका लंबे समय से इंतज़ार किया जा रहा था. जैसे, वेब वर्कर में ECMAScript मॉड्यूल, शून्य कोलेसिंग, वैकल्पिक चेनिंग वगैरह. हमेशा की तरह, रिलीज़ का एलान Chromium ब्लॉग पर ब्लॉग पोस्ट के ज़रिए किया गया था. नीचे दिए गए स्क्रीनशॉट में ब्लॉग पोस्ट का एक हिस्सा देखा जा सकता है.
id एट्रिब्यूट वाले एलिमेंट के आस-पास लाल रंग के बॉक्स हैं.आप शायद खुद से पूछ रहे होंगे कि सभी लाल बॉक्स का क्या मतलब है. ये 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 को खुद से तैयार किया जा सकता है.
जैसा कि डेवलपर टूल के एलिमेंट पैनल में देखा जा सकता है, सवाल वाले एलिमेंट में HTML1 वैल्यू वाला एक id एट्रिब्यूट है.
id दिखा रहे हैं.अगर इस यूआरएल को 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 एट्रिब्यूट नहीं है. इसका मतलब है कि मेरे पास इस हेडिंग को लिंक करने का कोई तरीका नहीं है. इसी समस्या को टेक्स्ट फ़्रैगमेंट
हल करते हैं.
id के बिना हेडिंग दिखाने वाले डेवलपर टूल.टेक्स्ट के फ़्रैगमेंट
टेक्स्ट फ़्रैगमेंट प्रस्ताव में, यूआरएल हैश में टेक्स्ट स्निपेट की जानकारी देने के लिए सहायता जोड़ी गई है. इस तरह के टेक्स्ट फ़्रैगमेंट वाले किसी यूआरएल पर नेविगेट करते समय, उपयोगकर्ता एजेंट उस पर ज़ोर दे सकता है और/या उसे उपयोगकर्ता के ध्यान में ला सकता है.
वेबसाइट का अलग-अलग ब्राउज़र पर चलना
सुरक्षा की वजहों से, इस सुविधा के लिए लिंक ज़रूरी हैं. इन्हें noopener कॉन्टेक्स्ट में खोला जाना चाहिए.
इसलिए, पक्का करें कि rel="noopener" को अपने <a> ऐंकर मार्कअप में शामिल किया गया हो या noopener को विंडो के फ़ंक्शन से जुड़ी सुविधाओं की अपनीWindow.open() सूची में जोड़ा गया हो.
start
सबसे आसान तरीके में, टेक्स्ट फ़्रैगमेंट का सिंटैक्स इस तरह है: हैश सिंबल # के बाद
:~:text= और आखिर में start होता है. यह उस
प्रतिशत में एन्कोड किए गए
टेक्स्ट को दिखाता है जिसे मुझे लिंक करना है.
#:~:text=start
उदाहरण के लिए, मान लें कि मुझे Chrome 80 की सुविधाओं की घोषणा करने वाली ब्लॉग पोस्ट के शीर्षक में मौजूद वेब वर्कर में ECMAScript मॉड्यूल को लिंक करना है. इस मामले में, यूआरएल इस तरह दिखेगा:
टेक्स्ट फ़्रैगमेंट को इस तरह हाइलाइट किया जाता है. अगर Chrome जैसे साथ काम करने वाले किसी ब्राउज़र में लिंक पर क्लिक किया जाता है, तो टेक्स्ट फ़्रैगमेंट हाइलाइट हो जाता है और स्क्रोल करने लगता है:
start और end
अब अगर मैं सिर्फ़ शीर्षक को नहीं, बल्कि वेब वर्कर में ECMAScript मॉड्यूल टाइटल वाले पूरे सेक्शन को लिंक करना चाहूं, तो क्या होगा? सेक्शन के पूरे टेक्स्ट को प्रतिशत-कोड में बदलने से, मिलने वाला यूआरएल असभ्य रूप से लंबा हो जाएगा.
अच्छी बात यह है कि इससे बेहतर तरीका मौजूद है. पूरे टेक्स्ट के बजाय, मैं start,end सिंटैक्स का इस्तेमाल करके, मनचाहे टेक्स्ट को फ़्रेम कर सकता/सकती हूं. इसलिए, मुझे मनचाहे टेक्स्ट की शुरुआत में कुछ प्रतिशत कोड में बदले गए शब्द और पसंद के टेक्स्ट के आखिर में, प्रतिशत के तौर पर एन्कोड किए गए कुछ शब्दों को कॉमा , से अलग करना पड़ता है.
यह कुछ ऐसा दिखेगा:
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 रिलीज़ ब्लॉग पोस्ट को क्यों चुना? इसका जवाब है कि इस रिलीज़ में, टेक्स्ट फ़्रैगमेंट
को शामिल किया गया था:
ध्यान दें कि स्क्रीनशॉट में "text" शब्द के ऊपर चार बार कैसे दिखता है. आगे होने वाली कार्रवाई को हरे कोड के फ़ॉन्ट में लिखा जाता है. अगर मुझे इस शब्द का लिंक चाहिए, तो start को text पर सेट करें. क्योंकि "text" शब्द सिर्फ़ एक ही है, इसलिए end नहीं हो सकता. अब आगे क्या होगा? यूआरएल
https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=text
टाइटल में पहले से मौजूद "Text" शब्द के पहले होने से मेल खाता है:
अच्छी बात यह है कि इसका समाधान है. इस तरह के मामलों में, मैं prefix- और -suffix के बारे में बता सकता हूं. हरे
कोड फ़ॉन्ट के पहले का शब्द "text" है, "the" और उसके बाद का शब्द "पैरामीटर" है. "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 मैच नहीं हो पाएगा. इसकी वजह यह है कि शुरुआती स्ट्रिंग "The Quick", किसी एक बिना रुकावट वाले ब्लॉक-लेवल एलिमेंट में नहीं दिखती है:
<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 में फ़ंक्शन लागू करने पर, टेक्स्ट फ़्रैगमेंट के लिए पहले से काम नहीं करते.
प्रोग्रामैटिक टेक्स्ट फ़्रैगमेंट का लिंक जनरेट करना
polyfill में एक फ़ाइल
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;
सुरक्षा
टेक्स्ट फ़्रैगमेंट के डायरेक्टिव को सिर्फ़ फ़ुल (एक ही पेज से अलग) नेविगेशन पर लागू किया जाता है. ये नेविगेशन,
उपयोगकर्ता ऐक्टिवेशन की वजह से होते हैं.
इसके अलावा, किसी डेस्टिनेशन पेज के बजाय किसी अलग ऑरिजिन से शुरू होने वाले नेविगेशन के लिए, ऐसे नेविगेशन की ज़रूरत होगी जिसे noopener कॉन्टेक्स्ट में रखा गया हो. ऐसा करने से, डेस्टिनेशन पेज को काफ़ी हद तक अलग रखा जा सकता है. टेक्स्ट फ़्रैगमेंट के डायरेक्टिव सिर्फ़
मुख्य फ़्रेम पर लागू होते हैं. इसका मतलब है कि iframes में टेक्स्ट नहीं खोजा जाएगा और iframe
नेविगेशन, टेक्स्ट फ़्रैगमेंट को शुरू नहीं करेगा.
निजता
यह ज़रूरी है कि टेक्स्ट फ़्रैगमेंट की खास बातों को लागू करने से, यह जानकारी लीक न हो कि
किसी पेज पर टेक्स्ट फ़्रैगमेंट मिला या नहीं. एलिमेंट फ़्रैगमेंट, पेज के मूल लेखक के कंट्रोल में होते हैं. हालांकि, टेक्स्ट फ़्रैगमेंट कोई भी बना सकता है. याद रखें कि ऊपर दिए गए मेरे उदाहरण में कैसे वेब वर्कर में ECMAScript मॉड्यूल हेडिंग से लिंक करने का कोई तरीका नहीं था, क्योंकि <h1> में id नहीं है, लेकिन मेरे साथ-साथ कोई भी व्यक्ति, इस टेक्स्ट फ़्रैगमेंट को इस तरह से कैसे किसी भी जगह से लिंक कर सकता है?
मान लें कि मैंने evil-ads.example.com गलत विज्ञापन नेटवर्क चलाया है. इसके बाद, कल्पना करें कि मेरे किसी विज्ञापन
iframe में, उपयोगकर्ता के
विज्ञापन के साथ इंटरैक्ट करने के बाद, मैंने डाइनैमिक तौर पर dating.example.com में टेक्स्ट फ़्रैगमेंट यूआरएल
dating.example.com#:~:text=Log%20Out के साथ, एक छिपाया हुआ क्रॉस-ऑरिजिन iframe बनाया. अगर "लॉग आउट करें" टेक्स्ट मिलता है, तो मुझे पता है कि पीड़ित व्यक्ति ने फ़िलहाल 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 सर्च इंजन तुरंत जवाब देता है या काम की वेबसाइट के कॉन्टेंट स्निपेट के साथ खास जानकारी देता है. ये फ़ीचर्ड स्निपेट तब सबसे ज़्यादा दिखते हैं, जब खोज क्वेरी के तौर पर की जाती है. फ़ीचर्ड स्निपेट पर क्लिक करने से, उपयोगकर्ता सीधे सोर्स वेब पेज के फ़ीचर्ड स्निपेट टेक्स्ट पर पहुंचता है. यह अपने-आप बने टेक्स्ट फ़्रैगमेंट यूआरएल की वजह से काम करता है.
नतीजा
टेक्स्ट फ़्रैगमेंट यूआरएल, वेबपेजों पर आर्बिट्रेरी टेक्स्ट से लिंक करने की बेहतरीन सुविधा है. विज्ञान की जानकारी रखने वाला समुदाय, इसका इस्तेमाल सटीक उद्धरण देने या रेफ़रंस के लिंक देने के लिए कर सकता है. सर्च इंजन इसका इस्तेमाल, पेजों पर टेक्स्ट के नतीजों को डीपलिंक करने के लिए कर सकते हैं. सोशल नेटवर्किंग साइटें इसका इस्तेमाल करके, उपयोगकर्ताओं को ऐक्सेस न किए जा सकने वाले स्क्रीनशॉट के बजाय, वेबपेज के खास पैसेज शेयर करने की सुविधा देती हैं. उम्मीद है कि आपने टेक्स्ट फ़्रैगमेंट यूआरएल का इस्तेमाल करना शुरू कर दिया होगा और वे मेरी तरह काम के लगेंगे. टेक्स्ट फ़्रैगमेंट का लिंक ब्राउज़र एक्सटेंशन इंस्टॉल करना न भूलें.
इसी विषय से जुड़े कुछ लिंक
- खास जानकारी वाला ड्राफ़्ट
- टैग की समीक्षा
- Chrome Platform का स्टेटस एंट्री
- Chrome को ट्रैक करने में गड़बड़ी
- थ्रेड भेजने का इरादा
- WebKit-Dev थ्रेड
- Mozilla के स्टैंडर्ड के लिए पोज़िशन थ्रेड
स्वीकार हैं
टेक्स्ट फ़्रैगमेंट को लागू किया गया और निक बरिस और डेविड बोकान ने इसकी जानकारी दी. इसके लिए, ग्रांट वांग का योगदान दिया. इस लेख को अच्छी तरह से पढ़ने के लिए, जो मेडली का धन्यवाद. Unsplash पर ग्रेग रकोज़ी ने हीरो इमेज.