Pytanie Zakodować adres URL w JavaScript?


Jak bezpiecznie zakodować adres URL za pomocą JavaScript, tak aby można go było umieścić w łańcuchu GET?

var myUrl = "http://example.com/index.html?param=1&anotherParam=2";
var myOtherUrl = "http://example.com/index.html?url=" + myUrl;

Zakładam, że musisz zakodować myUrl zmienna w tej drugiej linii?


2126
2017-12-02 02:37


pochodzenie


Spróbuj zaglądać encodeURI () i decodeURI (). - Zack The Human
Widzieć Funkcja JavaScript urlencode. - Yanni
Możesz użyć tego narzędzia tutaj: phillihp.com/toolz/url-encode-decode - phillihp
encodeURIComponent () - Andrew


Odpowiedzi:


Sprawdź wbudowaną funkcję encodeURIComponent(str) i encodeURI(str).
W twoim przypadku powinno to działać:

var myOtherUrl = 
       "http://example.com/index.html?url=" + encodeURIComponent(myUrl);

2492
2017-12-02 02:43



Co powiesz na dodanie wyjaśnienia @ cms? escape jest również ważną opcją. - hitautodestruct
według @CMS encodeURI nie jest naprawdę bezpieczny dla kodowania adresów URL. - Ifnot
@AnaelFavre, ponieważ służy do kodowania całego adresu URL, który nie dopuszcza znaków takich jak :, /, @ itp. Te 2 metody nie mogą być używane zamiennie, musisz wiedzieć, co kodujesz, aby użyć właściwej metody. - Buu Nguyen
Zobacz też developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/... i developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/... - Michał Perłakowski
Jak wspomniano w innej odpowiedzi na tej stronie, ta strona ładnie podaje powód zastosowania tej metody - Brad Parks


Masz trzy opcje:

  • escape() nie będzie kodować: @*/+

  • encodeURI() nie będzie kodować: ~!@#$&*()=:/,;?+'

  • encodeURIComponent() nie będzie kodować: ~!*()'

Ale w twoim przypadku, jeśli chcesz przekazać a URL do a GET parametr innej strony, powinieneś użyć escape lub encodeURIComponent, ale nie encodeURI.

Zobacz pytanie Stack Overflow Najlepsza praktyka: escape lub encodeURI / encodeURIComponent do dalszej dyskusji.


1373
2017-12-02 02:49



Kodowanie znaków używane w ucieczce jest zmienne. Trzymaj się encodeURI i encodeURIComponent, które używają UTF-8. - erickson
Bądź ostrożny. Ta ucieczka przekształca znaki spoza ASCII w sekwencje specjalne Unicode, takie jak %uxxx. - opteronn
Używam encodeURIComponent i zauważenie, że nie będzie kodować znaków potoku | - kevzettler
@kevzettler - dlaczego miałby to robić? Rury nie mają znaczenia semantycznego w URI. - nickf
@GiovanniP: Ludzie, którzy dopuszczają znaki niemieckie, francuskie, japońskie, chińskie, arabskie jako dane wejściowe i przekazują te parametry za pośrednictwem GET lub POST. - Tseng


Trzymać się encodeURIComponent(). Funkcja encodeURI() nie zajmuje się kodowaniem wielu znaków, które mają znaczenie semantyczne w adresach URL (np. "#", "?" i "&"). escape() jest przestarzałe i nie zadaje sobie trudu kodowania znaków "+", które będą interpretowane jako zakodowane przestrzenie na serwerze (i, jak wskazano tutaj w innych dokumentach, nieprawidłowo koduje znaki spoza ASCII).

Jest fajnie wyjaśnienie różnicy między encodeURI() i encodeURIComponent() gdzie indziej. Jeśli chcesz coś zakodować, aby można było bezpiecznie dołączyć jako składnik URI (np. Jako parametr ciągu zapytania), chcesz użyć encodeURIComponent().


