URL हैश स्थान प्राप्त कर रहा है, और इसका उपयोग jQuery में कर रहा है

Question

मैं वर्तमान पृष्ठ के URL में हैश के बाद मान प्राप्त करना चाहता हूं और फिर एक नए फ़ंक्शन में इसे लागू करने में सक्षम हो सकता हूं ... उदा।

URL हो सकता है

www.example.com/index.html#foo

और मैं कोड के निम्नलिखित टुकड़े के साथ संयोजन में इसका उपयोग करना चाहूंगा

$('ul#foo:first').show();

मैं थोड़े मान रहा हूं / उम्मीद कर रहा हूं कि इसे हथियाने का कोई तरीका हो, और इसे एक चर में बदल दिया जाए जिसका उपयोग मैं कोड के दूसरे टुकड़े में कर सकता हूं।

Comments

मेरे पास आपके लिए कोई कोड नहीं है, लेकिन आपको इनपुट को साफ करना सुनिश्चित करना चाहिए, क्योंकि यह कोड इंजेक्शन के लिए पका हुआ लगता है।

— नैट बी

यह समझना कि यह सवाल लगभग एक दशक पुराना है, 'ul#foo:first'इसका कोई मतलब नहीं है क्योंकि आईडी अद्वितीय होनी चाहिए, इसलिए :firstचयनकर्ता को जोड़ना निरर्थक है, जब तक कि आप आईडी को डुप्लिकेट नहीं कर रहे हैं जो अमान्य है। ध्यान दें कि एक दशक पहले भी, दोहराया आईडी अभी भी अमान्य थे।

— j08691

अभी भी एक दशक पहले गलत था

— डगलस

Answer 1

संपादक का ध्यान दें: नीचे दिए गए दृष्टिकोण में गंभीर सुरक्षा निहितार्थ हैं और आपके द्वारा उपयोग किए जा रहे jQuery के संस्करण के आधार पर, आपके उपयोगकर्ताओं को XSS हमलों के लिए बेनकाब कर सकते हैं। अधिक विवरण के लिए, इस उत्तर पर टिप्पणियों में संभावित हमले या सुरक्षा स्टैक एक्सचेंज पर इस स्पष्टीकरण की चर्चा देखें ।

आप location.hashवर्तमान पृष्ठ के हैश को हथियाने के लिए संपत्ति का उपयोग कर सकते हैं :

var hash = window.location.hash;
$('ul'+hash+':first').show();

ध्यान दें कि इस संपत्ति में पहले से ही #प्रतीक है।

वास्तव में आपको आईडी चयनकर्ता:first का उपयोग करने के बाद से छद्म चयनकर्ता की आवश्यकता नहीं है , यह माना जाता है कि आईडी डोम के भीतर अद्वितीय हैं ।

यदि आप URL स्ट्रिंग से हैश प्राप्त करना चाहते हैं, तो आप String.substringविधि का उपयोग कर सकते हैं :

var url = "http://example.com/file.htm#foo";
var hash = url.substring(url.indexOf('#')); // '#foo'

सलाह: ध्यान रखें कि उपयोगकर्ता अपने इच्छानुसार हैश को बदल सकता है, अपने चयनकर्ता को कुछ भी इंजेक्ट कर सकता है, आपको इसका उपयोग करने से पहले हैश की जांच करनी चाहिए।

Comments

ध्यान दें कि jQuery के चयनकर्ताओं का उपयोग कस्टम जावास्क्रिप्ट कोड को निष्पादित करने के लिए किया जा सकता है, इसलिए असंबद्ध हैश का उपयोग करना बुरी तरह से, बुरी तरह से असुरक्षित है। चयनकर्ताओं के लिए हाल ही के jQuery संस्करणों में इसके लिए आधा-मिश्रित निर्धारण है, जिसमें इंजेक्शन कोड से पहले एक # होता है, लेकिन यदि आप स्थान की शुरुआत से # चिह्न हटाते हैं, तो भी आपको खतरा बना रहता है। ई। जी। var hash = location.hash.slice(1); $('ul.item'+hash).show().append($('#content'));यह हैश में डाले गए स्क्रिप्ट टैग को निष्पादित करेगा। इसके $('body').find('ul'+hash+':first')बजाय इस्तेमाल करना एक अच्छी आदत है $('ul'+hash+':first')।

— TGR

कुछ ब्रॉवर्स हैश प्रतीक को वापस करते हैं, और कुछ नहीं करते हैं, इसलिए यह उपयोग करने के लिए सुरक्षित है:var hash = location.hash.replace('#', '');

— टिम

