3 Jeppe Falk Leth
Jeppe Falk Leth

Hej, mit navn er

Jeppe Falk Leth.

Datamatiker studerende

Min LinkedIn profil Min Github profil

Hvem er jeg?

Personlige oplysninger

Profil billede
Experience icon

Erfaringer

+2 års erfaring med
programmering og systemudvikling.
Bred forståelse for software og hardware.

Education icon

Uddannelse

Folkeskole 0-9 klasse - Assenskolen
3 årig HHX - Vestfyns Gymnasium
Datamatiker - UCL (Igangværende)

Jeg er Datamatikerstuderende på UCL med en passion for programmering, systemudvikling og projektledelse. Gennem mit studie forsøger jeg at opnå en forståelse og tilegne mig erfaring indenfor softwarearkitektur, frontend- og backendudvikling samt IT-sikkerhed.

Ved siden af mine studier arbejder jeg i Click&Collect hos Power Odense, hvor jeg sætter stor fokus på god service og tilfredse kunder. Jeg bruger meget tid med software og it og ønsker at kombinere mine tekniske færdigheder med en forståelse for brugervenlige og effektive løsninger.


4. Semester

Jeg har valgt at specialisere mig inden for IT-sikkerhed og webudvikling, da disse emner både udfordrer min tekniske viden og giver mig mulighed for at udvikle nye færdigheder. IT-sikkerhed er et område, der konstant udvikler sig og fascinerer mig, især med hensyn til at opdage og forebygge cybertrusler.

Webudvikling har jeg valgt da jeg her kan fordybe mig i almen udvikling, i håb om at opnå dybere forståelse for andre udviklingssprog- og metoder.

Langsigtede

Læringsmål

Webudvikling

  • Viden
  • Forståelse for hvordan JavaScript styrer DOM, events og interaktivitet.
  • Forstå betydningen af UI-feedback og visuelle brugergrænseflader
  • Opnå forståelse for de forskellige frameworks og libraries, der anvendes til webudvikling
  • Kan forstå eksisterende JavaScript scripts og identificere funktioner
  • Forståelse for HTML strukturen mhp. at udarbejde et miljø for JavaScript metoder.
  • Kan forklare, beskrive og begrunde for valg af metoder i JavaScript
  • Opnå kendskab til JavaScript med henblik på nemmere at lære andre udviklingssprog

  • Færdigheder
  • Implementere inputvalidering til kontrol af brugerens input.
  • Vise beskeder, fejl eller loading states for at sikre tydelig brugerfeedback og forbedre brugeroplevelsen
  • Debugge en webside vha. browser DevTools.
  • Kan udvikle en webside vha. JavaScript, HTML og CSS.

  • Kompetencer
  • Opretholde ren projektstruktur ved overholdelse af SoC (Seperation of Concerns)
  • Kan navigere og arbejde i en webside udviklet i JavaScript
  • Kan udvikle en interaktiv og visuelt responsiv UI med JavaScript og CSS

IT-Sikkerhed

  • Viden
  • Forklare typiske sårbarheder som XSS og SQL Injection samt hvordan de udnyttes.
  • Forklare formålet med cookie-samtykke og GDPR-hensyn i frontend.
  • Kende mekanismen bag JWT-baseret autentifikation og Base64-hashing.
  • Færdigheder
  • Sanitere brugerinput i JavaScript for at neutralisere XSS-payloads.
  • Bruge parameteriserede SQL-queries/placeholder-mønstre mod injection.
  • Bygge et simpelt login-flow med hash-tjek og generering af JWT-tokens.
  • Opsætte HTTPS med TLS-certifikat og HSTS-header.
  • Kompetencer
  • Manglende kompetencer bliver tilføjet...
  • Manglende kompetencer bliver tilføjet...
  • Manglende kompetencer bliver tilføjet...

Læringsplan for hvert

Sprint

1. Sprint

10 februar - 21. februar

Læringsmål

At opnå en grundlæggende forståelse af React ved at lære at opbygge komponenter, arbejde med JavaScript teknikker og anvende CSS til styling, derudover bygger jeg sideløbende min portfølge.

Aktiviteter

  • Forstå React-library
  • Forståelse for components i React
  • Arbejde med JavaScript teknikker
  • Anvende CSS til styling

Dagsplan (hverdage)

  • 09:00–10:00 React
  • 10:00–10:15 Pause
  • 10:15–11:30 Webudvikling
  • 11:30–12:00 Frokost
  • 12:00–13:00 Afrunding

Logbog

I denne uge vil jeg arbejde med at lære React. Jeg følger React quickguide (se ressourcer) og vil arbejde med at opbygge en simpel applikation. Jeg vil med fokus på første sprints aktiviteter, opnå viden for hver af mine delmål.

Evalueringer

Det første sprint har budt på både op- og nedture. For mit vedkommende havde jeg svært ved at komme i gang med IT-sikkerhed og fokuserede stort set kun på React. Jeg skal blive bedre til at strukturere mit arbejde og skelne tydeligere mellem mine to emner for at opnå en god forståelse af begge områder.

