varun.ch

You shouldn't need to write a scraper just to list the available electives

2025-07-24T00:00:00Z

My future alma mater is one of the best engineering schools in Canada (and in the world). But, you definitely wouldn’t think that by looking at the course selection webpage, course search page or student information system[1].

A list of every course offered by the school, but not a particularly helpful list if you’re trying to choose an elective as a first year student

One of my classes was missing from my schedule, so I logged into the course enrolment portal in search of answers.

After clicking around at the menus for a few minutes, I found out that my chosen elective’s enrolment was “unsuccessful” due to a scheduling conflict, so I needed to find a new elective, fast.

The school publishes a “List of courses that you might be able to choose” for incoming first year students… but for some reason, they only list course codes, and expect students to visit the Academic Calendar and then individually search up each course code just to find out the course titles. This would take hours by hand!!

How am I supposed to know which of these course codes interest me!?

Moreover if I want to see if a class conflicts with my schedule or is already full, I need to use the “Schedule of Classes” tool. It allows users to search a subject and see the classes, time and enrolment numbers, (among other information). Unfortunately, my brain simply can’t parse the information they present.

Apparently, I’m not alone. Because Waterloo publishes this 1,800 word long guide explaining how to read the table and understand its terminology.

I’m sure there are great legacy reasons to keep around this tool, but honestly, it’s overwhelming for new students like me. I’m not sure why, but I decided to write a web app which parses the official “Schedule of Classes” and presents it in a marginally more readable format for my purposes (and the idea was that, hopefully, along the way, I’d learn what all of the numbers mean)

I got relatively far with this…

… before learning that there’s an existing unofficial web service called ‘UW Flow’ that does exactly this, just way better, and with way more data (they’ve apparently been working on it since 2012).

UW Flow is great, but like the course search tool, it doesn’t solve my problems with browsing the first year appropriate electives (namely that I don’t know the names of the courses, just their course codes), so I began working on a second (and much less redundant) tool.

First, I grabbed the list of the course codes from the “List of courses that you might be able to choose”

Array.from(document.querySelectorAll('tbody td:nth-child(2)')) // fall 2025
  .flatMap(td => td.innerText.split(','))
  .map(code => code.trim().replaceAll(' ', '')) // SCI 206 --> SCI206
  .filter(code => code) // removes empty strings

// Array(173) [ "AFM101", "AFM123", "AFM131", "ASL101R", "ANTH100", "ARABIC101R", "ARBUS101", "BIOL130", "BIOL130L", "BIOL225", … ]

Then I scraped the data from UW Flow (sorry UW Flow maintainers!)

const courseCodes = [
  "AFM101",
  // ...
]

async function fetchCourseData(code) {
  const query = {
    operationName: "explore",
    variables: { query: `${code.toLowerCase()}:*`, code_only: false },
    query: `
      query explore($query: String, $code_only: Boolean) {
        search_courses(args: { query: $query, code_only: $code_only }) {
          course_id
          name
          code
          useful
          terms
          terms_with_seats
          ratings
          prof_ids
          liked
          easy
          has_prereqs
          __typename
        }
        search_profs(args: { query: $query, code_only: $code_only }) {
          prof_id
          name
          code
          clear
          course_ids
          course_codes
          engaging
          liked
          ratings
          __typename
        }
      }`
  };

  const response = await fetch("https://uwflow.com/graphql", {
    credentials: "include",
    method: "POST",
    mode: "cors",
    headers: {
      "Content-Type": "application/json",
    },
    referrer: `https://uwflow.com/explore?q=${code}`,
    body: JSON.stringify(query)
  });

  const json = await response.json();
  console.log(`${code}: ${json?.data?.search_courses.length}`);
  
  return json?.data?.search_courses?.[0] || null;
}

async function fetchAllCourses() {
  const courseDetails = [];
  for (const code of courseCodes) {
    try {
      const data = await fetchCourseData(code);
      if (data) {
        courseDetails.push(data);
      } else {
        console.warn(`No course found for: ${code}`);
      }
    } catch (err) {
      console.error(`Error fetching ${code}:`, err);
    }
  }
  return courseDetails;
}

fetchAllCourses().then(result => {
  console.log(result);
});

Once I had the course information, I threw together a webpage[2] with a sortable table listing the course names, codes, IDs, and their ratings from UW Flow… and just for fun, I added a dice button to randomly highlight a potential elective.

uw-firstyear-electives.varunbiniwale.com

This whole thing took under half an hour, and should save me (and anyone else) much more time than that.

To be honest, I’m not sure how other students were supposed to pick electives without either coding a tool or slowly losing their will to live in the Schedule of Classes. Maybe they visited each elective’s page by hand and put together spreadsheets. Maybe they picked the first thing that didn’t sound terrible. But for me, a bit of scraping, parsing, and duct-taped UI was easier than decoding the legacy interface that looks like it was designed for robots by robots with a deep hatred of undergrads.

Also, I still haven’t picked an elective. But at least now I can scroll past 172 of them faster.

The world's most unhinged video wall (made out of Chromebooks)

2025-03-01T00:00:00Z

This is the story of our three year long journey to turn a fleet of laptops into what can only be described as the world’s most unhinged video wall.

This project was a collaboration with my friend Aksel Salmi. I was responsible for the software, and he designed the incredible hardware, see his blog to learn about the unexpectedly complex hardware needed to mount these dismantled computers[1].

About three years ago, my Design teacher (The amazing Mr. Bush) came to us with an idea - our school was about to dispose of its fleet of Chromebooks, and he was wondering if we could build anything with them.

Meet the Lenovo ThinkPad 11e #

The Lenovo ThinkPad 11e could very well be the world’s worst laptop. It is also the standard-issue school laptop that reinforced eight-year-old me’s interest in computers.

We used this school-issued laptop through primary and the start of middle school. This is me in 5th grade using a school laptop while working on my PYP Exhibition project (a game on Scratch)[2].

Despite my emotional connection to them, today these devices are, for all intents and purposes, junk. And for that reason, my school began the process of replacing them (with marginally less junky laptops)

These things don’t receive software updates from Google anymore, they struggle loading most webpages and to top it off, they’re tied to some long forgotten Enterprise Enrolment system, so they can’t even be used without a school Google account.

What is a video wall? #

A video wall is a large display made up of multiple screens arranged together to create a single, seamless display across all the screens. In the case of our project, we decided to try reusing the laptop screens to build a video wall.

Can we drive the screens using separate hardware? #

Our first idea was to harvest just the laptop display panels and somehow drive them using a powerful computer that could power the 10 screens simultaneously. We did not go this route (due to the fact that we had no idea what we were doing, and a quick estimate of the time and costs involved scared us away).

Okay, before we try anything else, let’s just try synchronising a video across two devices #

Since the screens were attached to perfectly functional laptops, it was quickly apparent that we’d probably be better off letting each screen be driven independently by their own laptop motherboards.

At this point, there were still many questions (eg. how were we going to do that on Chromebooks), so we put aside that challenge to focus on the new issue this brings up: Can we synchronise a single video across multiple computers?

