URL-encoding

Her ligger den mest udbredte forvirring. Et mellemrum kodes som %20 efter RFC 3986. Men formulardata sendes efter en ældre og separat regel, application/x-www-form-urlencoded, hvor mellemrum kodes som plus. Begge regler er i brug i den samme URL på samme tid: den ene i stien, den anden i query-strengen.

Sti:            /soeg/r%C3%B8d%20sko
Query-streng:   /soeg?q=r%C3%B8d+sko

Begge betyder "rød sko". Kun i query-strengen betyder + et
mellemrum. I stien betyder + et plustegn.

Konsekvensen er praktisk. Skal du sende et rigtigt plustegn med som værdi i en query-streng, skal det kodes som %2B. Ellers læser modtageren det som et mellemrum. Det rammer typisk telefonnumre: ?tlf=+4532736149 bliver til tlf = 4532736149 med et mellemrum foran, og landekoden er væk.

?tlf=+4532736149     bliver læst som " 4532736149"
?tlf=%2B4532736149   bliver læst som "+4532736149"

JavaScript har to funktioner, og valget mellem dem afgør om din URL virker. encodeURI lader de reserved tegn stå, fordi den forventer at få en hel URL hvor de har syntaktisk betydning. encodeURIComponent koder dem, fordi den forventer at få én værdi der skal ind i URLen.

const query = 'rød & sort'

encodeURI(query)
// 'r%C3%B8d%20&%20sort'      <- & står stadig råt

encodeURIComponent(query)
// 'r%C3%B8d%20%26%20sort'    <- & er kodet til %26

// Kun den nederste er sikker som parameterværdi:
'/soeg?q=' + encodeURIComponent(query)

Reglen er enkel: koder du en del af en URL, brug encodeURIComponent. Bruger du encodeURI på en søgestreng der indeholder et og-tegn, splitter modtageren værdien i to parametre, og alt efter og-tegnet forsvinder ud af det felt det hørte til.

I praksis er den bedste løsning at lade et URL-objekt gøre arbejdet. Både browsere og Node har URLSearchParams, som koder korrekt uden at du skal huske hvilken funktion der hører til hvilken del:

const url = new URL('https://example.dk/soeg')
url.searchParams.set('q', 'rød & sort')
url.searchParams.set('kategori', 'møbler/sofaer')

url.toString()
// https://example.dk/soeg?q=r%C3%B8d+%26+sort&kategori=m%C3%B8bler%2Fsofaer

Du behøver ikke et onlineværktøj. Både Python og Node kan gøre det i én linje, og det er hurtigere når du står i en fejlsøgning:

# Kod en værdi
python3 -c "import urllib.parse,sys;print(urllib.parse.quote(sys.argv[1]))" "rød sofa"
# r%C3%B8d%20sofa

# Afkod igen
python3 -c "import urllib.parse,sys;print(urllib.parse.unquote(sys.argv[1]))" "r%C3%B8d%20sofa"
# rød sofa

# Punycode frem og tilbage
python3 -c "print('hårplejelex'.encode('idna').decode())"
# xn--hrplejelex-15a

• RFC 3986 definerer URI-syntaksen: hvilke tegn der er unreserved, hvilke der er reserved, og hvordan procent-kodning skrives. Afsnit 2.1 er det der siger at hexcifre bør skrives med store bogstaver.
• RFC 3492 beskriver punycode-algoritmen, altså hvordan et navn med Unicode-tegn oversættes til ren ASCII og tilbage igen.
• RFC 5890 er rammen om IDNA2008 og fastlægger hvornår og hvordan punycode må bruges i domænenavne.
• WHATWG URL Standard er den specifikation browsere faktisk implementerer. Den afviger enkelte steder fra RFC 3986, og det er den du skal slå op i når en browser gør noget uventet.