2. Sprint

24 februar - 7. marts

Læringsmål

2. Sprints hovedformål er at opnå en dybere forståelse for IT-sikkerhed med det mål at opstarte et IT-sikkerhedskursus gennem TryHackMe’s interaktive kurser. Derudover vil jeg arbejde videre med React. Ved at følge Scrimba’s JavaScript-kursus får jeg hands-on erfaring og mulighed for at arbejde i praksis.

Aktiviteter

  • Opnå en forståelse af IT-Sikkerhed
  • Arbejde videre med webudvikling
  • Udarbejde en frontend platform for Optilogic projektet (se produkter)

Dagsplan (hverdage)

  • 09:00–10:00 Webudvikling
  • 10:00–10:15 Pause
  • 10:15–11:30 IT-Sikkerhed
  • 11:30–12:00 Frokost
  • 12:00–13:00 Afrunding

Logbog

I dette sprint vil jeg arbejde med IT-sikkerhed og webudvikling. Jeg vil forsøge at forbedre min struktur og fokusere på at opnå en dybere forståelse for begge emner. Jeg vil arbejde med at implementere en frontend i vores projekt og samtidig opstarte et IT-sikkerhedskursus.

Evalueringer

To uger hvor jeg igen har haft meget fokus på webudvikling. Dog skal det siges at jeg er begyndt at få en forståelse for IT-sikkerhed og har opstartet et kursus. Jeg har arbejdet med at implementere en frontend i vores projekt og har fået en dybere forståelse for html, css og JavaScript.

3. Sprint

10 marts - 21. marts

Læringsmål

Gennemgå TryHackMe’s interaktive kursus hvor jeg får en struktureret og dybdegående gennemgang af Cyber Security. Det indebærer Computer networking and cryptography - MS Windows, Active Directory, and Linux basics - Offensive security tools and system exploitation - Defensive security solutions and tools - Cyber security careers.

Aktiviteter

  • TryHackMe's interaktive kursus
  • Free JavaScript Tutorial

Dagsplan (hverdage)

  • 09:00–10:00 IT-Sikkerhed
  • 10:00–10:15 Pause
  • 10:15–11:30 IT-Sikkerhed
  • 11:30–12:00 Frokost
  • 12:00–14:00 Udvikling i React

Logbog

I dette sprint opdeler jeg med vilje min tid mellem IT-sikkerhed og webudvikling. Dette for at opnå en dybere forståelse for begge emner. Jeg vil arbejde med at implementere React i vores projekt og samtidig gennemgå TryHackMe’s interaktive kursus.

Evalueringer

3. Sprint har givet mig et godt indblik i IT-sikkerhed. Jeg følger det interaktive kursus fra TryHackMe hver dag, hvilket giver mig praktisk erfaring og mulighed for at afprøve forskellige aspekter af cybersikkerhed. Samtidig har jeg fortsat arbejdet på vores projekt hos Optilogic. Jeg arbejder utroligt meget på min portfølge da det i og for sig også er mit produkt for webudvikling.

4. Sprint

24 marts - 4 april

Læringsmål

Forsætte på TryHackMe's interaktive kursus, blandt andet Windows Fundamentals, Command Line og Networking. Fortsætte på webudvikling og arbejde videre med frontenden hos Optilogic. Jeg arbejder hele tiden med HTML, CSS og JavaScript igennem udarbejdelsen af min portfølje.

Aktiviteter

  • Cyber Security 101
  • Free JavaScript Tutorial
  • HTML Tutorial
  • CSS Tutorial
  • JavaScript Tutorial

Dagsplan (hverdage)

  • 09:00–10:00 IT-Sikkerhed
  • 10:00–10:15 Pause
  • 10:15–11:30 IT-Sikkerhed
  • 11:30–12:00 Frokost
  • 12:00–14:00 Webudvikling

Logbog

Jeg fortsætter på TryHackMe's interaktive kursus og arbejder videre med webudvikling.

Evalueringer

Meget stillestående sprint. Vi mangler stadig svar fra PO om, hvorvidt vi har mulighed for at få et kamera ud på en havn. Det har gjort, at vi desværre har været holdt tilbage på projektet, som har sat et spænd omkring, hvor meget vi hver især har kunnet arbejde med for projektet hos Optilogic. Med det sagt har jeg kigget meget på JavaScript, som jeg har siddet med stort set hver dag. Jeg har haft en del mere fokus på webudvikling, end jeg har haft på IT-sikkerhed dette sprint. Det er taget til efterretning, og jeg vil igen begynde at arbejde mere med IT-sikkerhed i de kommende uger.

5. Sprint

7 april - 18 april

Læringsmål

I dette sprint står vi overfor nogle ændringer i vores projekt. Vi har været på standby, da vi har ventet på at få et kamera ud på en havn og derfor ikke kunne komme videre med projektet for Optilogic. Vi afventer egentlig bare PO. Jeg skal finde ud af, hvordan jeg kan implementere IT-sikkerhed for det nye projekt. Umiddelbart beholder vi idéen om en parkeringsplads, men fokuserer på at lave det ud fra en parkeringsplads frem for en havn. Det gør det nemmere at finde dataen, som de i teamet, der har machinelearning, skal bruge. Det gør, at jeg forhåbentlig snart ved, hvor jeg skal begynde at implementere IT-sikkerhed.

