Kodować URL w JavaScript?

Masz trzy opcje:

• escape() nie zakoduje: @*/+

• encodeURI() nie zakoduje: ~!@#$&*()=:/,;?+'

• encodeURIComponent() nie zakoduje: ~!*()'

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

Zobacz pytanie o przepełnienie stosu Best practice: escape, or encodeURI / encodeURIComponent na dalsze dyskusja

Stick with encodeURIComponent(). Funkcja encodeURI() nie przeszkadza w kodowaniu wielu znaków, które mają znaczenie semantyczne w adresach URL (np."#","?", oraz"&"). escape() jest przestarzały i nie przeszkadza w kodowaniu znaków"+", które będą interpretowane jako zakodowane spacje na serwerze (i, jak zauważyli inni tutaj, nie poprawnie koduje znaków innych niż ASCII).

Jest ładne wyjaśnienie różnicy między encodeURI() A encodeURIComponent() gdzie indziej. Jeśli chcesz zakodować coś tak, aby mogło być bezpiecznie dołączone jako składnik URI (np. jako parametr ciągu zapytania), chcesz użyć encodeURIComponent().

Osobiście uważam, że wiele API chce zastąpić ""przez"+", więc używam następującego:

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

escape jest zaimplementowany inaczej w różnych przeglądarkach i encodeURI nie koduje większości znaków, które są funkcjonalne w URI (jak # i nawet/) - jest stworzony do użycia na pełnym URI / URL bez jego łamania.

Uwaga : używasz encodeURIComponent dla wartości w łańcuchu zapytania (Nie nazwy pól/wartości i zdecydowanie nie cały adres URL). Jeśli zrobisz to w inny sposób, nie będzie to kodować znaków takich jak=,?,&, ewentualnie pozostawiając wyeksponowany ciąg zapytania.

Przykład:

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

Jeśli używasz jQuery to ja bym $.param metoda. Koduje pola mapowania obiektów do wartości, co jest łatwiejsze do odczytania niż wywołanie metody escape dla każdej wartości.

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

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

encodeURI()

I

encodeURIComponent()

Powodem, dla którego oba Istnieją, jest to, że pierwszy zachowuje adres URL z ryzykiem pozostawienia zbyt wielu rzeczy niezaklejonych, podczas gdy drugi koduje wszystko, co potrzebne.

Z pierwszym, można skopiować nowo ucieczki URL do paska adresu (na przykład) i będzie działać. Jednak nieoznaczone '& 'kolidują z ogranicznikami pól,' = ' kolidują z nazwami pól i wartości, a " + " będą wyglądały jak spacje. Ale w przypadku prostych danych, gdy chcesz zachować charakter adresu URL tego, co uciekasz, działa to.

Drugi to wszystko, co musisz zrobić, aby upewnić się, że nic w Twoim ciągu nie zakłóca adresu URL. Pozostawia różne nieistotne znaki niezaklejone tak, że URL pozostaje tak czytelny dla człowieka, jak to możliwe bez ingerencji. Adres URL zakodowany w ten sposób nie będzie już działał jako adres URL bez usuwania go.

Więc jeśli możesz wziąć czas, zawsze chcesz użyć encodeuricomponent () -- przed dodaniem par nazwa / wartość Zakoduj zarówno nazwę, jak i wartość za pomocą tej funkcji przed dodaniem jej do łańcucha zapytania.

Mam problem z wymyślaniem powodów do używania encodeURI () -- zostawię to mądrzejszym ludziom.

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 wspomniał @CMS, nie będzie to kodować każdego znaku. Chłopaki na http://phpjs.org/functions/urlencode / wykonane js odpowiednik 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, '+');
}

Podobne rzeczy próbowałem z normalnym javascript

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

Aby zapobiec podwójnemu kodowaniu, dobrze jest zdekodować adres url przed kodowaniem (jeśli masz do czynienia na przykład z adresami URL wprowadzonymi przez Użytkownika, które mogą być już zakodowane).

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"

Nic mi nie wyszło. Wszystko, co widziałem, to HTML strony logowania, wracając do strony klienta z kodem 200. (302 na początku, ale to samo żądanie Ajax ładowanie strony logowania wewnątrz innego żądania Ajax, które miało być przekierowaniem, a nie ładowaniem zwykłego tekstu strony logowania).

W kontrolerze logowania dodałem ten wiersz:

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

A w global Ajax handler zrobiłem tak:

$(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, a to działa jak urok.

Encode URL String

    var url = $(location).attr('href'); //get current url
    //OR
    var url = 'folder/index.html?param=#23dd&noob=yes'; //or specify one

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

Możesz użyć biblioteki esapi i zakodować swój adres url za pomocą poniższej funkcji. Funkcja polega na tym, że ' / ' nie są tracone do kodowania, podczas gdy reszta zawartości tekstu jest zakodowana:

function encodeUrl(url)
{
    String arr[] = url.split("/");
    String encodedUrl = "";
    for(int i = 0; i<arr.length; i++)
    {
        encodedUrl = encodedUrl + ESAPI.encoder().encodeForHTML(ESAPI.encoder().encodeForURL(arr[i]));
        if(i<arr.length-1) encodedUrl = encodedUrl + "/";
    }
    return url;
}

Https://www.owasp.org/index.php/ESAPI_JavaScript_Readme

Co to jest kodowanie URL:

Adres URL powinien być zakodowany, gdy w adresie URL znajdują się znaki specjalne. Na przykład:

console.log(encodeURIComponent('?notEncoded=&+'));

Możemy zauważyć w tym przykładzie, że wszystkie znaki z wyjątkiem ciągu {[2] } są zakodowane znakami%. Kodowanie URL jest również znane jako kodowanie procentowe, ponieważ ucieka wszystkim znakom specjalnym z %. Następnie po tym znaku % każdy znak specjalny ma unikalny kod

Po co nam URL kodowanie:

Niektóre znaki mają specjalną wartość w ciągu URL. Na przykład ? znak oznacza początek łańcucha zapytania. Aby skutecznie zlokalizować zasób w sieci, konieczne jest rozróżnienie, kiedy znak jest oznaczany jako część łańcucha znaków lub część struktury adresu url.

Jak możemy osiągnąć kodowanie URL w JS:

JS oferuje kilka wbudowanych funkcji użytkowych, których możemy użyć do łatwego kodowania adresów URL. są to dwa wygodne opcje:

1. encodeURIComponent(): pobiera Składnik URI jako argument i zwraca zakodowany łańcuch URI.
2. encodeURI(): pobiera URI jako argument i zwraca zakodowany łańcuch URI.

Przykład i zastrzeżenia:

Należy pamiętać o nie przekazywaniu całego adresu URL (w tym schematu, np. https://) do encodeURIComponent(). To może faktycznie przekształcić go w nie funkcjonalny adres URL. Na przykład:

// for a whole URI don't use encodeURIComponent it will transform
// the / characters and the URL won't fucntion properly
console.log(encodeURIComponent("http://www.random.com/specials&char.html"));

// instead use encodeURI for whole URL's
console.log(encodeURI("http://www.random.com/specials&char.html"));

Możemy zaobserwować f wstawiamy cały URL w encodeURIComponent że ukośniki ( / ) są również konwertowane na znaki specjalne. Spowoduje to, że adres URL nie będzie już działał poprawnie.

Dlatego (jak sama nazwa wskazuje) użyj:

1. encodeURIComponent na pewnej części adresu URL, który chcesz zakodować.
2. encodeURI na całym URL, który chcesz zakodować.