157
2018-05-29 23:54





Osobiście uważam, że wiele API chce zamienić "" na "+", więc używam następujących rzeczy:

encodeURIComponent(value).replace(/%20/g,'+');

escape jest inaczej wdrażany w różnych przeglądarkach i encodeURI nie koduje większości znaków funkcjonalnych w URI (jak # i even /) - jest przeznaczony do użycia na pełnym identyfikatorze URI / URL bez jego łamania.

UWAGA: Używasz encodeURIComponent dla wartości ciągu zapytania (nie nazwy pól / wartości i zdecydowanie nie całego adresu URL). Jeśli zrobisz to w jakikolwiek inny sposób, nie będzie kodować znaków takich jak =,?, &, Prawdopodobnie pozostawiając twój ciąg zapytania odsłonięty.

Przykład:

const escapedValue = encodeURIComponent(value).replace(/%20/g,'+');
const url = 'http://example.com/?myKey=' + escapedValue;

66
2017-12-15 08:47



Pamiętaj, że powinieneś zastąpić% 20 znakami + tylko po pierwszym znaku zapytania (który jest częścią "zapytania" adresu URL). Powiedzmy, że chcę przeglądać http://somedomain/this dir has spaces/info.php?a=this has also spaces. Powinien zostać przekonwertowany na: http://somedomain/this%20dir%20has%spaces/info.php?a=this%20has%20also%20spaces ale wiele implementacji pozwala, aby "% 20" w zapytaniu było zastąpione przez "+". Nie można jednak zamienić "% 20" na "+" w sekcji ścieżki adresu URL, spowoduje to błąd Nie znaleziono, chyba że masz katalog z + zamiast spacji. - Jochem Kuijpers
@Jochem Kuijpers, definitywnie nie wstawiłbyś "+" do katalogu. Zastosowałbym to tylko do wartości parametrów zapytania (lub kluczy w razie potrzeby), a nie do całego adresu URL, a nawet do całego ciągu zapytania. - Ryan Taylor
Zastąpiłbym raczej wartością niż wynikiem kodowania - njzk2
@ njzk2 niestety encodeURIComponent('+') dałbym ci %2B, więc musielibyśmy użyć dwóch wyrażeń regularnych ... które, jak sądzę, są przyczyną tego, że to działa, ponieważ '+' są '' są zakodowane inaczej na końcu. - Ryan Taylor


Jeśli używasz jQuery, wybrałbym tę opcję $.param metoda. Adres URL koduje obiekt odwzorowujący pola na wartości, które są łatwiejsze do odczytania niż wywoływanie metody escape dla każdej wartości.

$.param({a:"1=2", b:"Test 1"}) // gets a=1%3D2&b=Test+1

35
2018-05-13 03:32



Myślę, że podany przykład jest wystarczający. Jeśli potrzebujesz więcej informacji o $ .param na api.jquery.com/jquery.param - Maksym Kozlenko
Prawie wszyscy używają jQuery i naprawdę czuję się bardziej komfortowo z tym zamiast encoreURIComponent - Cyril Duchon-Doris


Aby zakodować adres URL, jak już zostało powiedziane, masz dwie funkcje:

encodeURI()

i

encodeURIComponent()

Powodem jest to, że pierwszy zachowuje adres URL z ryzykiem pozostawienia zbyt wielu rzeczy bez zmiany, podczas gdy drugi koduje wszystko, co jest potrzebne.

Za pierwszym razem możesz skopiować nowo utworzony adres URL na pasku adresu (na przykład) i zadziała. Jednak twoje nieumeblowane znaki "&" będą kolidować z ogranicznikami pól, a '= będą zakłócać nazwy pól i wartości, a znaki "+" będą wyglądały jak spacje. Ale w przypadku prostych danych, gdy chcesz zachować charakter URL tego, co uciekasz, działa to.

Drugi to wszystko, co musisz zrobić, aby upewnić się, że nic w twoim ciągu nie wpływa na adres URL. Pozostawia różne nieistotne znaki, dzięki czemu adres URL pozostaje możliwie czytelny dla człowieka bez zakłóceń. Adres URL zakodowany w ten sposób nie będzie już działał jako URL bez cofania.

Więc jeśli możesz poświęcić trochę czasu, zawsze chcesz użyć encodeURIComponent () - przed dodaniem par nazwa / wartość zakoduj zarówno nazwę, jak i wartość, używając tej funkcji przed dodaniem jej do ciągu zapytania.

Mam trudny czas wymyślić powody użycia encodeURI () - Zostawię to inteligentniejszym ludziom.


8
2018-01-26 21:31





encodeURIComponent () jest drogą do zrobienia.

var myOtherUrl = "http://example.com/index.html?url=" + encodeURIComponent(myUrl);

ALE należy pamiętać, że istnieją niewielkie różnice w stosunku do wersji PHP urlencode () i jak wspomniano o @CMS, to nie będzie kodować każdego znaku. Faceci w http://phpjs.org/functions/urlencode/ uczynił js odpowiednikiem phpencode ():

function urlencode(str) {
  str = (str + '')
    .toString();

  // Tilde should be allowed unescaped in future versions of PHP (as reflected below), but if you want to reflect current
  // PHP behavior, you would need to add ".replace(/~/g, '%7E');" to the following.
  return encodeURIComponent(str)
    .replace(/!/g, '%21')
    .replace(/'/g, '%27')
    .replace(/\(/g, '%28')
    .
  replace(/\)/g, '%29')
    .replace(/\*/g, '%2A')
    .replace(/%20/g, '+');
}

7
2017-10-01 08:03





Podobne rzeczy próbowałem z normalnym javascript

function fixedEncodeURIComponent(str){
     return encodeURIComponent(str).replace(/[!'()]/g, escape).replace(/\*/g, "%2A");
}

4
2018-01-05 18:49





Aby zapobiec podwójnemu kodowaniu, dobrze jest zdekodować adres URL przed kodowaniem (jeśli masz na przykład adres URL wprowadzony przez użytkownika, który może być już zakodowany).

Powiedzmy, że mamy abc%20xyz 123 jako wejście (jedna spacja jest już zakodowana):

encodeURI("abc%20xyz 123")            //   wrong: "abc%2520xyz%20123"
encodeURI(decodeURI("abc%20xyz 123")) // correct: "abc%20xyz%20123"

3
2018-06-22 03:28





Nic dla mnie nie działało. Wszystko, co widziałem, to kod HTML strony logowania, wracającej do strony klienta z kodem 200. (302 na początku, ale ta sama prośba Ajax ładuje stronę logowania w innym żądaniu Ajax, które miało być raczej przekierowaniem niż ładowaniem zwykłym tekst strony logowania).

W kontrolerze logowania dodałem tę linię:

Response.Headers["land"] = "login";

A w globalnym programie obsługi ajaxów zrobiłem to:

$(function () {
    var $document = $(document);
    $document.ajaxSuccess(function (e, response, request) {
        var land = response.getResponseHeader('land');
        var redrUrl = '/login?ReturnUrl=' + encodeURIComponent(window.location);
        if(land) {
            if (land.toString() === 'login') {
                window.location = redrUrl;
            }
        }
    });
});

Teraz nie mam żadnego problemu i działa jak urok.


2
2017-09-10 06:41





Zakoduj ciąg adresu URL

    var url = $ (location) .attr ('href'); // pobierz aktualny adres URL
    //LUB
    var url = 'folder / index.html? param = # 23dd & noob = yes'; // lub określ jedną

var encodedUrl = encodeURIComponent(url); console.log(encodedUrl); //outputs folder%2Findex.html%3Fparam%3D%2323dd%26noob%3Dyes for more info go http://www.sitepoint.com/jquery-decode-url-string

1
2017-09-27 15:59