From 4c94c7639a2cd1623c9ceda191541d21d5cbf0f7 Mon Sep 17 00:00:00 2001 From: MacDonald91 Date: Mon, 4 May 2026 18:36:20 +0100 Subject: [PATCH 1/2] Recreate programmer humour task clean --- fetch/programmer-humour/index.html | 18 ++++++++++++++++ fetch/programmer-humour/script.js | 34 ++++++++++++++++++++++++++++++ fetch/programmer-humour/style.css | 11 ++++++++++ 3 files changed, 63 insertions(+) create mode 100644 fetch/programmer-humour/index.html create mode 100644 fetch/programmer-humour/script.js create mode 100644 fetch/programmer-humour/style.css diff --git a/fetch/programmer-humour/index.html b/fetch/programmer-humour/index.html new file mode 100644 index 00000000..ff262160 --- /dev/null +++ b/fetch/programmer-humour/index.html @@ -0,0 +1,18 @@ + + + + + Programmer Humour + + + + +

Latest XKCD Comic

+ +
+

Loading comic...

+
+ + + + \ No newline at end of file diff --git a/fetch/programmer-humour/script.js b/fetch/programmer-humour/script.js new file mode 100644 index 00000000..bea1168b --- /dev/null +++ b/fetch/programmer-humour/script.js @@ -0,0 +1,34 @@ +function fetchComic() { + const container = document.getElementById("comic-container"); + const loading = document.getElementById("loading"); + + fetch("https://xkcd.now.sh/?comic=latest") + .then(response => { + if (!response.ok) { + throw new Error("Network response was not ok"); + } + return response.json(); + }) + .then(data => { + console.log(data); + + if (loading) loading.remove(); + + container.innerHTML = ` +

${data.title}

+ ${data.alt} +

${data.alt}

+ `; + }) + .catch(error => { + console.error(error); + + if (loading) { + loading.textContent = "Error loading comic 😢"; + } else { + container.innerHTML = `

Error loading comic 😢

`; + } + }); +} + +window.addEventListener("load", fetchComic); \ No newline at end of file diff --git a/fetch/programmer-humour/style.css b/fetch/programmer-humour/style.css new file mode 100644 index 00000000..6a031a65 --- /dev/null +++ b/fetch/programmer-humour/style.css @@ -0,0 +1,11 @@ +body { + font-family: Arial, sans-serif; + text-align: center; + background-color: #f4f4f4; +} + +img { + max-width: 100%; + height: auto; + margin-top: 20px; +} \ No newline at end of file From 00eca5f7573ee329aa0d91bada6baad2d66b0dab Mon Sep 17 00:00:00 2001 From: MacDonald91 Date: Thu, 21 May 2026 13:56:14 +0100 Subject: [PATCH 2/2] Fix XSS vulnerability using safe DOM methods --- .../code-reading/readme.md | 0 fetch/programmer-humour/script.js | 36 ++++++++++++------- 2 files changed, 23 insertions(+), 13 deletions(-) rename {debugging => challenges}/code-reading/readme.md (100%) diff --git a/debugging/code-reading/readme.md b/challenges/code-reading/readme.md similarity index 100% rename from debugging/code-reading/readme.md rename to challenges/code-reading/readme.md diff --git a/fetch/programmer-humour/script.js b/fetch/programmer-humour/script.js index bea1168b..999dbdee 100644 --- a/fetch/programmer-humour/script.js +++ b/fetch/programmer-humour/script.js @@ -1,6 +1,5 @@ function fetchComic() { const container = document.getElementById("comic-container"); - const loading = document.getElementById("loading"); fetch("https://xkcd.now.sh/?comic=latest") .then(response => { @@ -12,22 +11,33 @@ function fetchComic() { .then(data => { console.log(data); - if (loading) loading.remove(); + // CLEAR OLD CONTENT + container.innerHTML = ""; - container.innerHTML = ` -

${data.title}

- ${data.alt} -

${data.alt}

- `; + // SAFE ELEMENT CREATION (FIXES XSS) + const title = document.createElement("h2"); + title.textContent = data.title; + + const img = document.createElement("img"); + img.src = data.img; + img.alt = data.alt; + + const desc = document.createElement("p"); + desc.textContent = data.alt; + + container.appendChild(title); + container.appendChild(img); + container.appendChild(desc); }) .catch(error => { - console.error(error); + container.innerHTML = ""; + + const errorMsg = document.createElement("p"); + errorMsg.textContent = "Error loading comic 😢"; - if (loading) { - loading.textContent = "Error loading comic 😢"; - } else { - container.innerHTML = `

Error loading comic 😢

`; - } + container.appendChild(errorMsg); + + console.error(error); }); }