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.

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.

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

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.

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.

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.

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å.

Her er hvordan det ser ud, når jeg klikker på knappen.

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.

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. 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. Her er et eksempel på hvordan det ser ud når jeg logger ind, med en gyldig bruger og kode, samt hvordan det ser ud når jeg logger ind med en ugyldig bruger og kode.

Det først jeg gør er at angive et id, et billede og et navn i prøv selv sektionen.

Stadig i mit HTML dokument, er jeg nødt til at oprette det overlay jeg skal style igennem mit style.css dokument. Her tilføjer jeg de klasser jeg skal ramme, blandt andet securityOverlay og knappen der skal lukke overlayet.

Jeg opretter også 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.



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 <.



For at alt det her skal give mening skal vi have en måde hvorpå jeg kan vise det for brugeren. Jeg henter knappen til at åbne, selve overlayet og luk knappen som det første med getElementById.

Jeg tilføjer en EventListener for hver knap/overlay. Det første der sker er at jeg fjerner klassen .hidden ved klik på åben knappen, hvilket får overlayet til at åbne sig. Præcis samme metode for luk-knappen, her tilføjer jeg classen hidden.





Her er hvordan det ser ud, når jeg kører XSS testen.

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. 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. Her er hvordan det ser ud, når jeg klikker på knappen.

I arbejdet med min portefølje har jeg haft stort fokus på at sikre siden mod de mest almindelige webtrusler. Jeg har forsøgt at oprette forskellige indgangsvinkler med sårbare huller såsom et log ind- og opret konto-system. Derudover har jeg implementeret forskellige “prøv selv”-knapper, hvor det er meningen, jeg viser, hvordan authentication, XSS og SQL injection virker. I denne forbindelse har jeg arbejdet med at implementere flere tekniske sikkerhedsforanstaltninger direkte på serveren ved hjælp af en .htaccess-fil. Dette er en konfigurationsfil, som anvendes i Apache-servermiljøer (som Simply.com benytter, min sides hosting), og som giver mulighed for at tilføje sikkerhedsregler og header-indstillinger, der sendes til browseren. Jeg kører ved hjælp af securityheaders.com en test på min side, og modtager nogle resultater jeg er nødt til at rette op på.





Her er headeren jeg har smidt ind i min .htaccess.



Jeg har sikret mod Cross-Site Scripting (XSS). Ved at tilføje en Content Security Policy (CSP) header har jeg sørget for, at kun indhold fra betroede kilder kan afvikles på siden. Det betyder konkret, at: Eksterne scripts og styles (f.eks. Google Fonts) kun må loades fra godkendte kilder. Ondsindede scripts, der forsøger at blive indlæst via en XSS-sårbarhed, bliver afvist af browseren. Dette reducerer kraftigt risikoen for, at en angriber kan indsprøjte skadelig kode i sitet – noget som især er vigtigt, hvis man arbejder med brugerinput, login eller andre interaktive elementer.



Jeg har aktiveret Strict-Transport-Security (HSTS). Ved aktivering sørger jeg for, at alle besøgende, som én gang har besøgt min side via HTTPS, fremover automatisk bliver tvunget til at bruge HTTPS. Dette beskytter mod Man-in-the-Middle-angreb, hvor angribere forsøger at aflytte eller manipulere trafikken.



Jeg har tilføjet følgende header for at forhindre, at min side bliver indlejret i en af en anden side – en teknik, der bruges i clickjacking-angreb.



Jeg har tilføjet en referrer-kontrol for øget privatliv. Med denne header styrer jeg, hvor meget information browseren sender med, når brugeren klikker på et link væk fra mit site.



Denne politik sikrer, at kun domænet – og ikke den fulde URL – deles med tredjepartswebsites. Det giver bedre privatliv og gør det sværere for andre sider at analysere brugernes adfærd på mit site. Permissions-Policy giver mig mulighed for at begrænse adgangen til funktioner som geolokation, mikrofon, kamera m.m. De er ikke nødvendige for min portefølje, derfor er de lukket ned. Jeg sikrer, ved at forbyde disse, at ingen scripts – uanset oprindelse – kan misbruge adgang til hardwarefunktioner.



