Het belang van security als front-end ontwikkelaar (deel 1)

Regelmatig vragen wij onze medewerkers om een stukje te schrijven over een bepaald onderwerp. Dit keer heeft front-end ontwikkelaar Tiffany Gummarus een blog geschreven over security en front-end ontwikkelen.

Als je aan een front-end ontwikkelaar denkt, dan denk je vaak niet aan security. Je denkt dan vaak aan design (UI) en user experience (UX), waarbij de front-end ontwikkelaar alleen maar bezig is met vormgeving van een (web)applicatie. Met moderne webapps is dat langzaam veranderd. Nu kunnen front-end ontwikkelaars met een paar klikken een volledige UI en UX in elkaar zetten. Maar met welke security uitdagingen heeft de ontwikkelaar nog steeds te maken?

Security uitdagingen

Binnen traditionele webapplicaties kennen wij verschillende risico’s. De Open Web Application Security Project (OWASP), dat vaak gebruikt als leidraad wordt gebruikt door ontwikkelaars, heeft enkele risico’s opgenomen die gerelateerd zijn aan front-end security.

Enkele voorbeelden:

• Injection
• Sensitive Data Exposure
• Security Misconfiguration
• Cross-Site Scripting (XSS)
• Using Components with Known Vulnerabilities
• Insufficient Logging & Monitoring.

Wij hebben in dit blogartikel enkele voorbeelden uitgewerkt:

Injection
In traditionele applicaties met HTML, CSS en Javascript ligt de verantwoordelijkheid volledig bij de ontwikkelaar om injecties af te vangen. Afgelopen jaren hebben wij dan ook gezien dat bijvoorbeeld cross-site scripting (XSS) nog steeds een hot topic is.

In moderne webapplicaties, waarbij gebruik wordt gemaakt van een UI framework zoals Angular, React of Vue, wordt cross-site scripting grotendeels geëlimineerd door invoer en uitvoer (zoals postcode, huisnummer, etc.) te valideren en filteren. Neem bijvoorbeeld de volgende Angular code snippet:

<h1> {{title}} </h1>

<h2> My favorite hero is: {{myHero}} </h2>

De front-end ontwikkelaar staat echter voor een uitdaging als er afgeweken moet worden van de standaard. Denk aan vrije tekstvelden met ‘rich content’ waarbij HTML-presentatie nodig is, maar ook als weer plain Javascript gebruikt wordt. Bijvoorbeeld:

document.querySelector('.tagline').innerHTML = window.location.href;

(XSS voorbeelden).

Enkele best practices waar de front-end ontwikkelaar minimaal aan moet denken:

• Het is belangrijk om frameworks en third party libraries up-to-date te houden;
• Maak gebruik van input ‘sanitization’;
• Maak gebruik van een Content Security Policy (CSP) om XSS-kwetsbaarheden zoveel mogelijk te elimineren.

Sensitive Data Exposure

De front-end ontwikkelaar zal net als een back-end ontwikkelaar rekening moeten houden met het onnodig vrijgeven van (vertrouwelijke) informatie. Enkele voorbeelden:

• Commentaarregels met gedetailleerde informatie. Bijvoorbeeld commentaar met een verwijzing naar een intern ticketing systeem en een stuk uitleg;
• Debugging functionaliteiten. Bijvoorbeeld het gebruik van console.log();
• Het lekken van vertrouwelijke informatie doordat er functionaliteiten en bestanden over HTTP worden ingeladen, in plaats van HTTPS;
• Het gebruik van client-side browser storage waarbij gegevens onveilig worden opgeslagen. Vaak is misconfiguratie het probleem. Bijvoorbeeld de opslag van sitevoorkeuren en het bijhouden van siteactiviteiten, waarbij de Secure attribuut vergeten is op cookie.

Enkele best practices:

• Maak gebruik van een framework waarbij commentaarregels worden ‘gestripped’. In Angular wordt dat bijvoorbeeld standaard gedaan door de applicatie in ‘productie’ modus te bouwen. In sommige gevallen is daar een third party dependency voor nodig;
• Maak gebruik van moderne IDE-tooling als ondersteuning om debugging functionaliteit te verwijderen;
• Stel de HttpOnly en Secure attribuut altijd in op cookies om te voorkomen dat lokaal opgeslagen gegevens onderschept en/of aangepast kunnen worden.

Using Components with Known Vulnerabilities

Het is belangrijk om alle front-end componenten up-to-date te houden. Maak hiervoor bijvoorbeeld gebruik van een package manager voor Javascript zoals NPM.

NPM heeft standaard een security audit module om gebruikers te helpen om (bekende) kwetsbaarheden te identificeren binnen dependencies en deze op te lossen.

Front-end security best practices

Er zijn een aantal algemene best practices waar je als front-end ontwikkelaar rekening mee kan houden om kwetsbaarheden te verminderen:

1. Code consistentie

Consistente code maakt het gemakkelijk voor mensen om te begrijpen hoe een programma werkt. Bij het lezen van consistente code vormt men onbewust een aantal aannames en verwachtingen over hoe de code werkt, zodat het gemakkelijker en veiliger is om er wijzigingen in aan te brengen.

Denk aan de indeling van de code en de leesbaarheid.

2. Frameworks

Frameworks veranderen en evolueren constant, daarom is het belangrijk om het framework en de bijhorende dependencies up-to-date te houden.

Moderne UI-frameworks zoals React, Vue en Angular bieden beveiligingsmaatregelen om risico’s zoals XSS-aanvallen grotendeels te elimineren. Maak zoveel mogelijk gebruik van ‘santization’ mogelijkheden om invoer te valideren en filteren.

3. Vermijd typische XSS-fouten

Hoewel het veel minder vaak voorkomt bij het gebruik van moderne Javascript frameworks, is het nog steeds mogelijk om onbedoelde XSS-fouten te introduceren. Probeer zo min mogelijk af te wijken van het gebruikte framework. Mocht dat nodig zijn, zorg dan dat er afdoende invoer validatie en filtering wordt ingebouwd.

4. Verwijder het vrijgeven van overbodige informatie

Verwijder commentaarregels uit productie builds. Voer lokale controles uit door bijvoorbeeld gebruik te maken van RetireJS. Maak gebruik van een IDE die security ondersteuning geeft bij het gebruik van commentaarregels en debugging functionaliteit.

5. Content Security Policy (CSP)

CSP is een extra beveiligingslaag die webdevelopers in staat stelt om beperkingen te definiëren op het gedrag van de website of applicatie. Bijvoorbeeld: vanaf welke externe locaties worden scripts, stylesheets of images ingeladen?

Een goed afgestelde CSP kan op die manier diverse aanvallen en kwetsbaarheden zoals cross-site scripting (XSS), data-injectie en andere soorten aanvallen voorkomen.

Controleer hier de configuratie van jou eigen CSP!

Conclusie

Voor veel organisaties wordt front-end security pas prioriteit als er een inbreuk op de beveiliging heeft plaatsgevonden.

Front-end security wordt daarvoor vaak niet serieus genoeg genomen. Toch zou dit wel prioriteit moeten hebben, omdat er veel aanvallen op (kunnen) plaatsvinden.