Our experiments brought us to the school’s computer lab, where we experimented with VLC’s streaming abilities to get a stream synchronised across devices on a single network, but this posed two challenges: This system is not designed for videos being perfectly in sync, nor was it designed for two clients to receive different video inputs (because the whole point of the video wall is to display one loooooong video across the screens, not 10 repeat copies of the same video).

We were stuck here until my ““breakthrough””.

For context, the story is currently in 2022. Two years earlier, I had been locked up in my room due to the COVID lockdown, and in this time, I had loads of fun building random realtime web apps, like a chat app and multiplayer drawing game. These apps worked thanks to socket.io, a (primarily) WebSocket based library that allows for low-latency, bi-directional communication.

Screenshot of a chat site I made to pass the time during the 2020 lockdown

I realised that my best bet to get videos synchronised would be by using a web page that used socket.io to sync the video playback across clients. Yes, there are better approaches, but simply doing something like this worked unreasonably well, all things considered.

<video src="..." id="video">
	  Your browser does not support the video tag.
</video>

const socket = io();

// ...

socket.on("play", () => {
	const videoElement = document.getElementById("video");
	videoElement.play();
});

I named this ExpressJS server/client system c-sync[3].

Thanks to c-sync (and tons of tinkering), after some time we had decently synchronised videos across computer screens through a webpage (or at least it seemed like it, testing on these desktop computers)

As it turns out, in reality, the Chromebooks are too slow for this to be a reliable approach to synchronising playback, and tiny discrepancies in loading times + latency + system clocks etc. lead to videos not being synchronised.

Now, I’m not entirely sure why this works so well, but I came up with a ridiculous solution by accident. When videos reach the end of playback, each client emits the start event.

video.onended = () => {
	socket.emit("start");
	// yes seriously, this is all I needed
};

This means that the slowest computers hold back the fastest computers, and get the chance to load the videos. This also means looping can be a very slightly jittery process (with each screen receiving 10 ‘start’ events), but as long as the first couple frames of the video are identical, nobody would even notice.

Sidenote: why not schedule with timestamps

Modern computers have clocks you can rely on to be extremely precise. This plus regular NTP synchronisations means a reasonable person might just try to ensure the full video is cached, then just send a 'start' event to each client that schedules the client to start playback at a given timestamp. Unfortunately, these Chromebooks could not reliably keep track of time within milliseconds of each other, so this method didn't work for us.

Using this method, we have nearly perfectly synchronised video playback, and can play any video on any screen (meaning we can split a wide video into 10 segments, and each computer displays its respective part, all in sync with eachother)

Putting it together #

A disassembled Chromebook open to a test video

We reached this stage within a month or two. Believe it or not, this project still had three years of work ahead of us. The biggest issue was Chromebook software. At this point, we had a website that we could manually open on each laptop to display a fullscreen synchronised video.

Ideally, we would want this to be entirely automated, so that as soon as a Chromebook receives power, it boots up automagically to the c-sync client page. Unfortunately, right now, booting the Chromebook would just take you to a Google login page (and one that was locked to our school domain to boot).

Also, just to add insult to injury, when batteries are removed, the laptops don’t turn themselves on when they receive power (you have to hold down the power button)

This meant that our next step would have to be to replace ChromeOS with something else.

The ‘ChromeOS Firmware Recovery Script’ is a magical piece of technology that somehow supports many different Chromebook motherboards. Ours was called ‘GLIMMER’. We just had to enter the built-in ‘Recovery Mode’, enable ‘Developer Mode’ and use the ChromeOS Shell to run the script.

Now we’re basically on the home stretch. All we needed to do was pick up some stable Linux distro, write a hacky startup script that loads up Chromium and simulates the keystrokes to fullscreen the video and we’re done!

We ran in to two main issues: Some Chromebooks (roughly half of our working laptops) would refuse to enter developer mode due to the enterprise enrolment, and while we were able to get the other half onto a Linux distro, video playback would consistently freeze after some time (actually they would lock up entirely).

It took us several months of on-and-off experimentation to figure out what to do. Essentially, the solution was to overwrite the entire default firmware with coreboot (which is also possible using MrChromebox’s script). We just needed to remove the ‘Write Protection’ screw from each laptop motherboard, and this seemed to bypass the enrolment too.

Lenovo’s handy Write Protection screw diagram

Doing this for 20+ computers was slow and tedious. We only really needed the WiFi, motherboard and screen in working condition, but we decided to be (mostly) gentle and keep the laptops looking like laptops so that we had a keyboard and mouse for the rest of the installation steps.

By the end, we got quite efficient at removing the write protection screw

After ‘corebooting’ the Chromebooks, we were also pleasantly surprised to find out that ‘Wake on AC’ was a feature of the firmware, and that video playback no longer randomly breaks. By this point we had enough non-bricked Chromebooks left over for a line of 10 screens and a handful of spares.

The Final Stretch #

Now we’re really on the final stretch. Aksel worked on the mounting hardware, which you can read about on his blog, while I worked on figuring out a less flaky way to ‘boot to a webpage’ than the keystroke simulation and startup script I bodged together.

I previously used the aptly named ‘FullPageOS’ for a different project (which I briefly mention in my TED talk, which you should watch), but it doesn’t run on x86 hardware.

I landed on using ‘Porteus Kiosk’, which is just a minimal Linux distro that opens a fullscreen Chromium browser with all the correct flags for hands-off usage (eg. allowing video playback without user interaction)

This honestly worked totally fine, but left me unsatisfied for two reasons. Firstly, I didn’t like how we couldn’t customise the splash screen, so our project would be forever stamped with the Porteus logo on every startup (which would be every morning). And secondly, in search of a better issue to justify the extra work, I realised we can’t remotely do anything to the installations (eg. changing the page URL) without re-doing them, which would be definitely a problem once these get mounted on the wall.

For those good reasons, I embarked on the journey of building ‘my own distro’ that we could install on the laptops. The system should start with something minimal (no desktop environment), and have an elegant script to autostart a kiosk mode Chromium instance.

I first tried NixOS before quickly realising there was no way it would work with the tiny amount of storage on these Chromebooks (and it failed to install with every single attempt).

Then I gave up, started with a Debian minimal install and just wrote a script that would provision a client (generate a ‘KIOSK_ID’, set its hostname to csync-client-$KIOSK_ID, connect to the school’s WiFi, create users/permissions and set up openbox to autostart a fullscreen kiosk mode Chromium).

Then after attempting to repeat this on a second machine, I realised I would be wasting so much time (installing Debian is very ‘hands-on’ - you need to press lots of buttons), and I discovered ‘FAI - Fully Automatic Installation’ and the web FAI.me tool. To cut a long story short[4], after redoing everything for the millionth time, I had a single USB that I can plug in to any ‘corebooted’ Chromebook which provisions it as a c-sync client. Woohoo!

I also built out a ‘controller’ for c-sync which lets us manage connected clients and assign them videos.

After a successful three day stress test where the playback remained butter-smooth (and I sacrificed my ability to sleep for the greater good of testing with the backlight on), we were ready to mount these laptops on the wall.

