JAVASCRIPT KIDDIE

Typing anything in produces a broken image.

INSPECT WEBPAGE

There is a function which assembles a PNG by shifting bytes determined by the user’s input that is interesting

function assemble_png(u_in){
				var LEN = 16;
				var key = "0000000000000000";
				var shifter;
				if(u_in.length == LEN){
					key = u_in;
				}
				var result = [];
				for(var i = 0; i < LEN; i++){
					shifter = key.charCodeAt(i) - 48;
					for(var j = 0; j < (bytes.length / LEN); j ++){
						result[(j * LEN) + i] = bytes[(((j + shifter) * LEN) % bytes.length) + i]
					}
				}
				while(result[result.length-1] == 0){
					result = result.slice(0,result.length-1);
				}
				document.getElementById("Area").src = "data:image/png;base64," + btoa(String.fromCharCode.apply(null, new Uint8Array(result)));
				return false;

After doing a thorough scan of the network tab I noticed a bytes file that was being transferred .

Upon further investigation I found that this is the bytes being shifted.

FURTHER RESEARCH

I researched the structure of a PNG with help of https://www.garykessler.net/library/file_sigs.html

We can see that the PNG must follow a structure that contains these first 8 bytes for the follow a sequential order consisting of 4 bytes of length and 4 bytes of chunk type. It also has a length of 0xD hence we can gather that the next 8 bytes will be 00 00 00 0D 49 48 44 52

MANUAL APPROACH

I then manually checked where each correct byte is and noted the row and column of it

FINAL SHIFT KEY

The final shift key after recording each column and row where there is a shift

4894748485167104

FLAG

Using https://dnschecker.org/qr-code-scanner.php I was able to successfully obtain the flag🎉

💡

picoCTF{7b15cfb95f05286e37a22dda25935e1e}