Een URL coderen met JavaScript

URL-codering , ook bekend als percent-encoding , is een proces waarbij speciale tekens in een URL worden gecodeerd om de verzonden gegevens veiliger en betrouwbaarder te maken. Het helpt cross-site aanvallen te voorkomen terwijl u een externe webservice aanroept.

Er kunnen twee soorten tekens in een URL voorkomen:gereserveerd en niet gereserveerd . De gereserveerde tekens zijn die tekens die een speciale betekenis hebben binnen een URL. Bijvoorbeeld ? , / , # , : , enz. zijn gereserveerde tekens en mogen geen deel uitmaken van queryreeksen of padsegmenten. Niet-gereserveerde tekens hebben geen speciale betekenis. Met behulp van URL-codering worden deze tekens omgezet in speciale tekenreeksen.

In dit artikel leert u hoe u een URL codeert met behulp van ingebouwde JavaScript-functies. JavaScript biedt twee functies om u te helpen bij het coderen van een URL:encodeURI() en encodeURIComponent() . Beide methoden zijn bedoeld om voor verschillende gebruikssituaties te worden gebruikt. Laten we met de eerste beginnen.

encodeURI()

De encodeURI() methode is bedoeld om een ​​volledige URL te coderen. Het gaat ervan uit dat de invoer een volledige URL is met enkele speciale tekens die moeten worden gecodeerd. Daarom niet codeer de gereserveerde tekens (~!$&@#*()=:/,;?+ ).

Laten we een voorbeeld bekijken:

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()

De encodeURIComponent functie moet worden gebruikt om een ​​enkele URL-component (zoals een queryreeksparameter) te coderen in plaats van de volledige URL. Het gebruikt de UTF-8 coderingsschema en codeert alle tekens met een speciale betekenis behalve -_.!~*'() .

Als u encodeURIComponent() . gebruikt om een ​​volledige URL te coderen, alles inclusief padscheidingstekens (/ ) worden gecodeerd zoals hieronder weergegeven:

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

Idealiter gebruikt u de encodeURIComponent() methode alleen voor het coderen van queryreeksparameters of padsegmenten. Hier is een voorbeeld:

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

U moet de encodeURIComponent() . bellen methode voor elke afzonderlijke queryreeksparameter, die speciale tekens kan bevatten om netwerkfouten en onverwachte reacties te voorkomen.

Opmerking: MDN stelt een verbetering voor om te voldoen aan de RFC 3986-standaard (die ! voorbehoudt) , ' , ( , ) , en * tekens) door de volgende methode te implementeren:

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

Lees volgende: Een URL decoderen met JavaScript