Original before eval-1

<p id="eval-1">Original before eval-1</p>

<script>
document.addEventListener('DOMContentLoaded', function() {
  var text = '[!] Changed with eval in eval-1';
  eval("document.getElementById('eval-1').textContent='" + text + "'");
  window.executed['eval-1']=true;
});
</script>

Original before eval-2

<p id="eval-2">Original before eval-2</p>

new Function(`document.getElementById('eval-2').textContent='[!] Changed from external using new Function()'`)();

Original before eval-nonce

<p id="eval-nonce">Original before eval-nonce</p>

<script nonce="678ae5e658f704">
document.addEventListener('DOMContentLoaded', function() {
  eval("document.getElementById('eval-nonce').textContent='[!] Changed with eval with nonce'");
  window.executed['eval-nonce']=true;
});
</script>

Style in element will make it purple

<p id='style-attr' style="color:rgb(140, 20, 252)">
  Style in element will make it purple
</p>

Style makes this blue

<p id='style-inline-nonce'>Style makes this blue</p>
<style nonce="678ae5e658f704">
 #style-inline-nonce{color: rgb(0, 0, 255);}
 #style-inline-nonce:before{content: 'Changed ';}
</style>

Style will make this red

<p id='style-inline-wo-nonce'>Style will make this red</p>
<style>
 #style-inline-wo-nonce{color: rgb(0, 0, 255);}
 #style-inline-wo-nonce:before{content: 'Changed ';}
</style>

Style will make this aqua

<p id='style-self-external'>Style will make this aqua</p>

Secrets?

<p id='style-self-external-2'>Secrets?</p>
<input type='PassWord' name='password' value='love4ever' />

Inline JavaScript w/o nonce will change this color to green

<p id="inline-js-1">
  Inline JavaScript w/o nonce will change this color to green
</p>

<script>
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById("inline-js-1").style.color="rgb(0, 128, 0)";
  window.executed['inline-js-1']=true;
});
</script>

Inline JavaScript w/ nonce will change this color to orange

<p id="inline-js-2">Inline JavaScript w/ nonce will change this color to orange</p>

<script nonce="678ae5e658f704">
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById("inline-js-2").style.color="rgb(255, 165, 0)";
  window.executed['inline-js-2']=true;
});
</script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css" />
<i class="fas fa-align-justify"></i>
Font awesome icon, remote style

Should be a fancy font if google fonts loaded

<p class="google-font">Should be a fancy font if google fonts loaded</p>

Should be fancy font if @import works in css for google fonts

<p class="google-font-too">
 Should be fancy font if @import works in css for google fonts
</p>

<div data-youtube id='iframe-remote-youtube-2'></div>
<script nonce='678ae5e658f704' src='https://www.youtube.com/iframe_api'></script>

window.onYouTubeIframeAPIReady = function() {
    Array.from(document.querySelectorAll('[data-youtube]')).map(function(el) {
        var id = el.getAttribute('id');
        new YT.Player(id, {
            height: '225',
            width: '400',
            videoId: 's4wrMMju-Xc'
        });
    })
}

<iframe id='iframe-remote-youtube' width='400' height='225' src='https://www.youtube.com/embed/s4wrMMju-Xc?enablejsapi=1&debugjs=1&debugcss=1' 
frameborder='0' allow='accelerometer;autoplay;encrypted-media;gyroscope;picture-in-picture' allowfullscreen></iframe>

<iframe src='https://player.vimeo.com/video/1084537' width='400' height='225' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Will change if xss triggers

<iframe border='0' src='xss.php' width='400' height='225'></iframe>
<p id='iframe-local'>Will change if xss triggers</p>

<video width="400" src="static/video-1.mp4" controls />

<video width="400" src="http://sneaker:8100/static/video-1.mp4" controls />

<img src="https://img.shields.io/badge/build-passing-brightgreen.svg" alt="From another domain" />

<img src='static/pic-1.jpg' height='200' alt='Same source' />

<img nonce='678ae5e658f704' src='static/pic-1.jpg' height='200' alt='Same source' />

