How I Reverse Engineered Byte and Created My Own Byte Web App

Byte, a new app from Vine cofounder Dom Hofmann, has been released on Android and iOS. This is the story of how I reverse engineered Byte, ported its mobile-app functionality to the web, and unofficially implemented a missing feature that was heavily requested by its users.

You can check out what I built here.

The code is open source on GitHub.

Prologue — Vine and TikTok

Remember Vine? You know, that app that was the inception of many iconic memes and challenged people to be creative within its six-second constraints, often times after someone shouted, “Do it for the Vine.”

Vine had over 200 million users in its peak during its lifetime from 2013-2016. Twitter eventually shut down Vine after acquiring it, and since then TikTok has basically become its successor.

TikTok, which is quickly becoming one of the most popular video apps today, is similar to Vine in that it’s responsible for creating numerous memes thanks to viral trends. One of TikTok’s genius features is a vast catalog of music that creators can use in their videos. TikTok users can even repurpose audio from other user’s videos and make their own remix in their own creative way. These remixes turn into viral trends that allow you to explore presentations of different perspectives that all have the same premise.

Trends on Vine vs. Trends on TikTok

The various trends on TikTok revolve around trending hashtags or audio. To explore videos on TikTok, you explore by a specific hashtag — such as the infamous #RenegadeDance — or a specific sound byte that may perfectly portray the vibe of the video.

Vine had different categories that users would select when posting their videos, such as Animals, Art, Comedy, Sports, etc. The categories allowed users to enter into a specific genre of videos and scroll down an endless feed of relevant content, and since the videos were six seconds or less, it was easy to get lost in the loops and spend an unhealthy amount of time consuming them.

TikTok started off as — and still mostly is — a short-form video app. The initial limit was 15 seconds, but it has since been increased to 60 seconds. The brilliance of these short-form videos is they cater to our ever-shrinking attention spans while giving us the hits of dopamine we crave.

TikTok’s growth strategy: watermarking and links for sharing

I think one of the biggest reasons TikTok grew so fast is the watermark on their videos.

Before TikTok allowed copying a link to a video, users could only download/export videos to other platforms if they wanted to share a video. The exported video would contain a watermark of an animated TikTok logo that’d jump around the corners of the video — which really brought attention to the TikTok brand.

People who shared TikTok videos on other social platforms, such as Facebook and Twitter, most definitely saw the TikTok watermark on the video, wondered what is was, and proceeded to look it up or even download the app to check it out.

Most recently, TikTok has created a minimalist web app that allows you to explore TikTok’s trending videos and users. The addition of the web app introduced a way for users to share TikToks without having to send the actual video itself. You can share a link to a TikTok to a friend, and if they have the app installed, it will deep link and play the video in their app (or they can watch the video on the TikTok web app without even needing the app).

Byte — Vine Reborn

Enter Byte. Dom Hofmann, the cofounder of Vine, launched Byte on January 24, 2020 — exactly seven years after Vine’s initial release. In a way, Byte is Vine reborn, but this time its main focus is on creators and how to compensate them for the content they create. Byte has the same six-second time constraint and category system for discovering content as Vine did.

Byte had been in development since as early as the beginning of 2018 and was called V2 (not Vine 2) at the time. More recently, it’s had a beta program. After Byte’s public launch, users were complaining the app feels a little too minimalist, and many features users have come to expect, such as sharing a link to a video, are missing.

My Inspiration to Reverse Engineer Byte

When Vine first came out on Android, a 16-year-old named Will Smidlein managed to bypass the six-second limit and upload the full-length rickroll video to Vine. He posted a tweet saying, “I think I broke Vine.”

When Byte came out, I saw Will tweet what appeared to be a joke — that he’d be pulling the same stunt again and uploading the full-length rickroll video to Byte. So I thought to myself, “Hmm, I wonder if I could do it too.” So as soon as I downloaded Byte, I started to poke around and see if I could find anything to play around with.

How I Reverse Engineered and Rickrolled Byte

I’ve had previous experience in reverse engineering apps, and, in fact, I’ve actually reverse engineered another app called Peach, which Dom Hofmann created after Vine and before Byte — so it didn’t take long before I had a lead on how to replicate Will’s infamous rickrolling.

I uploaded a test video to Byte from my phone, and by intercepting the network requests using Charles, I was able to figure out how Byte uploads videos to their servers.