ऐलिस एक वेब साइट चलाता है, बॉब इसे देखता है, प्रमाणित करता है और एक सत्र कुकी प्राप्त करता है। (यहां कुछ समय बीत सकता है, बॉब अपना ब्राउज़र भी बंद कर सकता है।) चार्ली ने बॉब को एक मेल भेजते हुए कहा कि "इस शांत लिंक को देखें"। बॉब लिंक खोलता है, जो चार्ली द्वारा नियंत्रित साइट की ओर जाता है। पृष्ठ बॉब के ब्राउज़र को हैश में हमले के पेलोड के साथ ऐलिस की साइट पर एक पृष्ठ पर पुनर्निर्देशित करता है। पेलोड को निष्पादित किया जाता है, और चूंकि ब्राउज़र अभी भी कुकीज़ को याद करता है, इसलिए यह उन्हें चार्ली को भेज सकता है।

— TGR

@, डॉट्स को विस्तृत और जोड़ने के लिए धन्यवाद। यह ठोस उदाहरण मुझे (और दूसरों को उम्मीद है) चीजों को सुरक्षित रखने में सतर्कता की ओर अधिक झुकाव करता है।

— Snapfractalpop

@ बफ़र: $(userInput)आम तौर पर असुरक्षित होता है क्योंकि $अतिभारित होता है और या तो मौजूदा नोड्स की खोज कर सकता है या स्ट्रिंग के <>वर्णों के आधार पर नए बना सकता है । $(document).find(userInput)हमेशा मौजूदा नोड्स की खोज करेगा ताकि यह कम असुरक्षित हो। उस ने कहा, सबसे अच्छा अभ्यास हमेशा उपयोगकर्ता इनपुट को पवित्र करना है, उदाहरण के लिए यदि आप अल्फ़ान्यूमेरिक आईडी का उपयोग करते हैं तो सुनिश्चित करें कि यह अल्फ़ान्यूमेरिक है।

— Tgr

Answer 2

location.hash IE के लिए सुरक्षित नहीं है , IE के मामले में (IE9 सहित), अगर आपके पेज में iframe शामिल है, तो iframe सामग्री के अंदर मैन्युअल रिफ्रेश होने के बाद location.hash मान पुराना है (प्रथम पृष्ठ लोड के लिए मान)। जबकि मैन्युअल रूप से प्राप्त किया गया मान स्थान से अलग है। इस प्रकार इसे हमेशा document.URL के माध्यम से प्राप्त करें

var hash = document.URL.substr(document.URL.indexOf('#')+1) 

Comments

अपडेट: document.URL में फ़ायरफ़ॉक्स 3.6 पर हैश मान नहीं है। इसलिए स्थान सुरक्षित है हैश = स्थान.href.substr (स्थान.href.indexOf ('#') + 1)

— दीपा पाटिल

Answer 3

उन लोगों के लिए जो शुद्ध जावास्क्रिप्ट समाधान की तलाश कर रहे हैं

 document.getElementById(location.hash.substring(1)).style.display = 'block'

आशा है कि यह आपको कुछ समय बचाता है।

Answer 4

JQuery 1.9 के बाद से, :targetचयनकर्ता URL हैश से मेल खाएगा। तो आप कर सकते हैं:

$(":target").show(); // or $("ul:target").show();

जो हैश से मेल खाते आईडी के साथ तत्व का चयन करेगा और उसे दिखाएगा।

Comments

मैच आईडी के बजाय एक स्ट्रिंग के रूप में हैश निकालने का एक तरीका है?

— इना

@ina क्या आपको लगता है कि jQuery के हैश से :targetएक स्ट्रिंग के रूप में है? यदि ऐसा है तो मुझे विश्वास नहीं है।

— j08691

Answer 5

मैं पहले बेहतर cek का सुझाव दूंगा अगर वर्तमान पृष्ठ में कोई हैश हो। अन्यथा यह होगा undefined।

$(window).on('load', function(){        
    if( location.hash && location.hash.length ) {
       var hash = decodeURIComponent(location.hash.substr(1));
       $('ul'+hash+':first').show();;
    }       
});

Answer 6

मैं इसका उपयोग @ CMS के उत्तर में उल्लिखित सुरक्षा निहितार्थों को संबोधित करने के लिए कर रहा हूँ।

// example 1: www.example.com/index.html#foo

// load correct subpage from URL hash if it exists
$(window).on('load', function () {
    var hash = window.location.hash;
    if (hash) {
        hash = hash.replace('#',''); // strip the # at the beginning of the string
        hash = hash.replace(/([^a-z0-9]+)/gi, '-'); // strip all non-alphanumeric characters
        hash = '#' + hash; // hash now equals #foo with example 1

        // do stuff with hash
        $( 'ul' + hash + ':first' ).show();
        // etc...
    }
});