Jeg kører nu min test endnu engang og her er resultatet.







Hele processen blev udført via FileZilla, hvor .htaccess-filen blev uploadet til public_html-mappen. Det er vigtigt, .htaccess er en ren tekstfil, for at vi kan loade den ind i FileZilla. Derudover var der en for stram CSP, så jeg skulle tilpasse den for at få Google Fonts til at virke og loade siden. Begge dele blev identificeret og løst ved gradvis test og validering. Hele processen blev startet og afsluttet med en sikkerhedsanalyse – jeg gik fra en score på F til A.



Siden fremstår nu visuelt korrekt og virker som ønsket. Den er sikkerhedsmæssigt hærdet mod en række angrebsformer, og den er transparent i sin sikkerhed, da alle mine headers kan verificeres offentligt. Her er hvordan det ser ud, når jeg kører testen.

I min prøv selv sektion har jeg tilføjet endnu et product-item. Jeg har her tilføjet en knap, der hedder "Test adgangskode styrke". Når brugeren klikker på knappen, åbner der sig et overlay, hvor brugeren kan indtaste en adgangskode. Jeg tilføjer som sædvaneligt et img element for at give knappen et form for logo. Jeg har givet knappen et id, så jeg kan ramme den i JavaScript. Stadig i min HTMl kode, har jeg lavet et divmed idet pwdOverlay, for password overlay. Jeg tilføjer en closePwd til lukningen af overlayet. Derudover har jeg en overskrift der fortæller hvad det er . Samt en overskrift til input feltet "Indtast adgangskode". Jeg indsætter et input fel med ideet pwd-input, det er af typen password, så det bliver skjult og placeholderen for at tydeligegøre hvad der skal ske. Jeg har tilføjet 2 divs som er til for at vise styrken af adgangskoden. Jeg har id'et pwd-keter og pwd-bar. Derudover er der tilføjet en pwd-feedback, som er til for at give feedback til brugeren om hvor svag eller stærk adgangskoden er. Jeg tilføjer security steps, som guider brugeren igennem hvad de skal lægge mærke til. Derudover tilføjer jeg lidt gode fifs i bunden. Selve HTML delen er nu på plads, så jeg går videre til JavaScrip delen. Først og fremmest henter jeg de forskellige ideer vha. en constant som jeg sætter = document.getElementById. Jeg starter med at oprette nogle EventListener, som lyttter henholdsvis efter klik ved åben, klik ved luk og klik udenfor indholdet. Til sidst opretter jeg en global funktion runPwdTest, som måler styrken på et adgangskode-felt, hver gang den kaldes. Det første der sker er at jeg henter selve tekststregnen brugeren har skrevet ind i input-feltet med idet pwd-input. Jeg opretter så en let score, hvor jeg starter et pointtal baseret på længden af adgangskoden. 10 point pr tegn, men maksimalt 60. Derefter tjekker jeg vha. af regex udtryk om adgangskoden indeholder store bogstaver, små bogstaver, tal og specialtegn. Hver gang der er et af disse, så tilføjer jeg 10 point til scoren. Til sidst sikrer jeg at scoren ikke overstiger 100, og jeg opdaterer styrke-baren og feedback-teksten baseret på scoren. Jeg henter så pwd-bar og pwd-feedback elementerne, og opdaterer deres indhold baseret på scoren. Ved let maskWidth = 100 - score, beregner jeg hvor meget af baren der skal dækkes. If (maskWidth <= 0) maskWidth = 0;, her beskytter jeg mod negative værdier, så baren ikke bliver negativ. pwdBar.style.width = maskWidth + '%';, her ændrer vi bredden på baren dynamisk, så den afspejler styrken. Vi er nødt til at matche pwdBar med mask for at få det til at virke. Til sidst opdaterer jeg feedback-teksten baseret på scoren. Jeg bruger en række if-sætninger til at bestemme, om adgangskoden er svag, middel eller stærk. if (score < 40) - Her tjekker jeg om scoren er under 30, så er adgangskoden svag. else if (score < 70) - Her tjekker jeg om scoren er under 70, så er adgangskoden middel. else - Hvis scoren er 70 eller højere, er adgangskoden stærk. For at afslutte funktionen her, har jeg en EventListener, der pwdInput, så funktionen kører automatisk hver gang brugeren skriver eller sletter et tegn. Her er slutresultatet af min adgangskode styrke test.

