Kevin Powell - Community•16mo ago

Changing innerHTML content into createElement/Append - What is the best way to attack this?

I'll include a snippet of code I'd like to change from the security lacking innerHTML, to something more secure (assuming textContent once I've created the element + added a class to it), is anyone able to provide an example of how I would transfer this from innerHTML to a more secure variant? The way I think it needs to be done is for each element, I need to create a variable that contains createElement, classList and the textContent, am I on the right path? I wuold then append each element to it's relevant parent, so for the below I THINK I create the div and append it to the nav, create the 3 a links and append them to the div.

function headerFunc() {
  const header = document.createElement("div");
  header.classList.add("header");

  const navbar = document.createElement("nav");
  navbar.classList.add("nav-bar");
  header.appendChild(navbar);

  navbar.innerHTML = ` <nav class="navbar">
        <div class="main-nav">
          <a href="#home" class="home-nav">Home</a>
          <a href="#menu" class="menu-nav">Menu</a>
          <a href="#contact" class="contact-nav">Contact</a>
        </div>`;
  return header;
}

export default headerFunc();

function headerFunc() {
  const header = document.createElement("div");
  header.classList.add("header");

  const navbar = document.createElement("nav");
  navbar.classList.add("nav-bar");
  header.appendChild(navbar);

  navbar.innerHTML = ` <nav class="navbar">
        <div class="main-nav">
          <a href="#home" class="home-nav">Home</a>
          <a href="#menu" class="menu-nav">Menu</a>
          <a href="#contact" class="contact-nav">Contact</a>
        </div>`;
  return header;
}

export default headerFunc();

5 Replies

Jochem•16mo ago

Security-wise, there's nothing wrong with this

  navbar.innerHTML = ` <nav class="navbar">
        <div class="main-nav">
          <a href="#home" class="home-nav">Home</a>
          <a href="#menu" class="menu-nav">Menu</a>
          <a href="#contact" class="contact-nav">Contact</a>
        </div>`;

  navbar.innerHTML = ` <nav class="navbar">
        <div class="main-nav">
          <a href="#home" class="home-nav">Home</a>
          <a href="#menu" class="menu-nav">Menu</a>
          <a href="#contact" class="contact-nav">Contact</a>
        </div>`;

It's only a security issue once you add user generated content in there. So this would be an issue:

  navbar.innerHTML = ` <nav class="navbar">
        <div class="main-nav">
          <a href="#home" class="home-nav">Home</a>
          <a href="#menu" class="menu-nav">Menu</a>
          <a href="#contact" class="contact-nav">Contact</a>
          <a href="#profile" class="profile-nav">${user.name}</a>
        </div>`;

  navbar.innerHTML = ` <nav class="navbar">
        <div class="main-nav">
          <a href="#home" class="home-nav">Home</a>
          <a href="#menu" class="menu-nav">Menu</a>
          <a href="#contact" class="contact-nav">Contact</a>
          <a href="#profile" class="profile-nav">${user.name}</a>
        </div>`;

The way you'd do that with createElement and such:

const nav = document.createElement('nav');
nav.classList.add('navbar');
const div = document.createElement('div');
div.classList.add('main-nav');
nav.appendChild(div);
const a1 = ...

const nav = document.createElement('nav');
nav.classList.add('navbar');
const div = document.createElement('div');
div.classList.add('main-nav');
nav.appendChild(div);
const a1 = ...

It's very verbose

CDLOP•16mo ago

Oh I didn't know that about innerHTML, that's good to know! perfect so you're just creating the element, adding a class, appending the element, so it is what i thought and I most definitely was ovethinking it all 😄 Thanks Jochem 🙂

Jochem•16mo ago

np! you can even set all the stuff on the A's with the same var:

const a1 = document.createElement('a');
a1.href = '#home';
a1.classList.add('home-nav');
a1.innerText('Home');

const a1 = document.createElement('a');
a1.href = '#home';
a1.classList.add('home-nav');
a1.innerText('Home');

CDLOP•16mo ago

Perfect! This project suddenly went from very difficult, to quite simple 😂

Jochem•16mo ago

nice!

Gaming

Programming

Changing innerHTML content into createElement/Append - What is the best way to attack this?