Since I’d captured the session of my network requests, I was able to easily repeat the request and change the parameters. So I swapped the video file with the rickroll video and tried to post it, but, much to my dismay, it didn’t work. The video had uploaded successfully, but somehow Byte’s system prevented it from being posted.

Well, we don’t always get things perfect our first time, so I tried again after compressing the video, and voila. The full-length rickroll video was posted and live on Byte. At the time of this writing, the rickroll byte is still up, and you can check it out here.

Surely, Byte must have learned from the past and predicted people would try to abuse the upload functionality right? Well, they might have put some safety measures in place to combat such scenarios, but they have so many other things to be focused on than covering every edge case from people like me who have way too much free time on their hands to even try to do anything like that.

After I Rickrolled Byte, What Else Was There To Do?

So I had my fun and managed to prevent Will from scoring 2–0 before he even had time to step on the field, but what else could I do?

Well, as I mentioned earlier, I had reverse engineered Dom’s previous app Peach. Peach was a social network that focused on sharing to your close friends. It was very minimalist and allowed you to share intimate moments, such as your location, the song you’re currently listening to, your step count for the day, and even your phone’s battery percentage.

I wrote an article about an experiment I ran on Peach, which hypothesized Peach users care more about getting random strangers as followers than connecting and sharing with their closest friends. I had written a script that sent friend requests to as many Peach users as possible, and most of the users accepted my request without even knowing who I was. I conducted that experiment for fun, so when Peach reset my account and I lost all my followers, I was fine with that.

I didn’t want to repeat what I did on Peach and write a bot that liked videos and followed users on Byte (although it turns out, a lot of other people actually did do that), so I pondered what else I could do for fun that could actually help Byte out instead of annoy them with spam. After some thought, I realized Byte didn’t have any way for users to share a link to their videos like TikTok has. It was at this moment I decided I’d build a web app for Byte that gave users an unofficial way of sharing links to their Byte videos.

When Instagram Stories first came out, it was only available on the mobile apps and not on the web, so I built a Chrome extension that enabled watching IG Stories on the web. Even though that Chrome extension got my personal Facebook and Instagram accounts banned for six months for violating Facebook’s ToS, it was still worth it to me because it had over 1 million users who loved it and it was personally rewarding to have built something that was enjoyed by that many people.

How I Created My Own Byte Web App

I saw some comments from Byte users who were complaining they couldn’t share a link to their Byte and instead had to export and send the video.

These comments confirmed my decision to build a web experience for Byte, and I challenged myself to see how fast I could build it. Byte launched on a Friday, and I spent that weekend in a hackathon-style coffee-fueled isolation, coding as fast as I could with my faulty MacBook Pro butterfly keys.

The front end

I bootstrapped my web app using Create React App and used libraries such as React Slick to emulate the sliding vertical carousel that Byte/TikTok uses for their feed of videos.

I decompiled the Byte Android app and extracted some of the assets so the web app looked just like the mobile apps. Because of CORS policies, the browser’s Fetch API isn’t able to directly call Byte’s private APIs, so I had to create a back-end server to proxy the requests.

I created a simple Express server that proxies the API requests so my React app would make an API call to my Express server’s API — which, in turn, called Byte’s private API, returned the response to my Express server, and that returned the response to my React app.

The back end

All requests to Byte’s private APIs require authorization. You can’t make any requests without first passing a valid auth token. If I was to achieve my goal of allowing people to share links to their bytes, it’d have to work without anyone logging in.

Since I have my Express server up and running and it’s the middleman between my React app and Byte’s APIs, I realized I could just hardcode some valid auth tokens on the server to authenticate API requests on behalf of the users of my web app.

After creating a dummy account and obtaining its auth token, I hardcoded it in the headers config for each Axios request my Express server made to Byte’s APIs. At the time of this writing, Byte’s APIs have some pretty relaxed rate limiting, but there are some limits. I realized if my web app gets really popular or some malicious user decides to create a script that calls my proxy API directly, the rate limits for the user account that powers everything would quickly get hit and the app would break for everyone.

Load-balancing requests

I created a few extra accounts, got their auth tokens, and ended up implementing a round-robin approach that’d select a different auth token for each request to balance the load on Byte’s APIs so the likelihood of hitting the rate limits decreased.

I also implemented my own rate limiting on my Express server so if scripts continuously call my proxy API, they can’t quickly exhaust the rate limits on my supply of auth tokens.