Aktiviteter

  • Finde IT-sikkerheds materiale der passer til projektet
  • Free JavaScript Tutorial
  • JavaScript gennemgang med w3schools

Dagsplan (hverdage)

  • 09:00–10:00 IT-Sikkerhed
  • 10:00–10:15 Pause
  • 10:15–11:30 IT-Sikkerhed
  • 11:30–12:00 Frokost
  • 12:00–14:00 Webudvikling

Logbog

Jeg fortsætter på TryHackMe's interaktive kursus og arbejder videre med React.

Evalueringer

Første uge af 5. sprint var vi meget presset på vores projekt. Vi har stadig ingen svar fået fra PO hvilket har ført til at vi hver især laver lidt individuelle projekter for tiden. Ift ITSikkerhed vil jeg prøve på at lave nogle forskellige små produkter som afspejler itsikkerhed. Så kan jeg både arbejde med noget JavaScript og IT-Sikkerhed sammen. Indtil vi høre mere har vi ikke rigtigt andre projekter for semesteret. Anden uge af 5. sprint gik med at holde påskeferie og søge praktik.

6. Sprint

21 april - 2 maj

Læringsmål

6. Sprint fokusere jeg udelukkende på min egen udvikling. Jeg fokusere indtil videre, ikke mere på projektet, før vi hører noget fra PO. Problemet med at vi ingen svar får, er at vi faktisk ikke har et rigtigt produkt. Lige nu egentlig bruger vi dummydata, og næste step i projektet er at få det implementeret et sted, vi rent faktisk kan få lov til at arbejde på, så vi kan indsamle noget rigtig data.

Aktiviteter

  • Finde frem til IT-Sikkerheds relateret produkter
  • Få lagt produkter ind på min portfølge
  • Læse op på IT-Sikkerheds principper
  • Fortsætte arbejdet med HTML, CSS og JavaScript

Dagsplan (hverdage)

  • 09:00–10:00 IT-Sikkerhed
  • 10:00–10:15 Pause
  • 10:15–12:00 IT-Sikkerhed
  • 12:00–12:30 Frokost
  • 12:30–14:30 Webudvikling

Logbog

Jeg går efter at få lidt afveksling i min hverdag, så jeg ikke udelukkende låser mig fast på interaktive kurser som TryHackMe's. Jeg vil ud og søge efter flere kilder.

Evalueringer

Jeg har desværre været meget presset med praktiksøgning dette sprint. Jeg har dog formået at få udarbejdet nogle prøv selv knapper på min portfølge som dækker begge mine emner. Projektet hos optilogic er stadig i stå, da vi ikke har fået svar fra PO. Det er meget frustrerende, da vi ikke rigtig kan komme videre med projektet. Vi er dog hver i sær begyndt at lave egne små projekter.

7. Sprint

5 maj - 16 maj

Læringsmål

Jeg vil fokusere på at finde IT-sikkerheds relateret produkter og få dem lagt ind på min portfølje. Det styrker både min portfølje og min forståelse for IT-sikkerhed og for webudvikling. Jeg gør det i og med vores projekt hos Optilogic er gået helt i stå. Så jeg kommer til at sidde med egne projekter i stedet for.

Aktiviteter

  • Finde frem til itsikkerheds relevante projekter
  • Få lagt produkter ind på min portfølge
  • Vise koden bag de produkter jeg udarbejder

Dagsplan (hverdage)

  • 09:00–10:00 IT-Sikkerhed
  • 10:00–10:15 Pause
  • 10:15–12:00 IT-Sikkerhed
  • 12:00–12:30 Frokost
  • 12:30–14:30 Webudvikling

Logbog

Jeg har kigget meget på egne produkter dette sprint.

Evalueringer

I dette sprint har jeg haft stort fokus på at lave en masse produkter samt at dokumentere dem på en måde, så man kan se, hvordan de er blevet lavet. Jeg skal have rettet lidt i nogle af de produkter, jeg lavede helt i starten – i de første sprints. Derudover føler jeg, at der er kommet meget afklaring i forhold til eksamen, hvilket har givet mig ro og fokus på det, jeg skal lave her til sidst. Jeg skal her til sidst have lagt de sidste produkter ind, og så skal jeg have færdiggjort det login-system, jeg er ved at arbejde med, hvor jeg viser en del IT-sikkerhed. Det indebærer en hashing-algoritme (Argon2). Jeg har lavet noget rate limiting og lockout, session- og cookie-sikkerhed, CSRF-beskyttelse – det er, hvad jeg har lavet indtil nu – så det skal afsluttes og dokumenteres.

8. Sprint

19 maj - 30 maj

Læringsmål

