JSFiddle - React, Tailwind, and code Playground

by sketchfab

HTML

<div>console.log('a')</div>
<input type="text" name="toeval" />
<div id="sandbox"></div>
<div id="result"></div>

JavaScript

window.addEventListener("message", function(event) {
  if (!event.data.evalization || !event.data) return;
  $('#result').text += event.data.res;
}, false);


var input = $('[name=toeval]');

input.on('change', function() {

  var val = $(this).val();
  
  var str2Eval = [];
  str2Eval.push('<html>');
  str2Eval.push('<head><\/head>');
  str2Eval.push('<body>');
  str2Eval.push('<script>');
  str2Eval.push('window.addEventListener("error", function(event) { ');  
  str2Eval.push('    window.parent.postMessage({');
  str2Eval.push('      type: "error", ');
  str2Eval.push('      evalization:1, ');
  str2Eval.push('      res: str ');
  str2Eval.push('    }, "*"); ');
  str2Eval.push('  };');
  str2Eval.push('})');
  str2Eval.push('  console.log = function(str){');
  str2Eval.push('    window.parent.postMessage({');
  str2Eval.push('      type: "log", ');
  str2Eval.push('      evalization:1, ');
  str2Eval.push('      res: str ');
  str2Eval.push('    }, "*"); ');
  str2Eval.push('  };');
  str2Eval.push('  window.parent.postMessage({');
  str2Eval.push('      type: "result", ');
  str2Eval.push('      evalization: 1,');
  str2Eval.push('      res: eval("' + val + '"),');
  str2Eval.push('     }, "*");');
  str2Eval.push('<\/script>');
  str2Eval.push('<\/body>');
  str2Eval.push('<\/html>');
  
  var code = btoa(str2Eval.join('\n'));
  var frame = $('<iframe sandbox="allow-scripts" src="data:text/html;base64,' + code + '"></iframe>');

  var sandbox = $('#sandbox');

  $('#result').text = '';
  sandbox.html(frame);
});