Capture the Flag

2025-01-15

Note: Details of this challenge have been obfuscated so as to not ruin the applicant or recruiting experience.

Most of the time, applying to jobs can be a pretty monotonous process. For one thing, you are endlessly pasting the same boilerplate information into the same portal instances (usually, Workday). There was one application I won't easily forget. Among the typical questions, the hiring manager has put a very specific and cryptic question:

Decode this string: WkdFdGRYSnNMblZ6TFdWaGMzUXRNUzV2Ymk1aGQzTXZjbUZ0Y0MxamFHRnNiR1Z1WjJVdGFXNXpkSEoxWTNScGIyNXpMdz09==

The two "==" at the end of this string triggered some long-forgotten memory that this was probably a base-64 encoded string. Sure enough, when I popped open my browser console and decoded it, I got a valid URL!

atob(encoded);
// => "https://[redacted].lambda-url.us-east-1.on.aws/[redacted]-challenge-instructions/"

Eureka! I thought this might have been the end of this challenge, just to see if I could decode this string. I expected there to be some sort of magic word I would find at that URL that would act as a sort of filter on the stack of applications that would look at. However, when I followed it, I saw this:

First up, we need to extract the hidden URL from the provided URL. There is a lot of information given about the specific structure of the DOM at this URL. The first thing I notice is that unless there are "false flag" b elements with class "ref", a simple CSS selector for b[classname="ref"] should get everything we need. This returns a list of Nodes, so we need to pull out the value of the "VALID_CHARACTER" attribute with some Javascript:

const nodes = document.querySelectorAll(".ref"); 
let result = "";
nodes.forEach((node) => {
 result += node.attributes[1].value;
})
//result => "https://[redacted].lambda-url.us-east-1.on.aws/656e64"

Success! We got the URL stored in our result variable.

Going there, we find the following:

<html>
	<body>
		endears
	</body>
</html>

The final step is to do a native javascript fetch call to grab the body text of this HTML, and then rended it character by character in a "typewriter" fashion.

The FlagComponent starts off by fetching the url attribute passed down to it. Until it gets its response, it renders some loading text. Once we receive the flag, we loop through and calculate what the "new flag" should be based on an index. Finally, we update the displayedFlag property which causes the rendering to change. We do all of this on a 500ms time interval to produce the typewriter aesthetic.

Closing Thoughts

There are a few reasons that I think enjoyed this challenge (as opposed to skipping the application):

1. It had a reasonable scope. This entire task was doable in about 20 minutes.
2. It was relevant to the frontend role in question.
3. The challenge was fun. Knowing that the author took the time to set up the different hosts and instruction for this told me a lot about what the hiring manager might be like.

In summary, I was a huge fan of this challenge. I think the reason for that is that this type of challenge because feels way more realistic to how development work actually works in practice. You do have access to the web. There aren't artificial time constraints. Yet it tested perseverence and general knowledge of how Frontend works and the candidate's perseverence to complete it. It's a measure of demonstrated interest in both the field and the specific role, and I will hold it as the best example of something like this being great.