Fix XSS vulnerability using safe DOM methods

Author: MacDonald91

debugging/code-reading/readme.md challenges/code-reading/readme.mddebugging/code-reading/readme.md renamed to challenges/code-reading/readme.md

@@ -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 = `
-        <h2>${data.title}</h2>
-        <img src="${data.img}" alt="${data.alt}" />
-        <p>${data.alt}</p>
-      `;
+      // 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 = `<p>Error loading comic 😢</p>`;
-      }
+      container.appendChild(errorMsg);
+
+      console.error(error);
     });
 }