Cross-Site Scripting (XSS) er en af de mest udbredte og farlige sårbarheder på nettet. Den opstår, når ondsindet kode – typisk JavaScript – bliver indsat i en webside og derefter udført i brugerens browser. Resultatet kan være alt fra stjålne loginoplysninger til manipulation af indhold eller omdirigering til falske sider. Heldigvis kan du med nogle enkle, men konsekvente tiltag beskytte din frontend mod XSS-angreb. Her får du en praktisk guide til, hvordan du gør.

Forstå, hvordan XSS fungerer

XSS udnytter manglende kontrol over, hvad der bliver vist i browseren. Hvis et website for eksempel viser brugerinput direkte på siden uden at rense det, kan en angriber indsætte scripts, der kører hos andre brugere. Det kan ske i kommentarfelter, søgefelter, formularer eller endda i URL-parametre.

Der findes tre hovedtyper af XSS:

• Reflekteret XSS – hvor skadelig kode sendes via et link og vises direkte i browseren.
• Lageret XSS – hvor koden gemmes i databasen og vises for mange brugere, fx i et forum eller en blog.
• DOM-baseret XSS – hvor sårbarheden ligger i JavaScript-koden på klienten, der manipulerer DOM’en uden korrekt validering.

At kende forskellen hjælper dig med at forstå, hvor du skal sætte ind.

Rens og valider alt input

Et af de vigtigste principper i webudvikling er: Stol aldrig på brugerinput. Uanset om data kommer fra en formular, en cookie eller en URL, skal det behandles som potentielt farligt.

• Valider input på serversiden, så kun forventede værdier accepteres.
• Rens output på klientsiden, så specialtegn som <, >, " og ' ikke fortolkes som HTML eller JavaScript.
• Brug etablerede biblioteker eller frameworks, der håndterer escaping automatisk – fx React, Vue eller Angular, som som udgangspunkt beskytter mod mange XSS-typer.

Brug Content Security Policy (CSP)

En Content Security Policy er et ekstra lag af beskyttelse, der fortæller browseren, hvilke scripts og ressourcer der må indlæses. Hvis en angriber forsøger at køre et script fra en uautoriseret kilde, bliver det blokeret.

Et simpelt eksempel kan være at tillade scripts kun fra dit eget domæne:

Content-Security-Policy: script-src 'self';

CSP kan virke teknisk, men det er et af de mest effektive værktøjer mod XSS, især når det kombineres med korrekt escaping.

Undgå farlige inline-scripts

Inline JavaScript – altså kode direkte i HTML-elementer som onclick eller <script>-blokke – gør det svært at beskytte sig mod XSS. Browseren kan ikke skelne mellem legitim og ondsindet kode, når alt ligger blandet sammen.

Flyt derfor al JavaScript ud i eksterne filer, og brug event listeners i stedet for inline-hændelser. Det gør din kode mere overskuelig og langt mere sikker.

Brug sikre frameworks og opdater jævnligt

Moderne frontend-frameworks har indbyggede mekanismer, der beskytter mod XSS, men kun hvis du bruger dem korrekt og holder dem opdateret.

• Undgå at bruge dangerouslySetInnerHTML i React eller tilsvarende funktioner, medmindre du er helt sikker på indholdets oprindelse.
• Hold øje med sikkerhedsopdateringer i dine afhængigheder – både i npm og i eventuelle tredjepartsbiblioteker.
• Brug værktøjer som npm audit eller Snyk til at opdage kendte sårbarheder.

Test og overvåg dit website

Selv med de bedste intentioner kan fejl snige sig ind. Regelmæssig test er derfor afgørende.

• Brug automatiserede værktøjer som OWASP ZAP eller Burp Suite til at scanne for XSS-sårbarheder.
• Implementér logning og overvågning, så du opdager mistænkelig aktivitet tidligt.
• Overvej at få foretaget en penetrationstest, hvis dit website håndterer følsomme data.

Sikkerhed som en del af kulturen

XSS-beskyttelse handler ikke kun om teknik, men også om vaner. Gør sikkerhed til en naturlig del af udviklingsprocessen. Gennemgå kode med fokus på inputhåndtering, og sørg for, at hele teamet forstår de grundlæggende principper. Jo tidligere du tænker sikkerhed ind, desto færre problemer får du senere.

Læs også:

Sådan får du dit CMS til at få samarbejdet mellem redaktører, designere og udviklere til at flyde

Web

Et CMS kan være meget mere end et teknisk værktøj – det kan være nøglen til et effektivt samarbejde mellem indholdsfolk, designere og udviklere. Læs hvordan du skaber bedre arbejdsgange, fælles forståelse og et system, der understøtter hele processen fra idé til publicering.

Hold serverne sikre: Sådan håndterer du opdateringer og patches effektivt

Web

Regelmæssige opdateringer og patches er nøglen til stabile og sikre servere. Få praktiske råd til, hvordan du planlægger, tester og automatiserer opdateringsprocessen, så du minimerer risikoen for sikkerhedsbrud og driftsforstyrrelser.

Responsivt design i praksis – sådan tilpasser du dit website til alle skærmstørrelser

Web

Lær hvordan du gør dit website fleksibelt og brugervenligt med responsivt design. Denne guide viser dig trin for trin, hvordan du tilpasser layout, billeder og funktioner, så din side ser godt ud og performer optimalt på alle skærmstørrelser.

Test og optimer navigationen: Sådan gør du menuerne mere intuitive for brugerne

Web

En velfungerende menu gør det nemt for besøgende at finde rundt og øger chancen for, at de bliver på siden. Læs hvordan du tester, justerer og optimerer din navigation, så den bliver mere intuitiv og brugervenlig – både på desktop og mobil.

En sikker frontend er en tillidssag

Brugerne forventer, at dit website er sikkert. Et enkelt XSS-angreb kan skade både deres data og din virksomheds omdømme. Ved at kombinere god kodestil, moderne værktøjer og løbende opmærksomhed kan du minimere risikoen markant – og skabe en frontend, der både er funktionel og tryg at bruge.