I udarbejdelsen af min portfølge og andre webudviklingsrelaterede projekter, har jeg samlet en række noter. Disse noter dækker HTML, CSS, JavaScript og lidt itsikkerheds begræber. Jeg har delt det op i termer, forklaring og så eksempler der så vidt muligt er ud fra min portfølje. Jeg har valgt at oprette dem som tabeller, men for en god ordensskyld er de også vedhæftet som billeder i bunden af stykket her.

JavaScript - Terminologi og forklaringer

Term	Forklaring	Kode eksempel
addEventListener()	Knytter en event-listener til et DOM-element når en bestemt hændelse opstår. “Når det her sker, på det her element, så kør denne funktion”.	btn.addEventListener(‘click’, fn);
Arrow function () => {}	Kort syntax for en funktion. Hurtig måde at skrive en funktion, uden “function”.	const sum = (a, b) => a + b;
async / await	Gør asynkrone Promises lettere at læse som synkron kode. “Vent lige” i koden, indtil resultatet er klar.	const data = await fetch (‘/api’).then(r => r.json());
class	Skabelon til objekter; syntaktisk sukker over prototype-arv. Opskrift til at lave mange ens objekter.	class Car { start() {...} }
console.log()	Skriver debugging-info til konsollen.	console.log(user);
const / let / var	Deklarerer variabler. Gemmer værdier i hukommelsen - const kan ikke gen-tildeles, let kan.	let count = 0; const btn = document.getElementById(button)
document.querySelector(All)	Finder første/alle matchende elementer via CSS-selector. Giv mig det/de element(er) der matcher denne selector.	const nav = document.querySelector(‘nav’);
DOMContentLoaded	Event der fyres når HTML er parset, før billeder osv. DOM skal være klar før manipulation.	document.addEventListener(‘DOMContentLoaded’, init);
event.preventDefault()	Stopper elementets standard handling. Forhindrer normal adfærd.	form.addEventListener(‘submit’, e => e.preventDefault());
Fetch API fetch ()	HTTP-kald der returnerer en Promise med Response. Henter data fra en server.	const json = await fetch(‘/users’).then(r => r.json());
for...of / for...in	Løkker. for...of: Gå gennem hvert element. for...in: gå gennem hver egenskab.	for (const el of arr) {...}
JSON.parse()/stringify()	Konverterer mellem objekter og tekst. Oversætter JavaScript-objekter til tekst. Så de kan gemmes eller sendes.	localStorage.setItem(‘u’, JSON.stringify(user));
localStorage / sessionStorage	Nøgle-værdi-lager i browseren. Gem små stykker data i browseren så de huskes næste gang.	localStorage.setItem(‘theme’, ‘dark’);
map()/filter()/reduce()	Array-metoder. Map: lav alle elementer om. Filter: fjern dem der ikke matcher. Reduce: opsumer til en værdi.	const names = users.map(u => u.name);
Modules import / export	Opdeler kode i filer med klare afhængigheder. Gør det umuligt at importere funktioner fra andre filer der ikke bliver importeret.	import { login } from ‘./auth.js2’;
this	Refererer til den aktuelle kontekst. Det objekt funktionen hører til lige nu.	btn.onclick = function () { console.log(this); };
setTimeout()	Kører en funktion en gang efter en forsinkelse. Vent X millisekunder (1000), gør så dette.	setTimeout(closeModal, 2000);
setInterval()	Gentager en funktion hver X millisekunder (1000). Gør dette igen og igen med et fast interval.	setInterval(tick, 1000);
try...catch	Fanger fejl i kode og håndterer dem. Prøv dette, hvis det fejler, så gør noget andet i stedet for at crashe.	try { risky() } catch (e) { alert(e) }
document.getElementById() / document.getElementByClass()	Henter id / klasse elementet fra din index.html fil, så den kan bruges i din script.js fil.	const clickBtn = document.getElementById(‘button’)

CSS - Terminologi og forklaringer