Handling metadata for link sharing with Open Graph tags

The Express server also came in handy for implementing Open Graph tags. If users were to share a link to their bytes on social media, there needs to be some relevant info. Otherwise, every link would have the same title, description, and image.

In my Express server, I added handlers for the routes that people would be sharing links for such a /user/ and /post/. When those routes get hit, my Express server calls Byte’s API to retrieve the relevant information, such as the user’s name and profile picture or the post’s description, and it’ll read the static index.html file from my React build and dynamically replace the OG tags with the information I got from Byte’s API. The response will return the new index.html with the updated OG tags. For all other routes, my Express server will just serve the normal index.html file.

The launch

By the end of the weekend, I had most of it done. It was working quite well, and I wanted to launch it on Product Hunt on Monday morning, but it wasn’t quite polished yet so I held back.

After some cross-device testing, I discovered a few bugs I had to fix so the web app would be a good experience for people who decided to use it on the mobile web instead of using the official mobile app. I registered the domain www.byte.community because Byte’s website is www.byte.co, and I finally launched it on Product Hunt on Wednesday (January 29), five days after Byte launched publicly.

The Product Hunt launch flopped, and I only got five upvotes, so I posted some videos on Byte itself advertising it. Some people started to find out about it, and I started getting some users. Some Byters actually created their own bytes advertising it, and others started to use it how I intended and shared links to their bytes on the official Byte community forums.

Byte’s Response

It wasn’t long before I started getting more and more users, and people started to think my web app was an official product from Byte themselves.

I signed up on the Byte forums and posted a topic explaining it’s unofficial, and I was the one who created it. One user replied asking me a question about the technical implementation details, and shortly after, none other than Dom Hofmann, the creator of Byte, posted a reply asking me to remove my reply explaining the technical details. I quickly complied and removed my reply, but interestingly enough, Dom didn’t ask me to take down my unofficial web app, and, in fact, he actually complimented me by saying, “Also, nice work 😉.”

I figured while me reverse engineering Byte’s private APIs isn’t something Dom can condone publicly, perhaps he’s kind of “cool” with my unofficial web app staying up because people are actually using it to share their bytes, and it helps Byte’s growth until they implement that functionality officially.

At that time, my web app didn’t have login support, so users couldn’t login to their Byte accounts — they could only explore and watch bytes. Since I didn’t face any strict backlash from Byte to stop what I was doing, I ended up implementing login support that allows users to log in and see their personalized home feed, like and comment on videos, and follow users.

After I added login support, Dom posted and pinned an announcement on the official community forums warning users not to log into unofficial Byte websites.

In a way, Dom was basically saying that although my site doesn’t appear to be malicious, since he doesn’t have full access to the code to audit and confirm that, there’s no guarantee, and he’s totally right. Although the code for the project is open source on GitHub, there are a few aspects that are hidden, such as the hardcoded auth tokens that power the unofficial API requests.

The risks of trusting a third-party website with your account

It’d be totally possible for me to log everyone’s auth tokens when they log in, which would essentially give me full access to their accounts. And if I was malicious, I could use them to my advantage by commanding the accounts to like posts or do other actions against their will — and without them even knowing. Of course my intentions aren’t malicious, and I’d never do that. I hope people can trust me, but like Dom mentioned, there’s no guarantee other websites aren’t shady and will steal people’s Byte accounts.

I’m glad Dom posted that announcement because users deserve to know they shouldn’t blindly trust third-party apps with their accounts. I added a warning to the login on my web app stating it’s a third-party website, and I link back to Dom’s announcement. So it’s up to the user to decide whether or not it’s worth it to risk their account and use my web app.

It looks like Dom realizes that since Byte is still a small company and doesn’t have the resources like Facebook to go after and stop everyone who builds upon their private APIs the best thing to do is inform people about the existence of unofficial apps because more and more of them will continue to pop up as Byte grows.

Conclusion

Overall, I had fun the past week building what I originally set out to build from a creative challenge I imposed on myself. I’m grateful for how Dom handled the situation and admire his commitment to keeping the Byte community safe, and I wish all the best to Byte going forward. It’s going to be interesting to see how the duel between Byte and TikTok plays out.

Thanks for reading my story. You can follow me on Byte @CaliAlec or Twitter @CaliAlec.

Open Source on GitHub

Curious how it really works? Feel free to check out the source code: