I'm not sure what I'm doing wrong...receiving error around using innerHTML

Question

I'm on the last step of the challenge and am not sure what I'm doing wrong. My code for the last bit is document.getElementById('sidebar').innerHTML = xhr.responseText; to change the innerHTML inside the div with sidebar id.

app.js

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
  alert("Hello!");
    }
  }
document.getElementById('sidebar').innerHTML = xhr.responseText;
};
xhr.open('GET', 'sidebar.html');
xhr.send();

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>AJAX with JavaScript</title>
  <script src="app.js"></script>
</head>
<body>
  <div id="main">
    <h1>AJAX!</h1>
  </div>
  <div id="sidebar"></div>
</body>
</html>

Answer 1 · 2021-02-16T21:48:28Z

February 16, 2021 9:48pm

Hi Joanna!

This passes all four:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() { 
  if (xhr.readyState === 4 && xhr.status === 200) {  // Tasks 1 & 2
    document.getElementById('sidebar').innerHTML = xhr.responseText; // Tasks 3 & 4
  };
};
xhr.open('GET', 'sidebar.html');
xhr.send();

It's not part of the challenges, but I have since learned that innerHTML should be used with caution as it can lead to serious security flaws through potential XSS attacks.

More info:

https://teamtreehouse.com/library/owasp-top-10-vulnerabilities

https://gomakethings.com/preventing-cross-site-scripting-attacks-when-using-innerhtml-in-vanilla-javascript/

https://medium.com/front-end-weekly/javascript-innerhtml-innertext-and-textcontent-b75ec895cbe3

https://github.com/cure53/DOMPurify

I hope that helps.

Stay safe and happy coding!