Teach data sanitization in JS projects about freecodecamp HOT 6 OPEN

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.

from freecodecamp.

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

from freecodecamp.

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

from freecodecamp.

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("");
};

from freecodecamp.

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

from freecodecamp.

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.

from freecodecamp.