URL karma konumunu alma ve jQuery'de kullanma

135

Geçerli sayfanın URL'sindeki bir karmadan sonra değeri almak ve daha sonra bunu yeni bir işlevde uygulayabilmek istiyorum ... örn.

URL,

www.example.com/index.html#foo

Ve bunu aşağıdaki kod parçasıyla birlikte kullanmak istiyorum

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

Ben bu kapma ve daha sonra ikinci kod parçası kullanabileceğiniz bir değişken haline çevirerek bir yolu olduğunu umuyorum / umuyorum.

— Robbie White
kaynak

8

Senin için herhangi bir kodum yok, ama bu kod enjeksiyonu için olgun gibi göründüğü için girişi dezenfekte ettiğinizden emin olmalısınız.

— Nate B

Bu sorunun neredeyse on yıl eski olduğunu anlamak, 'ul#foo:first'kimliklerin benzersiz olması gerektiğinden mantıklı değildir , bu nedenle :firstgeçersiz kimlikler çoğaltılmadıkça seçiciye eklemek gereksizdir. On yıl önce bile tekrarlanan kimliklerin hala geçersiz olduğunu unutmayın.

— j08691

On yıl önce hala yanılıyordu

— Douglas

280

Editörün notu: Aşağıdaki yaklaşımın ciddi güvenlik etkileri vardır ve kullandığınız jQuery sürümüne bağlı olarak kullanıcılarınızı XSS saldırılarına maruz bırakabilir. Daha fazla ayrıntı için, bu cevaba veya Güvenlik Yığını Değişimi hakkındaki açıklamaya ilişkin olası saldırı tartışmasına bakın .

Bu location.hashözelliği, geçerli sayfanın karmasını almak için kullanabilirsiniz :

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

Bu özelliğin #başlangıçta sembolü içerdiğini unutmayın .

Aslında :first, kimlik seçiciyi kullandığınız için sahte seçiciye ihtiyacınız yoktur, kimliklerin DOM içinde benzersiz olduğu varsayılır .

Karma değerini bir URL dizesinden almak istiyorsanız, String.substringyöntemi kullanabilirsiniz :

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

Tavsiye: Kullanıcının karmayı istediği gibi değiştirebileceğini , seçicinize herhangi bir şey enjekte edebileceğini unutmayın, kullanmadan önce karmayı kontrol etmelisiniz.

— CMS
kaynak

30

JQuery seçicilerinin özel javascript kodunu yürütmek için kullanılabileceğini unutmayın, bu nedenle onaylanmamış karmaları kullanmak korkunç, korkunç derecede güvensizdir. Enjekte edilen koddan önce # içeren seçiciler için son jQuery sürümlerinde bunun için yarım yamalak bir düzeltme vardır, ancak # işaretini location.hash'ın başından kaldırırsanız hala risk altındasınız. Örneğin. var hash = location.hash.slice(1); $('ul.item'+hash).show().append($('#content'));bu, karma içine yerleştirilen bir komut dosyası etiketini yürütür. Bunun $('body').find('ul'+hash+':first')yerine kullanmak iyi bir alışkanlıktır $('ul'+hash+':first').

— Tgr

40

Bazı tarayıcılar karma sembolünü döndürür ve bazıları döndürmez, bu nedenle kullanımı daha güvenlidir:var hash = location.hash.replace('#', '');

— Tim

12

Alice bir web sitesi işletir, Bob siteyi ziyaret eder, kimlik doğrulaması yapar ve bir oturum çerezi alır. (Burada biraz zaman geçebilir, Bob tarayıcısını bile kapatabilir.) Charlie, Bob'a "bu harika bağlantıyı kontrol et!" Bob, Charlie'nin kontrol ettiği bir siteye götüren bağlantıyı açar. Sayfa, Bob'un tarayıcısını karma bir saldırı yükü olan Alice'in sitesindeki bir sayfaya yönlendirir. Yük yürütülür ve tarayıcı çerezleri hala hatırladığından, bunları Charlie'ye gönderebilir.

— Tgr

2

@Tgr, noktaları detaylandırdığınız ve birleştirdiğiniz için teşekkür ederiz. Bu somut örnek beni (ve umarım başkalarını) işleri güvende tutma konusunda daha eğilimli kılıyor.

— snapfractalpop

2

@buffer: aşırı yüklenmiş $(userInput)olduğu için genellikle güvensizdir $ve dizenin <>karakter içerip içermediğine bağlı olarak varolan düğümleri arayabilir veya yenilerini oluşturabilir . $(document).find(userInput)her zaman mevcut düğümleri arar, böylece daha az güvensizdir. Bununla birlikte, en iyi uygulama her zaman kullanıcı girişini sterilize etmektir, örneğin alfasayısal kimlikleri alfasayısal olduğundan emin olun.

— Tgr

35

location.hash, IE için güvenli değildir (IE9 dahil), sayfanız iframe içeriyorsa, iframe içeriğinin içindeki manuel yenilemeden sonra location.hash değeri eskidir (ilk sayfa yüklemesi için değer). manuel olarak alınan değer location.hash değerinden farklıdır, bu yüzden her zaman bunu document.URL üzerinden alın.

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

— Deepak Patil
kaynak

7

Güncelleme: document.URL, firefox 3.6'da hash değeri içermediğinden location.href güvenlidir var hash = location.href.substr (location.href.indexOf ('#') + 1)

— Deepak Patil

4

Saf javascript çözümü arayanlar için

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

Umarım bu size biraz zaman kazandırır.

— Matas Vaitkevicius
kaynak

3

JQuery 1.9'dan beri, :targetseçici URL karmasıyla eşleşir. Böylece şunları yapabilirsiniz:

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

Hangi, karma ile eşleşen kimliğe sahip öğeyi seçer ve gösterir.

— j08691
kaynak

karma yerine id yerine bir dize olarak çıkarmak için bir yolu var mı?

— ina

@ina Yani jQuery's :targetbir karma olarak dize olsun demek ? Eğer öyleyse inanmıyorum.

— j08691

1

Geçerli sayfanın bir karma varsa önce daha iyi cek öneririm. Aksi halde olacak undefined.

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

— Chetabahana
kaynak

1

@ CMS cevabında belirtilen güvenlik sonuçlarını ele almak için bunu kullanıyorum.

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

— squarecandy
kaynak