Rating:
TLDR (full writeup @ [https://www.nullhardware.com/reference/hacking-101/picoctf-2022-greatest-hits/live-art/](https://www.nullhardware.com/reference/hacking-101/picoctf-2022-greatest-hits/live-art/)):
1. With your browser window **really** small, goto `/drawing/abcd#src=1&onerror=alert(1)&is`. You'll get an "error" page telling you your window is small.
2. Internally it will create an object from the hash parameters `{src: 1, onerror: 'alert(1)', is: ''}`, this object will be stored as part of the react state.
3. Now resize your window so it is big and you should get an alert popup. The previous state is being re-used in the wrong context (*NOTE: in development mode, react spits out a bunch of error messages when you resize the page*).
4. Observe that the state variable is now directly used as the attributes for an image tag. *NOTE*: Normally react doesn't let you set the onerror attribute - you'd be required to use `onError` attribute where the value *must* be a function (not a string). However, the presence of the `is` attribute aborts that code-path (some webcomponent thing, found that trick here: https://ethanwu.dev/blog/2021/07/14/redpwn-ctf-2021-md-bin/).
5. You write a webpage to load the above page (with a payload to leak the value of `localStorage.username`) in an iframe and then programmatically resize the iframe. This page must be publically hosted, and it must be on port 80 or 443.
