• Security Incident?
  • +31 88 000 2000
  • +31 88 000 2020
  • support@access42.nl
Access42 logoAccess42 logoAccess42 logoAccess42 logo
  • HOME
  • DIENSTEN
    • CYBER DEFENSE CENTER
      • Prepare
      • Detect
      • Prevent
      • Respond
      • Predict
    • DIENSTEN
      • Incident Response
      • Penetratietest (Pentest)
      • Red Teaming aanval
      • Cyber Security Assessment (CSA)
    • MANAGED SERVICES / OPLOSSINGEN
      • CyberTIM
        • CyberTIM Protect
        • CyberTIM Aware
        • CyberTIM Detect voor Microsoft 365
        • Container Security CSI.2030
      • Nessus
      • Active Directory Security
      • Vulnerability Management
        • Vulnerability Management
        • Web App Scanning
        • OT Security
      • Managed Detectie & Response (MDR / XDR)
        • Endpoint Detection & Response (EDR)
        • Mobile Threat Defense
        • Klaar om de controle over Microsoft (Office) 365-beveiliging terug te nemen?
        • AI-powered netwerk detectie en response
        • API Security
      • Phishing & Triage
      • Thinkst Canary
      • E-Mail Security, Continuity & Archiving
        • E-mail Security 3.0
      • Brand Exploit Protect
      • Delinea – Privileged Access Management
      • Security Monitoring / SOC
  • ACCESS42
    • Over ons
      • ISO/IEC 27001 certificering
      • Disclaimer & Privacy Policy
      • Klachtenprocedure
    • Werken bij Access42
    • Partners
  • EVENTS
  • NIEUWS
  • CONTACT
    • Contact
    • Inschrijven Nieuwsbrief
    • Incident Response
            No results See all results
            BUY NESSUS
            ✕
                      No results See all results
                      • Home
                      • Nieuws
                      • Nieuws
                      • Het belang van security als front-end ontwikkelaar (deel 1)

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

                      22 september 2020
                      Categories
                      • Nieuws
                      Tags
                      • front-end development
                      • security
                      code

                      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.

                      Delen
                      10

                      Related posts

                      31 mei 2023

                      De kracht van lengte: het geheim van sterke wachtwoorden


                      Read more
                      8 mei 2023

                      Private keys van hard- en softwareleverancier MSI gelekt


                      Read more
                      8 mei 2023

                      EDR, XDR, SOC, SIEM? Help!


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

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

                      Access42 B.V.
                      Leusderend 38
                      3832RC LEUSDEN

                      CyberDefense Center
                      • Prepare
                      • Detect
                      • Prevent
                      • Respond
                      • Predict
                      Diensten
                      • Phishing as a Service
                      • Penetratietesten
                      • Red Teaming
                      • Nessus
                      • Container Security
                      • OT Security
                      • Vulnerability Management
                      • AI-powered network detection and response
                      • E-mail security
                      • Alle Diensten
                      Over ons
                      • Over Access42
                      • Kernwaarden
                      • Missie en Visie
                      • Werken bij Access42
                      • Partners
                      • Disclaimer en Privacy Policy
                      • Responsible Disclosure
                      Get in touch

                      © 2023 Access42 | Cybersecurity. All Rights Reserved.
                      We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept All”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent.
                      Cookie SettingsAccept All
                      Manage consent

                      Privacy Overview

                      This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
                      Necessary
                      Altijd ingeschakeld
                      Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
                      CookieDuurOmschrijving
                      _GRECAPTCHA5 months 27 daysThis cookie is set by Google. In addition to certain standard Google cookies, reCAPTCHA sets a necessary cookie (_GRECAPTCHA) when executed for the purpose of providing its risk analysis.
                      cookielawinfo-checkbox-advertisement1 yearThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Advertisement".
                      cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
                      cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
                      cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
                      cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
                      cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
                      CookieLawInfoConsent1 yearRecords the default button state of the corresponding category & the status of CCPA. It works only in coordination with the primary cookie.
                      viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
                      Functional
                      Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
                      CookieDuurOmschrijving
                      bcookie2 yearsThis cookie is set by linkedIn. The purpose of the cookie is to enable LinkedIn functionalities on the page.
                      langsessionThis cookie is used to store the language preferences of a user to serve up content in that stored language the next time user visit the website.
                      lidc1 dayThis cookie is set by LinkedIn and used for routing.
                      Performance
                      Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
                      CookieDuurOmschrijving
                      YSCsessionThis cookies is set by Youtube and is used to track the views of embedded videos.
                      Analytics
                      Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
                      CookieDuurOmschrijving
                      _ga2 yearsThis cookie is installed by Google Analytics. The cookie is used to calculate visitor, session, campaign data and keep track of site usage for the site's analytics report. The cookies store information anonymously and assign a randomly generated number to identify unique visitors.
                      _gat_gtag_UA_116473530_11 minuteThis cookie is set by Google and is used to distinguish users.
                      _gat_UA-116473530-11 minuteThis is a pattern type cookie set by Google Analytics, where the pattern element on the name contains the unique identity number of the account or website it relates to. It appears to be a variation of the _gat cookie which is used to limit the amount of data recorded by Google on high traffic volume websites.
                      _gid1 dayThis cookie is installed by Google Analytics. The cookie is used to store information of how visitors use a website and helps in creating an analytics report of how the website is doing. The data collected including the number visitors, the source where they have come from, and the pages visted in an anonymous form.
                      Advertisement
                      Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
                      CookieDuurOmschrijving
                      bscookie2 yearsThis cookie is a browser ID cookie set by Linked share Buttons and ad tags.
                      IDE1 year 24 daysUsed by Google DoubleClick and stores information about how the user uses the website and any other advertisement before visiting the website. This is used to present users with ads that are relevant to them according to the user profile.
                      prism_4768097571 monthUsed by ActiveCampaign to track usage of newsletters
                      test_cookie15 minutesThis cookie is set by doubleclick.net. The purpose of the cookie is to determine if the user's browser supports cookies.
                      VISITOR_INFO1_LIVE5 months 27 daysThis cookie is set by Youtube. Used to track the information of the embedded YouTube videos on a website.
                      yt-remote-connected-devicesneverYouTube sets this cookie to store the video preferences of the user using embedded YouTube video.
                      yt-remote-device-idneverYouTube sets this cookie to store the video preferences of the user using embedded YouTube video.
                      Others
                      Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
                      CookieDuurOmschrijving
                      AnalyticsSyncHistory1 monthNo description
                      CONSENT16 years 7 months 5 days 13 hoursNo description
                      li_gc2 yearsNo description
                      UserMatchHistory1 monthLinkedin - Used to track visitors on multiple websites, in order to present relevant advertisement based on the visitor's preferences.
                      OPSLAAN & ACCEPTEREN
                      Aangedreven door CookieYes Logo
                      Aanvraag CyberTIM Detect voor Microsoft 365 Trial

                        Download de gratis whitepaper!

                         

                          Inschrijven Webinar Vectra

                            Inschrijving Webinar Cofense

                              Inschrijven Webinar CrowdStrike

                                Start de Mimecast Service vandaag nog!

                                  Start met de Cognito Detect for Microsoft 365 Free Service

                                    Download de Tenable.OT Solution Brief

                                    Name *

                                    Email *


                                    Prijslijst aanvragen

                                     

                                      Meer weten over onze diensten?