Jeg skal her til sidst have lagt de sidste produkter ind, og så skal jeg have færdiggjort det login-system, jeg er ved at arbejde med, hvor jeg viser en del IT-sikkerhed. Det indebærer en hashing-algoritme (Argon2). Jeg har lavet noget rate limiting og lockout, session- og cookie-sikkerhed, CSRF-beskyttelse – det er, hvad jeg har lavet indtil nu – så det skal afsluttes og dokumenteres. Jeg udarbejder samtidig også et form for landkort over min portfølge, hvor jeg dækker min front-end, back-end og hvad der ellers er af sammenhæng.

Aktiviteter

  • Færdiggøre min produktsektion

Dagsplan (hverdage)

  • 09:00–10:00 IT-Sikkerhed
  • 10:00–10:15 Pause
  • 10:15–12:00 IT-Sikkerhed
  • 12:00–12:30 Frokost
  • 12:30–14:30 Webudvikling

Logbog

Evalueringer

Evalueringer givet på baggrund af sprintets afslutning.

Ugenlig logbog for

4. Semester

React logo

1. sprint

10 - 21 februar
At opnå en grundlæggende forståelse af React ved at lære at opbygge komponenter, arbejde med JavaScript teknikker og anvende CSS til styling, derudover bygger jeg sideløbende min portfølge.
  • I dag og de næste par dage vil jeg arbejde med at lære React. Jeg følger React quickguide (se kilde) og vil arbejde med at opbygge en simpel applikation. Learn React
  • Forsættelse fra dagen før... Learn React
  • Forsættelse fra dagen før... Learn React
  • Forsættelse fra dagen før... Learn React
  • Forsættelse dagen før, afrunding af ugen. Learn React
  • Jeg forsætter med at fordybe mig i React og samtidig få et overblik over IT-Sikkerhed. Learn React
  • Jeg forsætter med at fordybe mig i React og samtidig få et overblik over IT-Sikkerhed. Learn React
  • Jeg forsætter med at fordybe mig i React og samtidig få et overblik over IT-Sikkerhed. Learn React
  • Jeg forsætter med at fordybe mig i React og samtidig få et overblik over IT-Sikkerhed. Learn React
  • Jeg forsætter med at fordybe mig i React og samtidig få et overblik over IT-Sikkerhed. Learn React
React logo

2. Sprint

24 februar - 7 marts
Opnå en dybere forståelse for IT-sikkerhed med det mål at opstarte et IT-sikkerhedskursus gennem TryHackMe’s interaktive kurser. Derudover vil jeg arbejde videre med React. Ved at følge Scrimba’s JavaScript-kursus får jeg hands-on erfaring og mulighed for at arbejde i praksis.
  • Sygdom Learn React
  • Sygdom Learn React
  • Sygdom Learn React
  • Sygdom Learn React
  • Sygdom Learn React
  • Jeg forsætter med at fordybe mig i webudvikling og samtidig få et overblik over IT-Sikkerhed. Learn React
  • Jeg forsætter med at fordybe mig i webudvikling og samtidig få et overblik over IT-Sikkerhed. Learn React
  • Jeg forsætter med at fordybe mig i webudvikling og samtidig få et overblik over IT-Sikkerhed. Learn React
  • Jeg forsætter med at fordybe mig i webudvikling og samtidig få et overblik over IT-Sikkerhed. Learn React
  • I dag var vi ude hos productowner Optilogic. Vi fandt sammen ud af at frontenden skulle have en kærlig hånd. Derudover skal vi lære igennem machinelearning at forudsige hvornår der er vand og hvornår der ikke er.
React logo

3. Sprint

10 - 21 marts
Gennemgå TryHackMe’s interaktive kursus hvor jeg får en struktureret og dybdegående gennemgang af Cyber Security. Det indebærer Computer networking and cryptography - MS Windows, Active Directory, and Linux basics - Offensive security tools and system exploitation - Defensive security solutions and tools - Cyber security careers.
  • Dagen i dag er gået med opstart af TryHackMe’s interaktive kursus. Jeg har gennemgået en introduktion, hvor man kommer igennem Offensive Security Intro og Defensive Security Intro – som introducerer en til forskellige emner inden for IT-Sikkerhed. Derudover er jeg fortsat med React. Cyber Security 101
  • I dag er jeg fortsat med THM's kursus. Jeg har gennemgået Search Skills for at lære, hvordan man bedst optimerer sin søgning efter information vha. specielle søgemaskiner. Cyber Security 101
  • Dagen i dag gik på at optimere min portefølje vha. HTML, CSS og JavaScript. Jeg har opdateret forskellige sektioner for at gøre siden mere informativ og klar til processmøde.
  • Dagen i dag er fortsat gået med THM's kursus. Jeg har gennemgået Linux Fundamentals part 1 og 2. I dette kursus lærer man, hvordan man bruger Linux gennem terminalen og benytter forskellige kommandoer – eksempelvis at tilkoble sig en anden virtuel maskine og/eller finde filer uden et GUI. Cyber Security 101
  • Fridag.
  • I dag var projektgruppen til produktvejledning, og det meste af dagen gik med at forberede til mødet.
  • I dag fortsatte jeg på Linux Fundamentals part 3, hvilket tog længere tid end forventet, men nu er den gennemgået. Dermed er Linux Fundamentals fuldt gennemgået, og jeg kan gå videre til næste emne.
  • Dagen i dag gik med at oprette en model i Figma, hente den som SVG og implementere den i vores React-projekt for Optilogic. Vi har møde med productowner fredag og skal forbedre UI'en og sikre, at vi får forbindelse til vores API.
  • I dag gik dagen med Erfa-møder. Der var møder for både IT-Sikkerhed og Webudvikling.
  • Dagen i dag gik ude hos productowner, som var tilfreds med arbejdet. Vi venter nu på, at PO får sat et kamera op nede på Odense Havn, så vi kan afprøve i praksis.
React logo

4. Sprint

24 marts - 4 april
Forsætte på TryHackMe's interaktive kursus, blandt andet Windows Fundamentals, Command Line og Networking. Fortsætte på webudvikling og arbejde videre med frontenden hos Optilogic. Jeg arbejder med HTML, CSS og JavaScript igennem udarbejdelsen af min portfølje.
  • Fridag.
  • Hele dagen i dag er gået med optimering og opdatering af min portefølje. Jeg har opdateret mine sprints, tilføjet nye projekter og opdateret min logbog.
  • Eksamensforudsætning.
  • I dag kiggede jeg udelukkende på JavaScript da det er en stor del af webudvikling og samtidig her jeg føler, at jeg gerne vil styrkes endnu mere. W3 Schools JavaScript
  • Fridag.
  • Noterne bliver meget ensformet og jeg har svært ved at sætte nye ord på det jeg laver. Jeg laver ærligt talt det samme hver dag, men selvfølgelig hvor jeg lærer noget nyt. Jeg har atter engang kigget på JavaScript. Det er et kæmpe stort emne og der er mange forskellige ting at tage fat i. JavaScript, JavaScript, JavaScript.
  • JavaScript, JavaScript, JavaScript.
  • JavaScript, JavaScript, JavaScript.
  • JavaScript, JavaScript, JavaScript.
  • Fridag.
React logo

5. Sprint

7 april - 18 april
I dette sprint står vi overfor nogle ændringer i vores projekt. Vi har været på standby, da vi har ventet på at få et kamera ud på en havn og derfor ikke kunne komme videre med projektet for Optilogic. Vi afventer egentlig bare PO. Jeg skal finde ud af, hvordan jeg kan implementere IT-sikkerhed for det nye projekt.
  • Ugen er startet og jeg fortsætter hvor jeg slap. Grunden til at jeg fokusere så meget på JavaScript er at det er selve funktionaliteten bag webudvikling og frontend. Cyber Security 101
  • Dagene er meget ens for tiden. Jeg læser meget op på JavaScript men har svært ved at holde koncentrationen for IT-Sikkerhed. Det skyldes primært at vores projekt igennem Optilogic er gået meget i stå. Så jeg står lige nu med følelsen af at jeg har svært ved at finde frem til produkter. Cyber Security 101
  • I dag har jeg brugt dagen på nogle forskellige projekter igennem roadmap.sh. Roadmap.sh er en interaktiv guide til at lære forskellige programmeringssprog og frameworks, derudover kan man finde forskellige tests, hvor man kan teste sig selv i at lave forskellige projekter. I dag har jeg lavet nogle forskellige projekter derfra. Roadmaps
  • Cyber Security 101
  • I dag går turen til Århus, for at besøge en virksomhed til praktik. Cyber Security 101
  • Påskeferie & praktiksøgning. Cyber Security 101
  • Påskeferie & praktiksøgning. Cyber Security 101
  • Påskeferie & praktiksøgning. Cyber Security 101
  • Påskeferie & praktiksøgning. Cyber Security 101
  • Påskeferie & praktiksøgning. Cyber Security 101
React logo

6. Sprint

