<div id="main"></div>
// Mockups
document.createChatBox = function(str){console.log(str)}
const createChatBox = function(str){console.log(str)}
// Suspicius variables
const id = '\");alert("pwned'
const name = "myName <a href='#'>pwned</a>"
// Get main div to try stuff
const mainDiv = document.getElementById("main")
// Dangerous way
mainDiv.innerHTML = "<div linkedId='"+id+"' onClick='createChatBox(\"groups_"+id+"\")' class='group-item'>"+name+"</div>"
// Safe way
let newDiv = document.createElement("div")
newDiv.setAttribute("linkedId", id)
newDiv.onclick = function(){createChatBox("groups_"+id)}
newDiv.innerText = name
mainDiv.append(newDiv)
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.