Mounting #

The mounting is mostly Aksel’s thing, so I implore you to read his blog, but here are some cool photos from the process. (also aren’t our cable splices so pretty and not terrifying?? 😁❤️)

An early iteration of the mounting backplate using a laser cut acrylic piece

Aksel designed a pretty awesome looking backplate to mount the motherboard, which hangs on cleats on the walls. The displays are then held in place with clampy things. This is black magic to me.

Everything laid out

Preparing some displays and motherboards

We decided to splice together power cables so that each power supply could power two computers. Send any complaints to the pager on my contact page

Nearly there!

One last thing… #

After we painstakingly mounted everything, I realised something sort-of important. Computers generate heat. Somewhere along the way of wiping away the firmwares, the laptop fans stopped spinning, which meant things get quite hot quite quickly. I had to figure out a way to get those working again before we could comfortably leave this up 24/7 (well, actually 12/7).

Embedded Controllers #

You can apparently interface with the ‘ChromeOS Embedded Controller’ using a tool called ectool, which should allow you to manually set fan speeds (among other things). The online documentation for this is lacking, and there’s apparently a slightly different ectool from coreboot and from Google directly. None of this made much sense at all to me, and no built ectool binary I could find would work. At some point, I found a dead link, but thanks to the magic of the Wayback Machine, I was able to get my hands on something that wouldn’t immediately crash.

By some miracle, this version of the tool actually works perfectly fine at setting fan speeds, and after some testing, I found some goldilocks values that balance noise and temperature.

Aside: Making Videos for the Thing #

As it turns out, making such a wide video is actually not easy. Each display has a resolution of 1366× 768, and very few pieces of software will let you edit a 13660 × 768 video. Final Cut Pro and Blender are the only programs we were able to do anything this wide in.

Blender is one of the greatest pieces of software ever created (alongside c-sync)

Then it’s just a matter of rendering the wide video and splitting it into 10 segments.

#!/bin/bash

# in case anyone ever has this insane use case again

input_video="input.mp4"
prefix="v8"

width=1366
height=768

segments=10

for ((i=1; i<=segments; i++)); do
    x_offset=$(((i - 1) * width))
    output_file="${prefix}-${i}.mp4"

    ffmpeg -i "$input_video" -vf "crop=$width:$height:$x_offset:0" -c:a copy "$output_file"
done

echo "Splitting complete!"

In all its glory #

Boot Sequence and ‘Self Calibration’ #

Synced videos! #

Now there’s an enclosure and cable routing! #

Yes, it’s imperfect #

Our video wall is imperfect. TN panel viewing angles suck, and the screens vary in colours and stuff. Yes, the synchronisation isn’t perfect, and yes, I’m sure there were better alternatives for nearly every decision we made along the way.

Yet I love our video wall, despite how absurdly weird it is. It’s a perfect representation of the iterative design process and a true testament to teamwork and collaboration. We turned E-Waste into something interesting. And maybe, just maybe, the real video wall was the friends we made along the way.

This project was made possible by the incredible work of so many people. Aside from my collaborator Aksel Salmi, our Design teacher Daniel Bush played a huge role in guiding us through the project.

Additionally, I wanted to thank the coreboot project and Matt ‘MrChromebox’ DeVillier for putting together the firmware and tools that allowed any of this to work. I would also like to thank Thomas Lange of the FAI project for his help in building the FAI.me based automated installer that saved us so many many many hours, as well as his support over email.

As silly as it sounds, this project was a backbone in my high-school experience. We hacked away at it every Monday for the past few years, and we grew up along the way too.

Browsers need to change how autofill works

2025-01-18T00:00:00Z

Typically, the highest impact of an XSS vulnerability on the web is gaining access to a victim’s account on the vulnerable website (either through a session token or by performing actions on their behalf while your code is running). If you’re particularly unlucky, an admin account could be exploited to perform more dangerous actions (like accessing additional user data) or something along those lines.

However, there is a known issue with Chrome and Firefox that nobody seems to be talking about. This issue allows attackers to escalate a vulnerability into something persistent that crosses security boundaries into other parts of the victim’s digital life. Moreover, it can enable persistent access to accounts, even if a site uses HttpOnly cookies or short-lived tokens.

People reuse passwords. #

People reuse passwords across sites—it’s just a fact. Even if you set that aside, I would consider this a vulnerability (or at least undesirable behavior) that more people should be aware of.

Aside from phishing attacks or compromising a site’s login flow, there should be no way for any vulnerability on a site to leak users’ passwords.

Unfortunately, Chrome and Firefox currently trade security for convenience, automatically filling password fields when you visit a website—with no user interaction required. This allows malicious code on a website to exfiltrate your login credentials without any visual indication that it’s happening.

Firefox

Google Chrome

Safari is not vulnerable to this. #

Safari: clearly requires user interaction in the form of biometrics—this is good!

It’s trivial for malicious JavaScript to insert a hidden login form and then read the values out, allowing it to exfiltrate your password with minimal (or no) visual indication or confirmation. On Firefox, my brief testing shows that this can happen on page load. Chrome, however, requires some user interaction before the input values can actually be read—although this could easily be triggered by an event on any click. Regardless, both browsers are vulnerable to this.

<form action="/form" method="POST" style="display: none;">
	<label for="username">Username:</label>
	<input
		type="text"
		id="username"
		name="username"
		placeholder="Enter your username"
		required
	/>
	<label for="password">Password:</label>
	<input
		type="password"
		id="password"
		name="password"
		placeholder="Enter your password"
		required
	/>
	<button type="submit">Submit</button>
</form>
<button
	onclick="alert(`username: ${document.forms[0].elements.username.value}\npassword: ${document.forms[0].elements.password.value}`)"
>
	Leak my credentials
</button>

Of course, this wouldn’t be as big of an issue if users didn’t reuse passwords. Although, it is a little ironic how, in this case, it’s the password manager that’s causing the problem.

Real-world applicability #

While this may seem like a fringe or extreme issue, I’ve been able to use this bug to escalate the severity of two other issues. In both cases, I found a way to upload arbitrary HTML files to a trusted domain. However, an XSS vulnerability alone was not able to exfiltrate much (due to a tight CSP), but this autofill trick worked and allowed me to leak login credentials.

Solutions #

Perhaps browsers shouldn’t autofill inputs that aren’t directly visible to users, or they should at least prompt users before autofilling credentials (ideally with a biometric verification step). Safari does this very well.

Try it out here: Demo

How to turn Firefox into a usable web browser

2024-11-19T00:00:00Z

This article is outdated! Firefox now ships a sidebar natively, and honestly, that alone is probably good enough for 99% of use cases.

Mozilla says that Firefox will be shipping better profile management and vertical tabs sometime soon. Until then, this blog post serves as a writeup about how I customised my Firefox experience to work the way I want it to.

By the end of this article, you will learn how I turned Firefox into a minimal, keyboard-driven and productive browser that looks like this: Disclaimer: I have received money from Google (creators of Chrome) and The Browser Company (creators of Arc Browser), however as you may notice, this will not impact my bias.

Background #

I hate Google Chrome. As in, I’ve been using Google Chrome since my birth, and I hate it. My first ever experiences on the web were on Google Chrome, the first laptops I used were Chromebooks at school, and when I finally got my own laptop, the first thing I installed was Google Chrome.

Google Chrome is a good web browser. It’s fast, efficient and most importantly, the web is built for Google Chrome. You will never find a website that doesn’t work on Chrome. Ultimately a web browser is a tool, so I will use the one that works the best.[1].

Unfortunately, Google’s business model results in Chrome being used as a tool for Google to track you. I am uncomfortable with this. This year, I have been trying to reduce my dependence on Google products.[2]

Last year, I switched from Chrome to Arc Browser, for two main reasons. Firstly, to try something new, and secondly, because I believed it was more privacy respecting than Google Chrome.

Arc is a browser based on Chromium - while some may object to this, I see this as an advantage. Any webpage designed for Chrome (which is unfortunately all of them) will work perfectly fine in Arc. Again, a web browser is a tool, so I will use the best one that exists.

Arc sells itself to people who want to organize their tabs. I certainly use a lot of browser tabs, but it’s never been a huge problem for me. Regardless, Arc’s solution to this works really well. Arc merges the idea of bookmarks and tabs into one sidebar, and this clicked for me. Essentially, you can use your bookmarks (“pinned tabs”) as if they were normal browser tabs, and they revert back to their pinned location when you close the page.

Trouble in Paradise #

I like to hack things. I was curious about the kind of technology Arc uses under the hood, so I started to reverse engineer the app’s network traffic on my Mac.

It would phone home constantly, which I was a little shocked by, and uncomfortable with. I also was not a huge fan of Arc’s dependence on Firebase, which is a Google product (more tracking!) and notoriously hard to secure [3] I also thought about how while I understood Google’s business model (more user data = more targeted ads = more revenue), I had no idea how The Browser Company makes (or intends to make) money, as a VC-funded startup. As a result, I was worried that Arc would either integrate features I don’t want, implement some kind of subscription service, or shut down entirely. None of these seemed like ideal scenarios.

My suspicions came true twice recently. Once was when xyzeva disclosed an incredible security issue in Arc and demonstrated more of the browser’s phone-home behaviour, and secondly, when The Browser Company announced that they were putting Arc aside to make a new browser aimed at the general population because “Arc would never reached one billion users”.

That Other Browser #

In search for a better browser, I found myself on Firefox. Apart from Chrome and Safari, it’s the only independent browser that people actually use, so many (but not all!) websites actually work in Firefox. uBlock Origin also works best on Firefox.

Firefox is basically subsidised by Google, but as long as I can disable any tracking, I don’t see this as a major dealbreaker. I don’t think Firefox tracks data for Google anyway.

It also comes with ads baked in.

Firefox works fine. It’s a little slow to startup on my M2 MacBook Air, but once it’s running, it works fine. There are some small annoyances (I wish I could thisisunsafe my way out of HSTS errors, and installing homemade extensions is difficult for no good reason), but none of them come close to the big dealbreaker with Firefox.

Firefox doesn’t really support browser profiles.

Browser Profiles #

I don’t understand how people can use the web without browser profiles. Chrome’s support for separate profiles is great. Arc’s support is amazing. Firefox’s is not.

In this world, there are at least three Varun Biniwales. One is a high-school student at a school in Zurich, another is a 17-year-old developer who has a personal blog, and is applying to university and the other one last worked at the Scratch Foundation. Separation between my school, personal and work profiles is an absolute must have.