21 april - 2 maj
Jeg fokusere udelukkende på min egen udvikling. Jeg fokusere indtil videre, ikke mere på projektet, før vi hører noget fra PO. Problemet med at vi ingen svar får, er at vi faktisk ikke har et rigtigt produkt. Lige nu egentlig bruger vi dummydata, og næste step i projektet er at få det implementeret et sted, vi rent faktisk kan få lov til at arbejde på, så vi kan indsamle noget rigtig data.
  • Dagen i dag er brugt på at forbedre min praktikansøgning og finde virskomheder til praktik.
  • I dag har jeg lagt kræfter i at udarbejde nogle interaktive knapper på hjemmesiden her. Det viser at jeg har forståelse for itsikkerhed men også udviklingsdelen. Det giver også personer, der ser min portfølge en mulighed for at se hvad jeg kan, gennem interaktive knapper.
  • Jeg har arbejdet videre med mine produkter. Jeg har tilføjet Authentication, XSS & SQL Injection. Authentication viser hvordan der ved login af en profil bliver sendt en token til serveren. Jeg laver en Base64‑“hash” for at give et indblik bagved et login. XSS testen viser at man ikke kan indsætte et script tag i et input felt, da jeg har erstattet med entiteter. Så vi undgår ondsindet kode køre på siden. SQL injection testen viser at hvis der bliver kørt en payload i vores input. Så bruger jeg ? som pladsholder, og egentlig sender brugerens input som ren data. Det vil sige 1 OR 1=1 kun kan blive vist som tekst, aldrig ændring af en kommando.
  • Jeg har arbejdet videre med mine produkter. Jeg har tilføjet Authentication, XSS & SQL Injection. Authentication viser hvordan der ved login af en profil bliver sendt en token til serveren. Jeg laver en Base64‑“hash” for at give et indblik bagved et login. XSS testen viser at man ikke kan indsætte et script tag i et input felt, da jeg har erstattet med entiteter. Så vi undgår ondsindet kode køre på siden. SQL injection testen viser at hvis der bliver kørt en payload i vores input. Så bruger jeg ? som pladsholder, og egentlig sender brugerens input som ren data. Det vil sige 1 OR 1=1 kun kan blive vist som tekst, aldrig ændring af en kommando.
  • Produkterne er tilføjet og jeg arbejder videre med dem og brainstormer nye ideer til nye produkter.
  • Jeg skal have opdateret mine proukter med alle mine noter og alt koden der ligger bag blandt andet de interaktive knapper men også hele hjemmesiden.
React logo

7. Sprint

5 maj - 16 maj
Jeg vil fokusere på at finde IT-sikkerheds relateret produkter og få dem lagt ind på min portfølje. Det styrker både min portfølje og min forståelse for IT-sikkerhed og for webudvikling. Jeg gør det i og med vores projekt hos Optilogic er gået helt i stå. Så jeg kommer til at sidde med egne projekter i stedet for.
  • I dag var vi til ERFA møde på skolen. Vi kom frem til at det nok var en god i det at få lavet nogle produkter individuelt, og så eventuelt sparre med hinanden.
  • Opdateret min portfølge.
  • I dag har jeg arbejdet i at tilføje produkter til min portfølge. Ikke så meget nye proukter men mere koden bag de eksisterende produkter. Jeg sidder og repitere meget af webudviklings koncepter og til dels også itsikkerhed. Så jeg føler egentlig det kører meget godt. Jeg mangler lidt flere læringsmål, og ellers klør jeg bare på.
  • Jeg har tilføjet flere læringsmål. Læringsmål der dækker de kompetencer jeg har tilegnet mig henover 4. semester. Jeg mangler stadig at finde de sidste læringsmål for IT-Sikkerhed. Derudover har jeg brugt meget tid på at optimere min portfølge.
  • Jeg har i dag rettet i min logbog og fået det til at passe mine sprints. Dagene går på meget sideoptimering.
  • Jeg har i dag lavet et nyt produkt. Jeg har lavet en knap "Fold et papir til månen", knappen her åbner et overlay, i det overlay vil jeg vise at jeg kan vha. knapper navigere igennem billeder med tilhørende tekst og ideer, så hvert tekst er forbundet til et billede. Jeg har lavet en list hvor hver billede har en tilhørende tekst, og det er så den list man kører igennem. Derudover er det også lærigt.
  • Jeg har arbejdet videre på "Fold et papir til månen", ikke at der er sindsygt meget at gøre, men det tager lidt tid lige så snart det grundlæggende er på plads.

Prøv selv

Tilføj cookies Tilføj cookies
Login, XSS & SQL‑injektion Login, XSS & SQL‑injektion
Test adgangskode‑styrke Test adgangskode‑styrke
Paper folder Fold et papir til månen
Password game Adgangskode-spillet

Indblik i igangværende

Produkter

Optilogic

Klik for at åbne ⭣

Indblik i vores projekt hos Optilogic (frontend og machinelearning)

Februar 2025 - 2. Sprint

Opstart af projekt – fastlæggelse af scope og begyndelse på en frontend over en parkeringsplads.

Vi er i gang med at udvikle en frontend, der skal vise ledige og optagede pladser på en havneplads. Teamet er opdelt, ud fra vores selvvalgte emner, så vi samarbejder og varetager forskellige roller. Jeg har ansvaret for at udvikle frontenden og for at inkorporere IT-sikkerhed, mens resten af teamet arbejder med backend, database og DevOps.

Optilogic Start Optilogic Start Optilogic Start Optilogic Start
Marts 2025 - 3. Sprint

Grundlæggende UI er nu på plads. Jeg har designet en model af Odense Havn i Figma og derefter overført den som en SVG til vores React-projekt. På den måde kan jeg tilføje en onClick-metode, så hver enkelt bådplads kan interageres med.

Optilogic UI i marts Optilogic UI i marts

TryHackMe

Klik for at åbne ⭣

Indblik i TryHackMe's interaktive kursus og badges dertil.

Marts 2025 - 3. Sprint

Jeg er i gang med TryHackMe’s interaktive kursus for at opnå en dybere forståelse af IT-sikkerhed. Med en bred introduktion som udgangspunkt er målet at indsnævre fokusområdet, så det giver bedre mening i forhold til vores projekt hos Optilogic Opstart af It-sikkerhed. Første badges er hentet.

