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