Teach data sanitization in JS projects

[moT01]

Describe the Issue

In the authors page project and the forum leaderboard project, we are having users fetch data from an external resource and inserting it into the DOM via innerHTML. This isn't a good practice as the data could theoretically be malicious. It's not because we control the data, but we should change these two projects to have users sanitize the data.

Affected Page

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/

[a2937]

So for the authors page project, we probably need to add a step where step 16 is currently at that deals with sanitizing the data. I think we should consider adding some innocent but demonstrative bad data into our API. Stuff like special characters before it can actually be displayed on the page. At minimum, adding some less than and greater than symbols that need encoded could help.

As for forum leaderboard project, roughly around step 11 is where we should do the same thing.

[ShaunSHamilton]

Because we are not exactly set up for modules, we might want to go the route of:

You could insert the data into your element by setting the innertHTML property. However, this exposes your page to _____. Instead, use the innerText property to insert the data: ....

[jdwilkin4]

Instead, use the innerText property to insert the data:

innerText doesn't work though

Are you suggesting to make this change?

   authorContainer.innerText += `
    <div id="${index}" class="user-card">
      <h2 class="author-name">${author}</h2>
      <img class="user-img" src="${image}" alt="${author} avatar">
      <div class="purple-divider"></div>
      <p class="bio">${bio.length > 50 ? bio.slice(0, 50) + '...' : bio}</p>
      <a class="author-link" href="${url}" target="_blank">${author} author page</a>
    </div>
  `;

because if so, it would produce this result

[ShaunSHamilton]

Are you suggesting to make this change?

No, I suggest splitting the stuff we control and the text into different parts.

I see why that might not work very easily; Previously, I had just looked at the forum leaderboard:

const showLatestPosts = (data) => {
  const { topic_list, users } = data;
  const { topics } = topic_list;

  postsContainer.innerHTML = topics.map((item) => {
    const {
      id,
      title,
      views,
      posts_count,
      slug,
      posters,
      category_id,
      bumped_at,
    } = item;

    return `
    <tr>
      <td>
        <p class="post-title">${title}</p>

        ${forumCategory(category_id)}
      </td>
      <td>
        <div class="avatar-container">
          ${avatars(posters, users)}
        </div>
      </td>
      <td>${posts_count - 1}</td>
      <td>${viewCount(views)}</td>
      <td>${timeAgo(bumped_at)}</td>
    </tr>`;
  }).join("");
};

[jdwilkin4]

No, I suggest splitting the stuff we control and the text into different parts.

That might work.

We technically control all of the content for the authors page project since it is just a hardcoded json file
https://github.com/freeCodeCamp/cdn/blob/main/build/curriculum/news-author-page/authors.json

[moT01]

It could be enough to just use textContent or innerText where we can and explain that "usually you would sanitize the data" or something. I guess wouldn't prefer that. This kinda seems like a good place to teach it.