This challenge splits the flag into three places that are all visible from the browser if we look at the right layer.
The first layer to check in beginner web challenges is the page source. In the browser this can be opened with
The first part is directly in that HTML source:
CSCG{access_granted_
For the second part, the page has a timer before it shows the button. Timers and buttons like this usually run in JavaScript, so the next place to look is the browser developer tools. I opened devtools with
The interesting variable is
countDownTime = 10000;
function countDown() {
countDownTime--;
if (countDownTime > 0) {
document.getElementById("flag-timer").innerHTML = countDownTime;
} else {
clearInterval(countDownIntervalId);
document.getElementById("flag-button").innerHTML = ""+
'<a href="." onClick="showFlag();return false;">Show flag!</a>';
}
}
There is no need to wait. JavaScript runs on our own machine, so we can interact with these variables in the console. In devtools, switching to the "Console" tab and setting the counter to zero skips the waiting:
countDownTime = 0
Clicking the button then runs
e7e768b0
The last part is in the HTTP response headers. Headers are metadata sent together with the page. They are not shown in the visible HTML, but the browser still receives them.
To inspect them, I opened the "Network" tab in devtools, reloaded the page, clicked the main document request, and looked at the "Headers" section. There is a custom response header called
_to_the_next_level}
Putting the three parts together gives the flag:
CSCG{access_granted_e7e768b0_to_the_next_level}