<img alt='Data url' src='data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/2wBDAAEBAQEBAQEBAQECAQEBAgICAQECAgMCAgICAgMEAwMDAwMDBAQEBAUEBAQGBgYGBgYICAgICAkJCQkJCQkJCQn/2wBDAQICAgMDAwUEBAUIBgUGCAkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQkJCQn/wAARCAAwADADAREAAhEBAxEB/8QAGQABAQEBAQEAAAAAAAAAAAAAAAgKCQUH/8QAKxAAAAQFAwMDBQEAAAAAAAAAAgMEBQABBgcICRESExQWFRciGSRak9YK/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/ANhEAgEAgEAgEBOV3sw8R8fKlQ0ZfvKW3NkKwc0JTo20pV9bs1NOShtONNILVlJXFUSaMkZpJgAmSDxmIApSnuGewfVbb3OtteSi2a5FobhMd1bd1H3Hj1e027JXxlX9meYlP7dciMNIN6R5Qyx8RT4jCIM9pynKA9yp6npqiaaqGs6zqFDSNH0ihVulV1W6KykDa2NqAoR6pWrVHiAUSSSUAQzDBikEIZTnOcpSgJytvnVhHeStGa29ocxrV3VuJUfcePUFTdwmF8el/ZkGKj+3Qolhp5vSIKGYPiGfEARCntKU5wFUwCAxZ/6NdJfUEzxzctbd7FGwHurbunLVslNvNQ+VU2x9F6Rvz4tOT9B4ckZ4uJCwkXMIJgny2kKc5ClIO/WifjfejEbTHxnx6yFoz2+vBb7zPy+kPUULt2nq1Vuzkl+6bT1KUzqJVJY/gYLbltPYUpykFU51W3rS8mEeY1obbs3kdxLq2ruFTdBU93BCPv3p8YViJCn66owogrqnmhDzMGEAd9xClKU5wGLPRP0T9TjEbU4xnyFyFxn9vrP2+8z8vq/zOlHbtPVqUdm1L9q2uylUZ1FSksHwLFty3nsGU5yDfrAIBAIBAIBAIDizqN6YmXGad7qWulYTVYuNgxR7BSqFgcrS0gU8jbXFySr1ysx3Nm3VG0FdY4pUWSLckQuJIdxzlsEIQF9AjUm/Invh+iqf7iAfQI1JvyJ74foqn+4gKpwn0hc3MXsnLZ30u9rO3Uywt3Q3rPkNgKkKfgsr/wCptKtvI7ia2qnIj7U9QBSDkmH8yw7cZ7CCHfqAQCAQCAQCA//Z' />

<img id='img-src-blob' alt='blob url' src='blob:http://site.example.com/1b7b9af0-127b-43bc-95d9-800df9c08df0' />

<form>
  <input type="text" name="q" placeholder="Search ..." />
  <button type="submit">Search</button>
</form>

<form nonce="678ae5e658f704">
  <input type="text" name="q" placeholder="Search ..." />
  <button type="submit">Search</button>
</form>

<form action="https://www.google.com/search">
  <input type="text" name="q" placeholder="Search ..." />
  <button type="submit">Search</button>
</form>

<form nonce="678ae5e658f704" action="https://www.google.com/search">
  <input type="text" name="q" placeholder="Search ..." />
  <button type="submit">Search</button>
</form>

Will change once AJAX is done

<p id='ajax-local'>Will change once AJAX is done</p>

fetch('ajax.php')
    .then(function(response) {
        return response.json();
    })
    .then(function(d) {
        var el = document.querySelector('#ajax-local');
        el.textContent = d.msg;
    })
    .catch(function(err) {
        var el = document.querySelector('#ajax-local');
        if (!el) {return;}
        el.textContent = err;
    });

<script src="https://checkout.stripe.com/checkout.js"></script>
<button id="stripe-button">Stripe</button>

var handler = StripeCheckout.configure({
    key: 'pk_KBCS2K6UgQc8K9VZCtNMOK4AEl5aU'
    // Ignore me
});
var btn = document.getElementById('stripe-button');
btn.addEventListener('click', function(e) {
    var x = handler.open({
      name: 'Demo Site',
      description: '2 widgets',
      amount: 10,
      opened: function() { btn.classList.add('opened'); },
    });
    e.preventDefault();
});

window.addEventListener('popstate', function() {
    handler.close();
});

btn.click();
setTimeout(function() {
  var el = document.querySelector('[name=stripe_checkout_app]');
  if (!el) {return;}
  el.style.display='none';
}, 5000);

<a href="https://twitter.com/dandr3ss?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">
Follow @dandr3ss
</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<audio src='static/eddy_-_01_-_Pure_Adrenaline.mp3' controls />
<a href='http://freemusicarchive.org/music/eddy/2_Damn_Loud/Pure_Adrenaline_mastered-with-CloudBounce'>Source</a>

<embed src="static/smashing-the-stack.pdf" type="application/pdf" width="400" height="225">
</embed>

<embed src="static/jquery.svg" type="image/svg+xml" width="400" height="225">
</embed>

This changes if cloudflare jquery loads

<p id="script-src-cloudflare">This changes if cloudflare jquery loads</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

jQuery(`#script-src-cloudflare`)
  .text(`Changed using jquery from cloudflare cdn`)

This changes if jsdelivr d3 loads

<p id="script-src-jsdelivr">This changes if jsdelivr d3 loads</p>
<script src="https://cdn.jsdelivr.net/npm/d3@5.9.2/dist/d3.min.js"></script>

d3.select(`#script-src-jsdelivr`)
  .text(`Changed using d3 from jsdelivr`);

<a id="target-blank" href="tabnab.html" target="_blank">Tabby</p>

<a id="target-blank-ebay" href="https://www.ebay.com" target="_blank">Ebay.com</p>

Waiting for worker ...

<p id='worker-1'>Waiting for worker ...</p>

(function(){
  if (!window.Worker) { return;}
  const worker = new Worker('/static/worker.js');
  worker.onerror = function(e) {};
  worker.onmessage = function(e) {
    var el = document.getElementById('worker-1');
    el.textContent = 'Result from worker - ' + e.data;
  };
  setTimeout(() => worker.postMessage([2, 2]), 1000);
})();