tryhackme Start

Her har jeg startet en virtuel Linux maskine. Jeg kører kommandoen ps aux, for at se hvilke processer der er blevet kørt af hvilke brugere.

tryhackme Start Jeg har vedhæftet mine noter til første del af TryHackMe's del. tryhackme tryhackme tryhackme tryhackme tryhackme tryhackme tryhackme tryhackme tryhackme tryhackme tryhackme tryhackme tryhackme tryhackme

Tilføj cookie

Klik for at åbne ⭣

Indblik i hvad der skal til, for at lave en simpel cookie popup.

April 2025 - 6. Sprint

Det første, jeg gør, er at oprette en ny section med id’et andre-produkter. Dette ersimpel HTML-opstilling og tillader mig at skabe et overblik over sektionen og tilpasse CSS’en til det. Herefter har jeg tilføjet nogle div med classer, så jeg kan ramme de enkelte klasser i CSS’en. Img er for at tilføje billederne til knapperne. Ellers er der bare tilføjet noget simpelt tekst for at fortælle, hvad det er for en knap.

cookie Start

Det næste, der sker, er, at jeg har tilføjet et id, som jeg skal bruge til at oprette noget JavaScript-funktionalitet. Derudover har jeg tilføjet nogle classer, et billede og den tekst p, der skal stå inde i popupen.

cookie Start

Nedenstående, vi ser nu, er den tilhørende CSS, jeg bruger til at style min popup og alt, hvad den indebærer. Det er blandt andet baggrundsfarven, hvor på skærmen den skal være, størrelsen på den, selve cookie-billedet, knappen for at acceptere cookies og luk-knappen.

cookie Start cookie Start

Der er ingen funktionalitet bag knappen, andet end at den blot er visuel og åbner og lukker ved tryk. Det, der sker her, er, at jeg først og fremmest skal ramme den her popup. Det gør jeg ved at hente de forskellige id’er med document.getElementById(). Ud fra det laver jeg en funktion, hvor jeg siger, at display = ‘none’. Popupen bliver egentlig vist hele tiden, men jeg har gjort den ikke synelig. Så tilføjer jeg en EventListener med en click-funktion, som går ind og blokerer den her display, der før var none. Nu bliver den vist. Resten giver lidt sig selv. console.log er for, at jeg selv kan se i konsollen, hvad der bliver klikket på.

cookie Start

Simulere login-flow

Klik for at åbne ⭣

Indblik i, hvad der skal til for at lave en popup, hvori jeg kan vise brugere, hvordan et login-hash (Base64→JWT) fungerer i praksis.

Maj 2025 - 7. Sprint

Det første, jeg gør, er at oprette en ny section med id’et andre-produkter. Dette er simpel HTML-opstilling og tillader mig at skabe et overblik over sektionen og tilpasse CSS’en til det. Herefter har jeg tilføjet nogle div med classer, så jeg kan ramme de enkelte klasser i CSS’en. Img er for at tilføje billederne til knapperne. Ellers er der bare tilføjet noget simpelt tekst for at fortælle, hvad det er for en knap.

cookie Start

Først implementere jeg Login-simulatoren i HTML, jeg har her lavet 2 input felter med id'er så de matcher til et username og et password. Forskellen er at password er af typen password, så det bliver skjult. Placeholderen er for at give brugeren et hint til hvad der skal skrives i felterne. Dernæst kalder jeg en onclick funktion, som hedder simulateLogin(). Det er den funktion, der bliver kaldt når brugeren klikker på Log ind knappen. Jeg har så en paragraph der spytter det input ud, der afhænger af hvilke mail og kode der bliver skrivet ind i input felterne. Klassen security-steps er her hvor jeg, for god ordens skyld, forklare og vejlederen brugeren til hvad der sker i de forskellige steps. Til sidst afunder jeg med en forklaring af hvad det egentlig er der sker her. cookie Start Efter jeg har implementeret HTLM delen, går jeg videre til JavaScript delen. Jeg opretter den her simulateLogin funktion, som indeholder følgende. Det første jeg gør er at finde HTML-elementerne med id'erne sec-username og sec-password. Det gør jeg ved at bruge document.getElementById(). Derefter definerer jeg en btoa() browser-funktion, som er en Base64-encoder. Det vil sige at den tager det input der kommer fra brugeren og encoder det til Base64. OBS: Dette er ikke en sikker hash i virkeligheden. Vi skal bruge nogle systemer der er modstandsdygtige over for brute-force og rainbow-table-angreb. Jeg tjekker ved en if-statement at hash === validHash matcher Base64-enkodningen af hemmelig. Så generere vi et falsk token, for at visualisere hvad der sker bagved. Det er en JWT token, som er en JSON string, der indeholder et header og en payload. Så sætter vi egentlig textContent på elementet med id login-result fra html koden før. cookie Start

XSS Test

Klik for at åbne ⭣

Indblik i hvad der skal til for at vise en simpel XSS test. Hvor jeg erstatter `<`/`>` med entiteter, så det ikke kan køre som script.

