Jak zakódovat URL pomocí JavaScriptu

Kódování adresy URL , známé také jako kódování procent , je proces kódování speciálních znaků v URL, aby byla přenášená data bezpečnější a spolehlivější. Pomáhá vyhnout se útokům napříč weby při volání vzdálené webové služby.

Adresa URL může obsahovat dva typy znaků:rezervované a nerezervované . Vyhrazené znaky jsou znaky, které mají v rámci adresy URL zvláštní význam. Například ? , / , # , : , atd. jsou vyhrazené znaky a nesmí být součástí řetězců dotazu nebo segmentů cesty. Nevyhrazené znaky nemají žádný zvláštní význam. Pomocí kódování URL jsou tyto znaky převedeny na speciální sekvence znaků.

V tomto článku se dozvíte, jak zakódovat adresu URL pomocí vestavěných funkcí JavaScriptu. JavaScript poskytuje dva funkce, které vám pomohou zakódovat adresu URL:encodeURI() a encodeURIComponent() . Obě tyto metody jsou určeny k použití pro různé případy použití. Začněme tím prvním.

encodeURI()

encodeURI() metoda je určena ke kódování kompletní adresy URL. Předpokládá, že vstupem je úplná adresa URL s některými speciálními znaky, které je třeba zakódovat. Proto není zakódovat vyhrazené znaky (~!$&@#*()=:/,;?+ ).

Podívejme se na příklad:

const url = 'http://example.com/!learn javascript$/';

// encode complete URL
const encodedUrl = encodeURI(url);

// print encoded URL
console.log(encodedUrl);

// output: http://example.com/!learn%20javascript$/

encodeURIComponent()

encodeURIComponent Tato funkce by měla být použita ke kódování jediné komponenty URL (jako je parametr řetězce dotazu) namísto úplné adresy URL. Používá UTF-8 schéma kódování a kóduje všechny znaky se speciálním významem kromě -_.!~*'() .

Pokud používáte encodeURIComponent() pro zakódování úplné adresy URL, vše včetně oddělovačů cest (/ ) bude zakódováno, jak je uvedeno níže:

const url = 'http://example.com/!learn javascript$/';

// encode complete URL
const encodedUrl = encodeURIComponent(url);

// print encoded URL
console.log(encodedUrl);

// output: http%3A%2F%2Fexample.com%2F!learn%20javascript%24%2F

V ideálním případě byste měli použít encodeURIComponent() pouze metoda pro kódování parametrů řetězce dotazu nebo segmentů cesty. Zde je příklad:

const baseUrl = 'http://www.google.com/search?q=';
const query = 'Nodejs & JavaScript'

// encode query string
const encodedQuery = encodeURIComponent(query);

// build full URL
const url = baseUrl + encodedQuery;

// print full URL
console.log(url);

// output
// http://www.google.com/search?q=Nodejs%20%26%20JavaScript

Měli byste zavolat encodeURIComponent() metoda pro každý jednotlivý parametr řetězce dotazu, který může obsahovat speciální znaky, aby se zabránilo síťovým chybám a neočekávané odpovědi.

Poznámka: MDN navrhuje vylepšení, aby odpovídalo standardu RFC 3986 (který si vyhrazuje ! , ' , ( , ) a * znaků) implementací následující metody:

const fixedEncodeURIComponent = (str) => {
    return encodeURIComponent(str).replace(/[!'()*]/g, (c) => {
        return '%' + c.charCodeAt(0).toString(16);
    });
}

console.log(fixedEncodeURIComponent('node * ! javascript'));

// output: node%20%2a%20%21%20javascript

Další informace: Jak dekódovat URL pomocí JavaScript