Term	Forklaring	Kode eksempel
position: fixed/relative/absolute	Bruges til at placere elementer fast, relativt eller frit på siden. Relative beholder plads i dokument-flow’et. Absolute flyttter ud af flow’et og måler fra nærmest positionerede forælder. Fixed måler fra viewport og følger ikke med, når siden scrolles.	nav {position: fixed, top: 0; left: 0; width: 100%;}
top, left, right, bottom	Bruges sammen med position til at angive præcis placering / forskyde elementet	.arrow {right: -5rem; bottom: 2.5rem;}
margin, padding	Margin er luft udenfor elementet, padding er luft inden i.	.btn {margin: 1rem; padding: 1rem; }
box-sizing: border-box	Gør at width/height inkluderer både padding og border, så elementet ikke “vokser” uventet.	::before, ::after {box-sizing: border-box}
display: flex / grid / block / inline / inline-block	Vælger layout-model: flex (en dimension), grid (Opdeling, 2 dimensioner), block (Bloks under hinanden), Inline (Efter hinanden), Inline-block (Efter hinanden, blok format)	.menu-links { display: flex;}
flex-direction, flex-wrap: wrap, justify-content, align-items, gap	Styrer rækkefølge, om indhold må bryde linjen, hoved-/tvær-aksernes justering og den indbyrdes afstand i en flex container.	nav-links {display: flex; gap: 2rem; flex-wrap: wrap;justify-content: center; }
grid-template-columns	Definerer kolonne strukturen i et CSS-grid (antal og størrelse)	.product-grid {display: grid; grid-template-columns: repeat(3,1fr);}
width, height, min-/max-height	Sætter faste eller begrænsede dimensioner; min-max/-* forhindrer, at elementet bliver mindre/større end grænsen.	.logo {max-width: 200px; }
overflow-x, overflow	Bestemmer, hvad der sker, når indholdet er større end elementets boks - f.eks. scroll, skjul eller vise.	body {overflow-x: hidden; }
z-index	Angiver stablings-rækkefølgen for positionerede elementer; højere tal lægger sig “forrest”.	#desktop-nav {z-index: 1000M}
background, background-color, background-position / size	Lægger farve/billede bag elementet, justerer billedets udgangspunkt og skalering.	body{background: #fafafa }
color	Farve på tekst.	a:hover {color: #666;}
border, border-radius	Tegner kant omkring elementet; radius runder hjørnerne.	.card {border: 1px solid #ddd;border-radius: 2rem; }
box-shadow	Tilføjer skygge for dybde-effekt; parametre = x-offset, y-offset, blur, spread, farve.	.card {box-shadow:0 4px 6px rgba(0,0,0,.1);}
font-family, font-size, font-weight, line-height	Styrer skrifttype, skriftstørrelse, vægt (tykkelse) og lodret afstand mellem tekstlinjer.	body {font-family: “Poppins”, sans-serif; font-size: 1rem; line-height: 1.5;}
text-align, text-decoration	Horisontal justering af inline-indhold + pynt som understregning.	h2{text-align: center;text-decoration: underline; }
cursor: pointer / default / not-allowed	Ændrer muse-markøren, fx til hånd-ikon når noget er klikbart (pointer), default eller slet ikke tilladt.	button{cursor: pointer;}
transition	Giver en glidende animation mellem to værdier.	.btn {transition: background 200ms ease; }
transform: translateY(...) / scale(...) / rotate(...)	Manipulerer elementets koordinatsystem (flyt, skaler, drej ) uden at påvirke dokument-flow’et.	.logo:hover{transform: scale(1.05) rotate (-2deg);}
opacity	Gør elementet gennemsigtigt 0 - 1 (0 - 100% vist)	.disabled{opacity: .5; }
animation, @keyframes	Fuld tidslinje-styret animation, keyframes beskriver mellem-stadier, animation binder den til elementet.	@keyframes pulse {0%{transform:scale(1);} 50%{transform:scale(1.1);} 100%{transform:scale(1);} .cta{animation:pulse 1.5s infinite;}}
@media (max-width: ...)	Bryder til alternative regler, når viewport-bredden er lig med eller mindre end et bestemt bredde. Bruges til mobilvisning.	@media (max-width: 768px){.nav-links{flex-direction: column; }}
object-fit, object-position	Bestemmer, hvordan img/video skal udfylde sin boks, og hvilken del af motivet der skal centreres.	.about-pic {object-fit: cover; object-position: center top;}
scroll-behavior: smooth	Giver blød rulning til interne ankre (sektioner)	html {scroll-behavior: smooth;}

HTML - Terminologi og forklaringer

Term	Forklaring	Kode eksempel
nav	Navigationsbar. Primær navigation. (Links, menuer, logoer søgebar)	nav id="desktop-nav" class="nav-links"> a href="#home">Hjem a href="#about">Om
header/footer	Hoved- og bund-sektion, kan være overordnet info, logoer, kontakt, politikker osv.	footer © 2025 Min Portefølje /footer
section	Afsnit af siden, hjælper med opdeling af siden. Hjælper skærmlæsere (Softwareprogram, der hjælper blinde og svagsynede med at læse tekst)	section id ="about"
div	Et div-tag er til at definere et stykke eller en form for sektion i et HTML dokument. Det bruges til at gruppere indhold og anvende CSS-styling eller JavaScript-funktionalitet på det.	div class ="wrapper" /div
ul/ol/li	Liste elementer. Unordered-list, Ordered liste eller bare en liste.	ul li item1
a href = "..."	A tag består af en href, som er et link til en side, anker eller en fil.	a href ="#contact">Kontakt< a
img src="..." alt="..."	Bruges til at indsætte et billede. Angiv at det er et billede med src, som er linket til billedet. Alt er en beskrivelse af billedet, til tekstalternativer for SEO/tilgængelighed.	img src="selvportræt.png" alt="Profilbillede"
button	Button definere en knap, som er et interaktivt kontrol-element. Det kan udløse en JavaScript metode eller en formular submit	button class="btnClose">Luk<
input type ="text/password/email	Input definere et input-felt, som kan være tekst, password eller email. Det bruges til at indsamle data fra brugeren.	input type ="email" id="signupEmail"
label for="..."	Klikbart navn, der forbinder sig til et input felt.	label for="signupPwd">Adgangskode<
Globale attributter: Class, id, style	Id bruges til at identificere et unikt element på siden, class bruges til at gruppere elementer og style bruges til at tilføje inline CSS-styling.	div id="button" class="closeButton"
href, src, alt, type, placeholder, disabled, aria-*	Disse er alle attributter, der bruges til at definere elementer. href er linket til en side, src er linket til et billede, alt er en beskrivelse af billedet, type er typen af input-feltet, placeholder er en tekst der vises i input-feltet, disabled gør et element inaktivt og aria-* bruges til at forbedre tilgængeligheden for skærmlæsere.	a href="https://example.com" target="_blank">Link til eksempel<. img src="billede.jpg" alt="Beskrivelse af billede". input type="text" placeholder="Indtast tekst her" disabled. input type="email" aria-label="Email adresse".
script type="module" src="..."	Script tag bruges til at inkludere JavaScript på siden. Type="module" angiver, at det er et modul, og src er linket til JavaScript-filen.	script type="module" src="script.js"<
code	Code tag bruges til at vise kode på siden. Det er en semantisk måde at vise kode på, og det hjælper med at formatere koden korrekt.	>console.log('Hello World');
html lang="da"	HTML tag bruges til at definere et HTML-dokument. Lang attributten angiver sproget for dokumentet, i dette tilfælde dansk.	html lang="da"
link	Link tag bruges til at inkludere eksterne ressourcer som CSS-filer. Det hjælper med at adskille stil og indhold.	link rel="stylesheet" href="styles.css"
small	Small tag bruges til at vise mindre tekst, som f.eks. copyright eller fodnoter. Det hjælper med at adskille mindre vigtig information fra hovedindholdet.	small © 2025 Min Portefølje< /small
Span	Span tag bruges til at gruppere inline-elementer og anvende CSS-styling på dem. Det er en semantisk måde at gruppere elementer på, uden at ændre deres layout.	span class="highlight">Dette er fremhævet tekst
Table	Tables bruges til at oprette tabeller i HTML. Med et td(table data cell) og tr(table row), laver jeg simple tabeller som denne.

IT-Sikkerhed - Terminologi og forklaringer

Term	Forklaring	Kode eksempel
Hashing med Argon2	En ensrettet funktion til at gemme adgangskoder sikker. Argon2 beskytter mod brute-force bl.a.	await argon2.hash(password, opts);
JWT (JSON Web Token)	Token der indeholder brugerinfo og bruges til session-håndtering uden server-side sessions. Underskrives med hemmelig nøgle.	jwt.sign({ uid }, secret, { expiresIn: ‘15m’ });
CSRF-beskyttelse	Stopper angribere fra at udnytte brugerens aktive session til at sende skadelige forespørgsler.	app.use(csurf({ cookie: cookieCfg })); res.json({ csrfToken : req.csrfToken () } );
Rate Limiting	Begrænser antallet af forespørgsler fra en IP for at beskytte mod brute-force.	max: 20, windowMs: 15 * 60 * 1000
Brute-force forsvar / lockout	Midlertidig kontolås ved for mange forkerte loginforsøg.	if (fails >= 5) lock = dayjs().add(15, ‘minute’)
Refresh-token hashing	Refresh-tokens hashes i databasen for at beskytte mod token stjæling.	crypto.createHash(‘sha256’).update(token).digest(‘hex’);
HTTPOnly cookie	Forhindrer JavaScript i at få adgang til cookies og dermed reducerer XSS-risiko.	res.cookie(‘refresh’, token, { httpOnly: true })
Secure / SamSite cookies	secure kræver HTTPS. SameSite beskytter mod CSRF ved at begrænse cross-site requests.	samSite: ‘lax’, secure: true
Helmet (sikkerhedsheaders)	Tilføjer headers som HSTS, CSP, X-Frame-Options for at beskytte mod XSS, clickjacking m. m.	app.use(helmet());
Content Security Policy (CSP)	Kun scripts fra godkendte kilder må køres - begrænser XSS.	scriptSrc: [“’self’”]
SQL Injection	En angrebsteknik hvor angriberen injicerer SQL i inputfelter. Beskyttes mod med prepared statements.	db.prepare(“SELECT * FROM users WHERE id = ?”).get(id);
XSS (Cross-Site Scripting)	Når angriberen injicerer skadelig JavaScript i DOM’en. Sanitering forhindrer dette.	out.textContent = input.replace(/
TryHackMe (forløbet)	En platform hvor jeg lærer om XSS, SQLi, brute-force, netværk og forsvar. Windows Fundamentals, Linux Basics osv.	Læringsmæssigt baggrundsarbejde
Base64 hashing (min demo)	Bruges til at illustrere koncepter i din frontend-demo, f.eks. hvordan simple hash kan manipuleres.	btoa(‘hemmelig’);
Sanitering af input (mod XSS)	Uskadeliggør skadelige tegn som < og > i inputfelter.	input.replace(//g, ‘>’)
Token rotation	Refresh-token ændres og verificeres server-side ved hver login eller fornyelse	refresh_hash valideres og overskrives i databasen
HSTS	Tvinger browseren til kun at kommunikere over HTTPS.	app.use(helmet.hsts());
Password salting	En tilfældig streng tilføjes til brugerens kodeord før hashing for at undgå rainbow table-angreb.	Argon2 bruger automatisk saltning.
Timing attack	En angriber måler svartid for at afsløre korrekt input (fx passwords)	Argon2 beskytter mod dette.
Token hijacking	Når en angriber stjæler en gyldig token, fx via XSS.	Modvirker det med httpOnly cookies og short JWT-levetid.
Session fixation	En angriber tvinger brugeren til at bruge en kendt session-id.	Refresh-token rotation beskytter mod dette.
CSP	CSP kan også kontrollere hvor objekter/iframes må loades fra.	Bruger basic CSP hos mig.
Clickjacking	Brugeren narrer til at klikke på noget andet via iframe/lag	helmet.framequard({ action: ‘deny’ })
Open Redirect	Bruges i phishing - redirect uden kontrol over destination	Ikke i mit projekt.
IDOR (Insecure Direct Object Reference)	Når bruger direkte får adgang til fx andres data via ID i URL.	Sårbarhed, bliver beskyttet med token-validering.

Jeg har sammenlagt flere tusinde linjer af kode fordelt ud mellem HTML, CSS og JavaScript. For at at skabe det bedste overblik over baggrunden for min portfølje, deler jeg det op i sektioner, ligesom jeg har gjort i min portfølge. Det første vi gør er at fortælle browseren at bi bruger HTML5-standard og det gør vi ved at definere DOCTYPE html, derefter sætter vi sproget til dansk, som hjælper både skærmlæsere og søgemaskiner. Inde i vores head krop, tilføjer vi alt metadata'en. Først fastlægger vi tegnsættet til Unicode. Efter gør vi layoutet responsivt på mobiler med meta name="viewport". Jeg tilføjer så titlen til min browserfane og til søgeresultater ved at angive title Jeppe Falk Leth. For at jeg kan benytte min css/styling skal jeg have fortalt hvilke filer jeg kan tage CSS'en fra. Det gør jeg ved at angive med et link rel="stylesheet" både min style.css og mine mediaqueries.css. Style.css er til generel styling, mediaqueries er for at lave responsivt mobildesign. link rel viser mit ikon der viser sig oppe ved siden af min titel. Meget af det her kommer som standard ved at skrive kommandoen "!", så skal det ellers bare tilpasses til din side derfra. Vi rykker videre til min navigation. Jeg tilføjer et logo, som egentlig bare er en streng jeg efterfølgende har stylet. Selve navigationen består af 6 "faner", samt en dropdown til mit profilikon. Jeg opretter en unordered liste = ul, og angiver de enkelt liste items inde i. Hver af de her li items, har et a tag, med en href til henholdsvis den sektion jeg ønsker skal vises ved klik på det menupunkt jeg har angivet. I min dropdown bruger jeg et ikon som den knap der skal trykkes på. I stedet for at navigere på siden, bliver der åbnet en dropdown menu. Dropdown menuen viser som udgangspunkt Log ind, Opret profil og Indstililnger. Hver af de her links, åbner hver deres modal, som enten repræsentere en login form eller en opret konto form. Log ud tagget har jeg angivet klassen hidden. Log ud skal nemlig kun være tilgængelighed når man rent faktisk er logget ud. Det berører jeg i produkter (Log ind/Opret konto modal). Jeg har til min side oprettet en hamburger-menu, hvilket er menuen med de 3 streger under hinanden. Hamburger menuen er til mobilversion, for at skabe en mere overskuelig menu. Hertil har jeg oprettet en onClick funktion der hedder ToggleMenu, som bliver kaldt i det jeg klikker på menuen. Funktionen toggleMenu bindes til window, så den kan kaldes direkte fra onclick-attributter i HTML. Den finder de to elementer og toggler klassen open. Når ToggleMenu() er blevet kaldt, kører funktionen. CSS'en viser hvordan jeg har stylet .menu-links. Jeg har tildelt den en transform: scaleY(0), og lige så snart klassen open bliver tilføjet, sætter jeg scaleY(1), det giver effekten af menuen har åbnet sig. Knapperne virker her, ligesom de ville gøre på computeren.
Her ses det i praksis hvordan det ser ud på mobilversion.

Produkter jeg ikke nåede at sætte ord på.

Jeg har forsøgt at oprettet en log ind og en opret konto modal. Det har dog været et meget stort projekt og jeg er desværre ikke noget helt i mål med hvad jeg gerne har ville. Grunden til jeg har forsøgt at oprette min egen for at skabe fokus på sikkerheden ved kontooprettelser og sider hvor man skal logge ind. Jeg gennemgår i dette skriv nogle af de tanker jeg har gjort mig og de ting jeg gerne ville ha nået mere. Selve nav-linksne og de to modaler har jeg kort gennemgået under "Min portfølje"-produkt sektion. Men her er koden bag dem. Det første jeg gør at gemme referencen til alle de knapper og overlays jeg skal bruge. Det gør jeg ved at gemme referencen til knappen der skal åbne login-modalen med document.getElementById('btnOpenLogin'), og ligeledes signup knappen med (btnOpenSignup). Dernæst de to "luk"-knapper (btnCloseLogin og btnCloseSignup). Til sidst henter jeg selve overlay-elementerne, de modaler der bliver givet til udtryk ved min bagvedliggende CSS, for at style det for brugeren. Jeg definere så to hjælpe funktioner til at vise og skjule en model. openModal(el) fjerner klassen hidden fra elementet og sætter document.body.style.overflow = 'hidden', så resten af siden ikke kan rulle mens modalen er åben. De er sat som værende hidden da de skal være skjult indtil brugeren kalder dem, på den måde viser de sig som om de kommer frem ved klik. closeModal(el) gør præcis det modsatte: tilføjer hidden og nulstiller overflow. Når brugeren klikker på enten “Log ind”- eller “Opret bruger”-linket, kører jeg en preventDefault() (prevenDefault er til for at sige, "du skal ikke gøre det du plejer at gøre i den givende situiation") og kalder openModal() med det ønskede overlay overlay. Klikker man på krydset inde i modalboksen, kalder jeg closeModal() på samme overlay Jeg smider begge overlay-referencer i et lille array og looper over det. For hvert overlay lytter jeg efter et klik. Hvis selve target for klikket er overlayet, så lukker jeg. Det er det samme som at sige, hvis der er klik ved siden af overlayet, så luk modal.



Inde i signup-modalen henter jeg “Opret konto”-knappen (btnSignup) og binder en asynkron click-handler på den. Den asynkrone click-handler skal vi bruge da vi venter på serverens svar, så uden at blokere resten af siden kalder vi derfor en async click-handler. Når brugeren klikker, læser jeg e-mailfeltet samt de to kodeordsfelter og trimmer e-mailen. At trimme en email betyder at fjerne whitespace, hvis der kommer utilsigtede mellemrum, ville det blive læste uden et trim. Hvis koderne ikke matcher, eller er kortere end 8 tegn, får brugeren en alert() og funktionen returnerer tidligt. Hvis valideringen består, kalder jeg apiFetch('/signup', ...), som sender et AJAX-kald(Asynchronous JavaScript and XML ) til serveren med e-mail og adgangskode. Min apiFetch-funktion tilføjer automatisk en CSRF-header for sikkerhed. Hvis serveren svarer med en fejl, vises den med alert(). Går alt godt, logger jeg brugeren ind, lukker signup-modalen og opdaterer brugerfladen med updateMenuUI().



Ved klik på “Log ind”-knappen læser jeg e-mail og adgangskode, og trimmer e-mailen for at fjerne utilsigtede mellemrum. Hvis et af felterne er tomme, vises en fejlbesked. Ellers forsøger jeg at logge brugeren ind med login(email, pwd), som også henter og gemmer en token. Ved succes lukkes login-modalen, og brugerfladen opdateres med updateMenuUI().



Når brugeren klikker på “Log ud”-knappen, kalder jeg preventDefault() og den asynkrone logout()-funktion, som afbryder sessionen. Uanset om log ud lykkes eller fejler, opdateres brugerfladen med updateMenuUI() for at afspejle, at brugeren nu er logget ud.



Funktionen updateMenuUI() styrer synligheden af login-, signup- og logout-knapperne baseret på, om brugeren er logget ind. Jeg bruger isLoggedIn() til at afgøre, om der findes en aktiv session, og toggler derefter klassen hidden på de tre knapper. Hvis brugeren er logget ind, skjules “Log ind” og “Opret konto”, mens “Log ud” vises. Hvis brugeren ikke er logget ind, skjules “Log ud”, mens “Log ind” og “Opret konto” vises. Denne funktion bliver kaldt både efter login og logout, samt én gang ved indlæsning af siden, så UI’et altid viser den aktuelle loginstatus korrekt.



Ved login sender jeg en POST-request med e-mail og adgangskode til /login via apiFetch. Hvis serveren svarer med en fejl, kommer der en fejlmeddelelse. Ved succes henter jeg et JWT access-token fra svaret og gemmer det i sessionStorage, så brugeren forbliver logget ind i sessionen. Logout-funktionen sender en POST-request til /logout og fjerner access-token både fra hukommelsen og sessionStorage. Til at tjekke om brugeren er logget ind, bruger jeg isLoggedIn(), som returnerer true, hvis et token er tilgængeligt, som nævnt tidligere.