Maj 2025 - 7. Sprint

Jeg starter med at oprette et div med klassen security-card i min index.html, og giver det titlen “XSS test”. Inden i kortet tilføjer jeg et input-felt med id="xss-input" og type="text", hvor placeholder-teksten fortæller, at brugeren kan afprøve fx <script>alert('XSS')</script>. Knappen Kør test har attributten onclick="runXSSDemo()", som kalder JavaScript-funktionen bag demoen. Under knappen placerer jeg en div id="xss-output", hvor resultatet af testen vises, samt en liste med klassen security-steps, der guider brugeren gennem trinene. XSS test opsætning I JavaScript definerer jeg herefter funktionen runXSSDemo(), som henter de to elementer med document.getElementById(). Brugerens input læses via .value, og resultatet vises med out. Derefter sætter jeg: out.textContent = input.replace(//g, '>'); Her bliver alle `<`- og `>`-tegn (matcher med regex’en /</g og />/g med global-flaget g) erstattet af deres HTML-entiteter, så browseren kun viser teksten – ikke kører den som kode. /.../ = regex, her skriver jeg tegnet jeg vil have erstattet. g = globalt flag der siger at hele strengen skal tjekkes og ikke kun første <. XSS test resultat

Test adgangskode styrke

Klik for at åbne ⭣

Indblik i hvad der skal til for at kunne teste en adgangskode styrke og visualisere det for en bruger.

Maj 2025 - 7. Sprint

SQL Injection opsætning SQL Injection resultat

SQL Injection

Klik for at åbne ⭣

Indblik i hvad der skal til for at lave en SQL-injection.

Maj 2025 - 7. Sprint

Jeg laver et div med klassen security-card og giver det titlen “SQL Injection”. Indeni putter jeg et input id="sql-input" type="text" med placeholder “F.eks. 1 OR 1=1” – det er payload’en. Knappen Kør injection har onclick="runSQLDemo()", som kører funktionen runSQLDemo(). Under knappen er der en pre id="sql-output", hvor jeg viser mine queries. Jeg har en liste security-steps, der forklarer trinene for brugeren. SQL Injection opsætning I JavaScript henter jeg først input og output med document.getElementById(): const input = document.getElementById('sql-input').value; const output = document.getElementById('sql-output'); Så laver jeg to queries: const queryVulnerable = `SELECT * FROM users WHERE id = ${input};`; const querySafe = `SELECT * FROM users WHERE id = ?; // param: "${input}"`; Den første indsætter input direkte, så en payload som “1 OR 1=1” kan ændre kommandoen (sårbart). Den anden bruger en placeholder ?, så input kun ses som data og aldrig kan lave en injection. Til sidst skriver jeg output.textContent = 'Sårbar query:\n' + queryVulnerable + '\n\nSikker query:\n' + querySafe; for at vise begge. SQL Injection resultat

Ressourcer og referencer

Kildeliste

Cyber Security 101

TryHackMe gør det nemt og brugervenligt at få inblik og forståelse af IT-Sikkerhed. Man får en masse hands-on erfaring igennem interaktive kurser.
Søgeord: Learn cyber security, Lær IT-sikkerhed, TryHackMe.

Rating:
★★★★★
JavaScript Interaktiv learner

Kilden her tager dig med igennem et interaktiv JavaScript kurser. Man får lov til at arbejde med projekter uden at man får svarene serveret. Det giver tid til at tænke frem til løsningen selv. Det lærer jeg personligt bedst af.
Søgeord: Learn JavaScript, Scrimba, (Anbefalet af studerende).

Rating:
★★★★☆
React Interaktiv Learner

Kilden her tager dig med igennem et interaktiv React kursus. Man får lov til at arbejde med projekter uden at man får svarene serveret. Det giver tid til at tænke frem til løsningen selv. -||-
Søgeord: Learn React, Scrimba, (Anbefalet af studerende).

Rating:
★★★★☆
W3Schools JavaScript gennemgang.

W3schools giver den bredeste gennemgang af hvert enkelte emne. Jeg har selv brugt den til JavaScript, men alt er at finde. Fordelen ved w3schools er at gennemgår du hele listen, så er du rigtigt godt på vej. Men det er meget bredt.
Søgeord: W3schools JavaScript, JavaScript.

Rating:
★★★★★
Best Pentesting Search Engines

Kilden her brugte jeg i forbindelse med TryHackMe's kursus. Det var en del af starten på kurset. Videoen giver et godt indblik i de bedste pentesting søge maskiner.
Søgeord: (Linket er fundet igennem TryHackMes kursus.)

Rating:
★★★★☆
Responsive Portfolio Website From Scratch

Kilden her brugte jeg i forbindelse med at lave min portfølje. Det var en del af starten på semesteret og den video, der satte mig ind i det hele. Videoen giver et godt indblik i hvordan htlm, css og Javascript virker sammen. Han viser HTML strukturen, CSS styling og JavaScript funktionalitet.
Søgeord: "build portfolio website html css javascript".

Rating:
★★★★★

Kontakt mig

×