On Chrome, each profile acts as a separate installation (with separate cookies, bookmarks, extensions and settings), but there are some niceties like an easy profile switcher and the separate profile windows count as one application on macOS (so you can just ⌘ + ` through them like normal windows)

Arc makes this a little better, with spaces and profiles. The sidebar lets you select a ‘Space’, which can be assigned to a browser profile. This solves the issue of having a billion browser windows open, because there’s only ever one Arc window open, and it displays only the profile you want. This comes down to individual taste, but I found it the best to focus in, as once I closed the sidebar, I would be fullscreen in a webpage with no easy way to switch to another window to procrastinate. Arc also shares some essential settings, but again, leaves cookies, bookmarks and extensions separate across profiles.

Firefox does not have profiles. Firefox has “containers,” which are simply not the same thing. Containers isolate cookies, and only cookies, which solves tracking and convenience issues, but they do not isolate bookmarks, extensions, and settings, which to me are must-haves. I use separate browser extensions (e.g., certain dev tools) in my personal account, which I would not want to risk sharing with my work or school accounts. Similarly, I never want any work- or school-related materials to leak into my personal life. Browser profiles help me focus, and so they’re a necessity. [4]

I lied. Firefox does have profiles. But you could be forgiven if you didn’t know that visiting “about:profiles” in a new tab and using an interface that looks like this was the way to manage them:

Once you have your profiles set up, you’ll find that they are even more isolated than Chrome. But there is zero integration between profiles (eg. the ability to send a tab to another profile), and they even show up as separate entries in the macOS dock and switcher. Unfortunately, there’s also no way to differentiate between profiles as they all have the same icon, and there’s no profile switcher in the interface. Until Mozilla makes profiles usable, simply install this unmaintained browser extension, and the associated connector, which prompts you for your password whenever you restart your computer (no idea why). But once it’s all done, you’ll have a decent menu to control your profiles, just like in Chrome.

Next, I tackled the issue of the tab bar. I kind of fell in love with Arc’s vertical tabs, so I tried to replicate them in Firefox. My main reason for wanting vertical tabs is that the Y axis of a 16:9 screen is expensive, while the X axis is usually unused and wasted on page margins. As a result, moving tabs to the left of your screen makes a lot of sense. You get more space to read page titles, and more space to keep your tabs.

(note that Firefox is supposedly shipping a native tab sidebar soon, but as of writing, even with the flag enabled, there is no keyboard shortcut to open and close it, so it’s useless for me right now)

Sidebery #

Sidebery is an amazing browser extension for Firefox. It acts as a new type of sidebar (Firefox has native sidebars for eg. bookmarks), and manages tabs in a way that almost feels native. By default, it can be opened and closed with Ctrl+E

Of course, this is silly unless you can hide the default tab bar. That’s when I discovered userChrome.css. userChrome.css turns Firefox from a 5 to a 10. Even if I hated Firefox, userChrome.css would make me love it. userChrome.css is the secret sauce that transforms the otherwise bland burger known as Firefox into the world’s greatest gourmet masterpiece of a burger.

userChrome.css #

Go to about:config, and enable toolkit.legacyUserProfileCustomizations.stylesheets. Then go to about:support and open the profile’s folder. Add a folder called chrome and create a file named userChrome.css. You are now free to literally style the browser’s interface to your hearts content. If you’re anything like me, this will blow your mind, because there’s now basically no limits on how your browser looks, and to some extent, how it functions. Firefox also has a “Browser Toolbox” that lets you use the Inspector on the actual browser chrome.

I use the following CSS to hide the tab bar.

#main-window[tabsintitlebar="true"]:not([extradragspace="true"])
	#TabsToolbar
	> .toolbar-items {
	opacity: 0;
	pointer-events: none;
}

#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
	visibility: collapse !important;
}

I also like to hide the Sidebar picker/header, because I only ever use Sidebery.

#sidebar-box #sidebar-header {
	display: none !important;
}

Then I found some CSS that someone wrote to make Firefox more compact… (I can’t find the original author, but if you can, please let me know!)

:root {
	/* Tabbar: reduce tab margin */
	--tab-block-margin: 4px 3px !important;
}

/* Tab: Reduce height */
.tabbrowser-tab {
	min-height: 24px !important;
}

/* Tab: Ensure tab height doesn't augment when arrowscrollbox is visible  */
#tabbrowser-arrowscrollbox {
	--tab-min-height: 31px !important;
	max-height: var(--tab-min-height);
}

/* Tab: Attention icon */
.tabbrowser-tab:is([image], [pinned])
	> .tab-stack
	> .tab-content[attention]:not([selected="true"]),
.tabbrowser-tab
	> .tab-stack
	> .tab-content[pinned][titlechanged]:not([selected="true"]) {
	background-position-x: left 2px !important;
	background-position-y: bottom 12.5px !important;
}

/* URLBar: Fix vertical alignment */
#urlbar[breakout="true"]:not([open="true"]) {
	--urlbar-height: 20px !important;
	--urlbar-toolbar-height: 24px !important;
}

/* URLBar: Fix URL address vertical aligment when megabar is open */
#urlbar[breakout="true"][open="true"] {
	--urlbar-toolbar-height: 30px !important;
}

/* URLBar: Reduce row items padding */
.urlbarView-row-inner {
	padding-inline: var(--urlbarView-item-inline-padding);
	padding-block: 2px !important;
}

/* URLBar: Reduce and realign row bookmark icons */
.urlbarView-type-icon {
	width: 10px !important;
	height: 10px !important;
	margin-bottom: 0 !important;
	margin-inline-start: 10px !important;
}

/* URLBar: Reduce "This time, serach with" padding */
#urlbar .search-one-offs:not([hidden]) {
	padding-block: 4px !important;
}

/* Searchbar: Ensure toolbar height doesn't augment when searchbar is visible */
#urlbar-container,
#search-container {
	padding-block: 0 !important;
}

/* Searchbar: Make sure the min-height of the input is the same as the popup */
#search-container {
	min-width: 192px !important;
}

/* Toolbar: Reduce spacing */
#urlbar-container {
	--urlbar-container-height: 30px !important;
	margin-top: 0 !important;
}

/* Reload Button: Fix vertical alignment */
#reload-button {
	margin-block-start: -2px !important;
}

/* AppMenu: Header */
.panel-header {
	padding: 4px 0 0 4px !important;
}

/* AppMenu: Header button */
.panel-header > .subviewbutton-back {
	padding: 4px !important;
}

/* Windows 10 context menu */
@media (-moz-os-version: windows-win10) {
	/* Context Menu: Reduce vertical space */
	menupopup > menuitem,
	menupopup > menu {
		padding-block: 2px !important;
	}
}

And also, since I never actually ever click them, why not get rid of the traffic light icons on the app in macOS altogether!

/* remove the 'native' titlebar (traffic light buttons and all) */

#TabsToolbar {
	display: none;
}

/* but it should be visible non main browsers */

#main-window[privatebrowsingmode="temporary"] #TabsToolbar {
	display: flex !important;
}

Then, for fun, I also customise the font:

* {
	font-family: Iosevka, Monaco, "Courier New", monospace !important;
}

Synchronising your userChrome across profiles #

All of this is wonderful, but you’ll have to duplicate all your work to style each browser and keep those in sync. Fortunately, Firefox supports CSS @import, so you can just write one main stylesheet, and import it for each of your browser profiles.

@import url(file:///Users/varun/Documents/code/firefox/base.css);

Finally, I customise each profile’s theme with Firefox Color, and I keep tiny colour tweaks per profile, like this

:root {
	--focus-outline-color: #cd23b9 !important;
	--in-content-primary-button-background: #cd23b9 !important;
	--in-content-primary-button-background-hover: #cd23b993 !important;
	--in-content-primary-button-background-active: #cd23b95c !important;
	--in-content-page-background: black !important;
}

.urlbarView-row[selected] {
	background-color: #cd23b9 !important;
	color: black !important;
}

Other tweaks #

I also fiddle with various Firefox settings to make the browser more usable. I don’t use a browser homepage, so I disable that other “Home” in about:preferences

The unlabelled checkbox next to “Search Shortcuts” allows you to remove options from the the “This time search with:” bar. If you disable all of them, it removes the bar altogether, which makes it actually possible to tab through search suggestions with your arrow keys.

Before:

After:

You can also play with Sidebery’s settings, I like to set the ‘Navigation bar’ layout to ‘hidden’. It also recommends setting svg.context-properties.content.enabled in about:config to true, which allows Sidebery to pick up on your Firefox theme. Combine this with a font defined in Sidebery’s configuration to make it feel native.

Finally, in about:config, I set browser.tabs.closeWindowWithLastTab to false (to match Arc).

Bonus #

Vimium.

Was this worth it? #

Sure, I had fun. And now my web browser works the way I want it to. This is not for everyone.

The user experience on Firefox is still kilometres behind Arc until they can add vertical tabs and better profile management natively (and some of Arc’s niceties like ‘Little Arc’). Even still, I would sorely miss being able to switch “Spaces” with the swipe of the sidebar, something which Firefox seems architecturally incompatible with. Putting all my Firefox profiles on separate macOS desktops gets close, but it’s just not the same.

Despite all that, I still had a lot of fun customising my Firefox setup, and it’s been my daily driver for a couple months now. Ultra-custom Firefox is like the desktop Linux of web browsers.

Aside: Zen Browser #

Zen Browser is an open source fork of Firefox that aims to replicate something like the Arc user experience. It still falls short in a few ways, and I’m generally more comfortable using a reputable browser like Firefox, rather than putting the most critical software on my computer (after the OS) in the hands of someone new like I did with Arc again.

Web browsers also have massive vulnerabilities all the time, and of course, it would take time for forks to catch up. I can’t trust that Zen Browser is getting these patches quickly.

Also Zen Browser intentionally enabled remote-debugging and intentionally disabled the warning messages, essentially leaving a backdoor for anyone on your network to exploit. Not cool.

The ideal browser #

My ideal browser would be Chromium minus the tracking, and with a far more minimal keyboard-driven interface (ideally with vertical tabs). If it could have something like userChrome.css, that would be huge.

Navigate MacOS popups using your keyboard

2024-11-11T00:00:00Z

I can’t believe this isn’t the default.

On MacOS Sonoma onwards, under ‘System Settings’ in ‘Keyboard’, turn on ‘Keyboard navigation’. This grants you the privilege of using Tab and Shift Tab to select options in popup menus.

Enjoy the marginal productivity improvement!

Make your shell 370.52% faster with this easy trick (fix nvm startup times)

2024-10-04T00:00:00Z

zsh was slow. A shell should not take nearly a full second to start. 814 milliseconds may not sound like a lot, but it’s extremely noticeable, especially when creating new terminal tabs or sshing into a server.

Time how long it takes for zsh to start:

time zsh -i -c echo

I was seeing upwards of 0.81 to 0.90 seconds on my MacBook (and worse on my spinning rust servers) for zsh.

Blanking out my .zshrc, my shell startup time dropped to below 0.03 seconds. Therefore I figured I was misconfiguring zsh. Commenting out lines one by one, the culprit was clear: nvm.

This is because I was using nvm installed using the recommended install.sh script. From my testing, this is fine in bash, but destroys zsh startup times.

Fix it #

To fix this, I used zsh-nvm, which has the ability to enable Lazy Loading - aka, only initializing nvm when I call any node-y programs for the first time. I know that zsh plugin managers exist, but they seem excessive to me, so I just copied the zsh-nvm.plugin.zsh script into a file at ~/.zsh-nvm.zsh

Then, simply comment out the auto-generated nvm lines from your .zshrc:

# export NVM_DIR="$HOME/.nvm"
# [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
# [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

And add these lines (with the correct path for where you saved the zsh-nvm file):

export NVM_LAZY_LOAD=true
source "/Users/varun/.zsh-nvm.zsh"

Before:

time zsh -i -c echo
# --> zsh -i -c echo  0.38s user 0.40s system 94% cpu 0.814 total

After:

time zsh -i -c echo
# --> zsh -i -c echo  0.06s user 0.08s system 84% cpu 0.173 total

How to hack the Breakthrough Prize (ft. Session Confusion)

2024-09-25T00:00:00Z

The Breakthrough Junior Challenge is an annual, global science video competition for high-school students. It’s run by Breakthrough Initiatives, the same organization that runs the Breakthrough Prize events.

In 2023, I discovered a critical vulnerability in the Breakthrough Challenge website. After over one year since it was patched, I am disclosing the bug for transparency. I believe this class of vulnerability, which I am introducing as ‘Session Confusion’, is often overlooked.

Set up #

While waiting for a video call related to an unrelated incident, I got bored and clicked around at my bookmarks. I rediscovered the Breakthrough Junior Challenge website that I submitted my entry to the year before.

The Breakthrough Challenge website allows participants to register accounts, which are used to submit personal details and video entries.

On a surface level, the website looks like it only exists for students.

But surely there has to be some kind of interface for the Breakthrough board to review videos, right?

Subdomains #

Subdomain enumeration is an extremely effective way to quickly discover the surface area of a web service. I found cp.breakthroughjuniorchallenge.org, which redirects to a login page.

Control… Panel…? #

This was a barebones login page - these are always fun, because it suggests whatever behind it is for internal use only.

Unsurprisingly, attempting to log in with my own account doesn’t work.

After trying different URLs, I quickly discovered that pages from breakthroughjuniorchallenge.org can be reached via cp.breakthroughjuniorchallenge.org, this suggests the applications are related in some way.

Session Confusion #

Exploring the cp.breakthroughjuniorchallenge.org domain further, I noticed that the login page’s structure mirrored the main site (minus styling). This raised a question: could the session management system be the same for both the public and internal sites?

To test this, I logged into my regular user account on breakthroughjuniorchallenge.org and captured the session cookie. Then, I tried to use the same laravel_session cookie on cp.breakthroughjuniorchallenge.org by simply changing the cookie’s domain scope to .breakthroughjuniorchallenge.org so it would be sent along on subdomains too.

Astonishingly, this worked. The internal control panel accepted my public session cookie, granting me access to administrative functions. This confirmed a serious vulnerability: the session tokens were not segregated between sites, leading to a case of “Session Confusion” (my own name).

It occurs in systems where session tokens, such as JWTs, are shared across multiple services without proper isolation. While the tokens themselves are signed and secure, the issue comes from the same session signing mechanism (the secret key) being used across both public-facing and administrative sites. This creates a security loophole, as a token issued for one context (e.g., a public site) can be accepted by another (e.g., an internal control panel), granting unintended access. In this case, the shared secret used to sign the session tokens allowed the internal site to mistakenly trust a session created for the public site, leading to unauthorized access to administrative functions.

Unauthorized Access #

Once inside the control panel, I found various administrative functionalities, including the ability to access user data, settings that alter the state of the competition and a directory of users. Fortunately, some of the interface was broken (relating to user management) - likely a side effect of my account not really existing on the admin site.

I would imagine that it would be possible to bypass the errors to make full use of the admin panel, but I did not want to access any sensitive data.

I tried to create a page on the root (expecting an error), but to my continued surprise, it went through and I had just edited the live running site. Oops.

Reporting #

I immediately undid any changes, logged out and reported this vulnerability via email detailing each step I took and the changes I made (just the creation and deletion of one page followed by invalidating my session).

Conclusion #

This bug would have allowed an unprivileged user to access some user data, modify competition state and vandalize the Breakthrough Junior Challenge website. The Breakthrough team responded extremely quickly, and the issue was fixed just 2 hours after I initially reported the vulnerability.

Timeline #

16:48 CET Jun 14, 2023: Email sent
18:55 CET Jun 14, 2023: Vulnerability acknowledged, “We believe we have fixed the problem.”
15:47 CET Jun 16, 2023: I acknowledge their reply, and confirm I can no longer reproduce the issue.

I asked on 12:34 CET Jun 24, 2023 and 12:36 CET Jun 23, 2024 about publishing this writeup. I did not receive a response. I am publishing this blog post today (with some details redacted) for transparency.

There's something fishy about the Flappy Bird revival

2024-09-12T00:00:00Z

Ten years after its sudden disappearance, Flappy Bird is making a comeback — but something about this revival doesn’t quite add up.

Articles like this around the web published today talk about the recent ‘The Flappy Bird Foundation Group’, which supposedly “secured” the rights to the Flappy Bird trademark, and is relaunching the once acclaimed game in 2025.

I’m not going to pretend to be a laywer, but this USPTO page seems to suggest the trademark expired and was claimed by one “GAMETECH HOLDINGS, LLC” in 2023. And this IGN article says that the trademark was then “acquired” by “The Flappy Bird Foundation” some time later. The original developer of Flappy Bird does not seem to be involved in any of this whatsoever.

Apart from the strange timeline for the re-release (the original Flappy Bird was developed in two to three days), I found the new flappybird.org website a little stranger.

With its overly polished look, the art feels eerily similar to the countless clones that have flooded the market over the years. After all, Flappy Bird is famously one of the most cloned games of all time. So, what’s really different about this “official” revival?

The flappybird.org home page on September 12th 2024… Telegram!?

It feels quite polished for what seems to be something made by a “team of passionate fans committed to sharing the game with the world”. Who is behind this, and what’s the goal? How are they making money? The trademark couldn’t have been free, so what’s the plan?

A quick google search for site:flappybird.org reveals some pages on the site.

Some appear to be simple variations of the landing page (ranging from minor copywriting changes to a “Coming Soon” page), and one appears to be a placeholder for a future merch shop, but there are a couple pages that really stand out.

The community page includes some of the same information from the home page, but also includes links for “Collaborations”, “Interviews” and a Press Kit. The only link that works is the Collaborations reach out button.

The collaborations page is barebones, but suggests there are some kind of upcoming Flappy Bird game jams. Interesting!

The last page “3-$Flap” reveals what this all may really be about.

Yay! Crypto!

The page states that the “legendary Flappy Bird™ is back and will fly higher than ever on Solana as it soars into Web 3.0” and that “Artists, developers and creators can build, play and earn from the legendary Flappy Bird IP” and “Flappy Bird will now be the world’s first open-source, community owned Web 2 and Web 3 game.”

This page seems to suggest that the original plan of the project revolved around cryptocurrency and “Web 3.0”. Some people may refer to these kinds of projects as “grifts”.

I also noticed that the website is built with WordPress. As a result, its sitemap is fully public, which allows us to enumerate the site’s pages.

So many pages!

Using this, I found that the oldest pages seem to be from around December 2023, and many of these pages reference ‘web3’ and crypto in a few places.

Furthermore, /flappywebgl and /flappywebgl2 actually feature some kind of prototype of the game itself, which is neat.

The loading screen, which prominently alludes to a ‘Flap Token’ on ‘TON’

It’s just a standard Flappy Bird clone, nothing particularly special there. But the game is embedded from a Google Cloud bucket… with the directory listing enabled!

Oops!

There are two builds that are particularly interesting here. One is dated 2024-08-08 and is titled v1.4.2.

This is a far more developed version of the game from the simple flappywebgl prototypes embedded on the WordPress blog. It’s playable and has a polished interface. Interestingly, while the flappywebgl used a distinct character design, this version uses the iconic Flappy bird. Perhaps they acquired the trademark some time in between?

The game’s homepage.

Addictive game is addictive.

Oh no

I don’t like this…

test19 is dated 2024-09-12 (today), and is a debug build of a much rougher game.

All the buttons that worked in the August build have been removed. What could this mean!?

Both builds feature a news section that loads data from staging-api.flappybird.org.

TAP, FLAP AND WIN! What does this mean!?

The game also loads in a leaderboard.

The request the web game makes to the staging-api.flappybird.org/api/v1/leaderboard endpoint

Naturally, the same endpoint on api.flappybird.org returns a similar list, although a little longer.

Maybe this game is already available in some kind of early access? I doubt there’s this large of a team actually developing the game.

Some Google searches show that these names are the usernames of various “Crypto Influencers”. Of course, there is no way to verify these are the same people, but some of them follow either @flappy_bird or @ton_blockchain on Twitter.

I was also able to find the Twitter account of the person responsible. They link to their game development company “1208 Productions”

“might of”

Their website states that they are “pioneering Web 3”.

“PIONEERING WEB 3”

The website lists various crypto projects, including ‘Deez’, an NFT brand. They also list some notable figures they “consulted with”.

Wait what?? Jordan Belfort??

I’m up too late looking at this. This exploration definitely helped me gain a greater understanding of what we’re looking at, but it still left me with so many questions.

Does this Flappy Bird revival have ‘web3’ and cryptocurrency roots? Absolutely.

Is it strange that none of the initial reporting on today’s launch mentions the web3 aspect of the game? Yes.

Is this Flappy Bird revival a “crypto ponzi scheme grift”? I don’t know.

Is this Flappy bird revival authorized by the original creator? Almost certainly not.

Is this a somewhat shady project with the goal of capitalizing off the nostalgic appeal of a beloved game while quietly aiming to make money from cryptocurrency and Web3 integration? It sure seems like it.

Most 16-year-olds don’t have servers in their rooms

2023-12-20T00:00:00Z

My servers: a Dell OptiPlex on the floor and a PowerEdge R720XD on an undersized IKEA coffee table. All networked together with beautiful red and yellow ethernet cables.

Hi, I’m Varun. I have a server in my room. Actually, I have two of them. And I write a ton of my own code for them. And I love it. This is a story documenting my homelab’s quiet beginnings, its spiralling evolution, and its uncertain future.

Today, I self-host a ton of stuff on my servers at home, including…

A home-made social media platform with thousands of users
Quickz, my realtime quiz game for schools
A demo instance of my MYP Personal Project, which was a platform for creating and sharing flipbook-style animations
Tools for the Scratch community, such as a search engine
A handful of game servers for my friends
A few Plausible Analytics instances
And a Replit-like tool for creating and hosting tons of experimental projects
And so much more…

It all started during lockdown in 2020. I was 13 years old and had a little too much free time. I decided to delve into web development with static HTML websites, and before long, I was building more complex apps that required backends. I used Replit to host web apps, and random scripts (Discord bots, automation, etc.), and I ‘hosted’ Minecraft servers for my friends by simply leaving my computer on.

I wanted more control and reliability so I jumped head-first into the wonderful world of self-hosting.

My original rationale for choosing to host at home rather than cheap cloud options was purely out of a desire to learn (at my scale, it’s probably more cost effective to pay for The Cloud). I wanted to learn the whole stack, from user-facing frontends, to the backends and databases that support them, to the servers that actually host them. All I needed was a computer (that wasn’t my desktop) online 24/7.

I got my hands on a Dell OptiPlex with an i7-3770S and 8GB of RAM from eBay. The process of getting it shipped from the US to Switzerland was actually a little frustrating[1], with the seller initially sending the wrong amount of RAM and refusing to compromise. But after several weeks, everything was sorted out. I decided to stick with the pre-installed Windows 10 Pro (yes, as a server OS!) simply because I was familiar with it.

Fast forward a few months, and this is how the desktop looked.

I got very lucky with one thing: as it turns out, we have a static IPv4 address at home, making it significantly easier and more stable to host websites[2]. I keep everything behind Cloudflare, which sorts out SSL, DNS, and supposedly even DDoS protection too, for free.

There were several benefits to using Windows 10 as a server OS (for me at the time):

I was already familiar with Windows
I could test everything in a similar environment on my own desktop
I could use RDP to get a fast high-quality connection to my server from home.
I could use Chrome Remote Desktop to securely connect to it from school (I had to use something web-based if I wanted to access it from my school-provided Chromebook).

But after enough Windows updates forced me to deal with downtime and retile my windows to a pretty layout, I decided to make the scary jump to Ubuntu Server in November 2020. For some reason, I was entirely terrified by this. I had grown comfortable with my cozy Windows setup, and I was worried that I was going to lose control and the ability to have a quick overview of my system. But alas, it was time for change.

I got going with Linux pretty fast - I had already been fairly comfortable with the command line on Windows while writing code, and it turns out, the Unix command line is quite similar.

My setup looked something like this:

nginx (serving HTTPS traffic on port 443 with self-signed certificates) exposed to the internet, rejecting requests not from Cloudflare.
Lots of random projects that I wanted to keep online 24/7.
One MongoDB instance running, shared across my projects.
A couple Minecraft Java servers
webssh2 exposed so I could still access my server from school. (this was probably so insecure!)

When needed, I would install third-party software, which occasionally needed their own dependencies and apt repositories, etc. This got very messy, very quickly. That’s when I discovered Docker, which was exactly the magic I needed. I use it to simplify installing and running third party software, while all my own code still runs directly on the server.

Fast forward around a year, I’m hosting some projects that actually have users (like Quickz and a social media platform I made) - and my server crashes while I’m at school. No big deal, I’ll just ssh in and see what’s wrong. Except I kept getting weird disk errors before finally getting locked out.

It turns out, I had simply run out of storage, deleting a few files at home bought me some more time. Moving forward, I had two options: replace the hard drive with something bigger, or let that be a problem for future-me.

I chose the third: explore getting a new server. At my current usage, the Dell OptiPlex was being pushed to its limits - 8GB of RAM and an i7-3770S weren’t really cutting it anymore.

In May 2022, I finalized the crazy decision to get a real rack-mounted server - I got a great deal on used drives (3x3TB), RAM (128GB of DDR3), and relatively powerful (read: power-hungry) CPUs (2xE5-2690) in a Dell PowerEdge R720XD, which I paid for with some bug bounty money I saved up.

I did not, however, consider the amount of space it would take up, the noise it would make, or the power it would draw. I solved ⅓ of those problems by using an unsupported hack to force iDRAC to limit the fan speed to a constant 10%.

My first impressions went something like this:

Wow this is heavy
Really heavy…
There’s two of nearly everything in here. Two power supplies, two CPUs, two NICs, there are actually even two computers here! The R720XD has iDRAC, which is basically a mini computer that stays on so the server can be managed remotely, even when it’s turned off. Awesome!

The server rested precariously on a coffee table next to the TV in the living room for a little bit. I’m sorry to my parents who had to put up with that[3]. It turns out, a rack and mounting equipment would have cost more than the server itself.

This time, I decided to use a hypervisor[4]. The server runs Proxmox, while the majority of the resources are dedicated to an Ubuntu Server VM (where everything runs neatly in Docker now). This gives me the flexibility to easily move things around in the future without having to set up everything again.

It also gives me space to run a Xubuntu VM named ‘backdoor’ that I use Chrome Remote Desktop on. It lets me access my home network in a comfortable workspace from anywhere in the world. Yes, I could set up a VPN (like OpenVPN or WireGuard), but this even works on (artificially) limited devices like the iPad and works on my school’s public WiFi. And as a bonus, I don’t have to worry about bots trying to bruteforce their way in. It might sound crazy, but this approach works really well[5].

Ironically after all of this, I ended up missing something about the Replit experience. I still used Replit fairly often to spin up quick isolated applications for one-off projects/experiments and demos (eg. a tool for my friends to grab their portraits from the school website). Nothing beated the workflow of writing code in the web based IDE and having it live and accessible to everyone on the web immediately.

It was amazing how Replit was free, but (entirely understandably) they started to implement features to actually make money. Inactive repls get disabled if nobody uses them, and as far as I understand, it’s not even possible to host public dynamic websites for free anymore. I also wanted to use my own hardware and domain I controlled.

So I built my own self-hosted Replit clone. Built on Docker, ‘Dock’n’Roll’ is a single-user service where I can code a web app under a private interface at dockn.varun.ch, and have it accessible to the world live under *.varunbiniwale.com. I love ‘dockn’ for its simplicity and versatility, I use it all the time.

The control panel, built in ExpressJS, has a simple web interface and Monaco Editor (from VSCode!) for me to create projects and manage their files.
The interface has a button to start a project, which uses Docker’s engine API to build an image and run a container.
Project metadata is stored in Redis.
Port 80 in each container is automatically exposed as :project.varunbiniwale.com using OpenResty (talking to Redis with a Lua plugin) as a reverse proxy.
Files can be stored under /persisted/ and are persisted across container restarts. They can be viewed/edited in the web interface.
The web admin interface is protected using a custom nginx auth proxy I made for all of my projects.

‘Dock’n’Roll’ is also very useful for bug hunting, I use it to host random things I use to help me discover vulnerabilities like blind SSRFs and XSSs. Here’s an autogenerated image hosted at yourip.varunbiniwale.com.

And here’s a (slightly outdated) demo video

In conclusion, that’s my homelab — sure, it might be a little crazy, but it’s mine, and I love it.

One day, I’m going to graduate and move out for university. I don’t know where I’ll go yet, but I probably won’t be taking my servers with me, and I definitely wouldn’t want to burden my parents any more by keeping all my hardware running in their home.

It may not be for everyone, but if you’re a tinkerer (and willing to live with the consequences), I highly recommend trying out a little self hosting.

I’ve learned so much from my servers. Being able to self-host tools and have a place under my control to run my projects is liberating. Yes, it’s stressful at times, and perhaps not the most practical setup ever, but I’ve gained tons of skills that I would have never learned otherwise. Thank you Dell PowerEdge R720XD.

Trusted by [your company]

2022-11-26T00:00:00Z

Make sure you are logged into a Google Workspace account (such as a school or work provided Google account) to experience this post fully. Might not work on reasonable browsers that block third party cookies! (like Safari with “Prevent cross-site tracking” enabled)

This blog is trusted by…

I noticed that Google Workspace gives admins the ability to set a custom logo that appears in the header of some products, including Gmail and Google Drive.

The image is loaded from the URL https://www.google.com/u/0/ac/images/logo.gif?uid=[a large integer]&service=google_gsuite, and the value of uid appears to be ignored. This means that the logo.gif image can be loaded cross origin, and additionally the cookies on www.google.com also allow for cross origin images with authentication (so therefore, even when loaded on a non Google webpage, browsers will show the logo specific to your Google Workspace organization!).

(The 320x132 image probably doesn’t look great when blown up this large.)

If your company does not have a logo set up, or you don’t use Google Workspace, it will show “G Suite” as a default image. This is based on the service parameter. For example, here are the default logos for a few services:

`?service=google_gsuite`

`?service=mail`

`?service=google_*`

`?service=writely`

`?service=jotspot`

Those images will display for users who are not signed into a Google Workspace account, or don’t have a logo set up.

This trick has some limitations: Most notably, the image cannot be read through JavaScript directly (eg. by using a canvas). The cross origin image is only “visible” to visitors, which severely limits the impact. However, it is still possible to extract some information by relying on the user, similarly to my last experiment, “Retrieving your browsing history through a CAPTCHA”.

After publishing that post on Hacker News, I was shared the post, “The Human Side Channel” by Ron Masas. It is a great collection of similar attacks.

This requires some very unlikely user interaction, but here is a demo game that leaks the visitor’s organization (Requires JavaScript).

Are you a robot?

Name the brands from their logos

Press "DONE" when you finish.

In conclusion, this is a very low impact issue, but maybe something fun to consider when building a phishing page for a pentest or something similar.