WeboracleArtikkelen forklarer hvordan tegnsett, UTF-8, HTML-escaping og kontekstbasert output encoding påvirker frontend. Den viser hvorfor små feil kan gi store visuelle symptomer og hvordan WEBoracle bør håndtere tekst trygt.
Når norske tegn blir rare, ikoner blir firkanter eller HTML vises som tekst, virker det ofte som en frontend-feil. I praksis er det gjerne en kjedefeil mellom database, PHP, template og nettleser.
Tegnsett og escaping er to av de mest undervurderte temaene i små websystemer. De er ikke spektakulære når de fungerer, men svært synlige når de feiler. Et enkelt symbol kan bli til en tom firkant. En apostrof kan bryte en attributt. En tekst som skulle vært ren, kan bli tolket som HTML. En trygg databaseverdi kan bli farlig når den plasseres i feil kontekst.
Tegnsett handler om hvordan tegn lagres og tolkes
Et tegnsett beskriver hvordan tegn representeres som bytes. I moderne webutvikling er UTF-8 det praktiske utgangspunktet. Problemer oppstår når databasen, PHP-forbindelsen, filene og HTML-dokumentet ikke er enige om encoding.
Hvis en tekst lagres som UTF-8, men tolkes som noe annet, kan æ, ø og å bli ødelagt. Hvis en fil er lagret med feil encoding, kan statiske tekster i template få rare symboler. Hvis databasen har riktig collation, men forbindelsen ikke bruker riktig tegnsett, kan data bli feil på vei inn eller ut.
Escaping handler om kontekst
Escaping er ikke det samme som tegnsett. Escaping handler om hvordan tekst gjøres trygg i en bestemt kontekst. Tekst som skal vises i HTML, må behandles annerledes enn tekst som skal inn i en URL, JavaScript-streng eller SQL-spørring.
I PHP brukes htmlspecialchars() ofte når ren tekst skal vises i HTML. Den gjør blant annet tegn som <, > og anførselstegn om til HTML-entiteter, slik at nettleseren viser teksten i stedet for å tolke den som markup.
echo htmlspecialchars($title, ENT_QUOTES, 'UTF-8');Når escaping blir feil
For lite escaping kan gi sikkerhetsproblemer. For mye escaping kan gi ødelagt visning. Hvis HTML-innhold escapes to ganger, kan brukeren se <p> i stedet for et avsnitt. Hvis en tittel ikke escapes i det hele tatt, kan den i verste fall åpne for XSS hvis innholdet kommer fra en usikker kilde.
Derfor bør systemet skille tydelig mellom felter som er ren tekst og felter som tillater begrenset HTML. En tittel bør normalt være ren tekst. En artikkelbody kan tillate HTML, men da bør det finnes klare regler for hvilke tagger som er akseptert.
Små feil gir store frontend-symptomer
Frontend-symptomet er ofte bare sluttresultatet. En knapp kan se feil ut fordi teksten er for lang. Et ikon kan bli usynlig fordi karakteren ikke finnes i fonten. En overskrift kan forsvinne fordi fargen arves feil. En kodeblokk kan sprenge layouten fordi lange linjer ikke brytes.
Fellesnevneren er at data og presentasjon må møtes kontrollert. Når innholdet er databasedrevet, må template og CSS være forberedt på variasjon. Når innholdet er brukerredigert, må backend være forberedt på feil, spesialtegn og uventet markup.
HTML, attributter og URL-er er ulike kontekster
Det er ikke nok å ha én generell «escape»-funksjon for alt. Tekst i en HTML-node, tekst i en attributt og tekst i en URL har ulike regler. En slug i en lenke bør URL-encodes. En tittel i en HTML-attributt bør HTML-escapes. En JavaScript-verdi bør ikke bygges ved enkel strengsammenslåing uten riktig encoding.
OWASP beskriver dette som kontekstbasert output encoding. Poenget er enkelt: tekst må sikres for stedet den skal brukes, ikke bare for stedet den kommer fra.
Praktisk sjekkliste for WEBoracle
- Bruk UTF-8 konsekvent i database, PHP-forbindelse, filer og HTML.
- Escape titler, navn og metadata når de vises som ren tekst.
- Tillat bare kontrollert HTML i artikkel- og tutorialbody.
- URL-encode slugs og parametere i lenker.
- Gi kodeblokker egne CSS-regler for linjebryting og overflow.
- Test norske tegn, lange tekniske navn og spesialtegn i alle kort og detail-sider.
WEBoracle-vurdering
WEBoracle bør behandle tegnsett og escaping som en del av designsystemet, ikke som små enkeltsaker. Når artikler, scripts og tutorials hentes fra database, er korrekt tekstbehandling like viktig som layouten som viser teksten.
Den beste løsningen er konsekvent: UTF-8 hele veien, tydelig skille mellom ren tekst og tillatt HTML, og escaping basert på konteksten teksten skal inn i. Da blir frontend mer stabil, og sikkerheten blir bedre.