Skip to content
Swizec Teller - a geek with a hatswizec.com

Reverse engineer a GraphQL API to automate love notes – CodeWithSwiz 24

Epic stream Friend! We used a man-in-the-middle attack to snoop an app's API traffic, replayed it in a GraphQL client, and successfully put it inside an AWS Lambda 🤘

CodeWithSwiz is a weekly live show. Like a podcast with video and fun hacking. Focused on experiments and open source. Join live most Mondays

For Valentine's day The Girl got a Lovebox – an IoT device that accepts love notes, spins a 3D printed heart, and shows your note on a color screen. She loved it. 😍

And you know how this goes, right?

Day 1: Send 20 notes

Day 2: Send 2 notes

Day 3:

Day 4:

...

But if you could automate it to send cute notes and pictures from your relationship at random intervals 🤔

The plan

Lovebox's marketing team says "Send notes to your Lovebox from an app, it's cute and awesome and shows Your Person you thought of them!"

As a nerd that reads: "We have an API."

How else would it work? There must be a server. Apps send API requests to the server, server reads a lookup table, sends message to the box – a tiny computer – through another API.

  1. Read API traffic from app to server
  2. Find request that sends a message
  3. Replay request
  4. Create AWS Lambda that runs on schedule
  5. Send random notes

Step 0: Fail to hack the API

Lovebox has a webapp and that's a great first target. Log into the app, open Chrome's network tab, see a tonne of graphql requests, send a message.

Graphql requests that Lovebox sends
Graphql requests that Lovebox sends

We got it!

Alas, the webapp doesn't work with v2 of the Lovebox. Old API, no support for color. When you click the upgrade button your box can get color pictures, but not requests from the old API. 💩

Snooping iOS traffic stumped us.

Step 1: Use Charles Proxy to snoop iOS traffic

Off stream I discovered Charles Proxy, a tool for "debugging" web traffic.

You run the app on your phone, enable proxying, set up SSL proxy, and use the Lovebox app. Charles Proxy convinces your iOS networking layer to send every request through the app.

SSL proxying is important. It lets you read the content of encrypted https connections and the target app doesn't even notice. Classic man-in-the-middle attack.

List of API requests in Charles Proxy
List of API requests in Charles Proxy

You get a request trace that you can export to the Charles Proxy desktop app.

Step 2: Dig through the API trace

Dig through API trace in Charles Proxy desktop
Dig through API trace in Charles Proxy desktop

We dug through the trace and found the GraphQL request that sends a note – sendPixNote2.

Looks like every note is sent as a base64-encoded PNG image. We tried pictures and text and they all looked like this.

The recipient must be my Lovebox's ID, contentType needs further exploration but ["Text"] and ["Image"] both worked, and deviceId looks like my phone. Not sure that's important.

GraphQL query mutation in the request looks like this:

mutation sendPixNote(
$base64: String
$recipient: String
$date: Date
$options: JSON
$contentType: [String]
) {
sendPixNote(
base64: $base64
recipient: $recipient
date: $date
options: $options
contentType: $contentType
) {
_id
type
recipient
url
date
status {
label
__typename
}
base64
__typename
}
}

Nice thing about reverse-engineering GraphQL is that every request tells you what it's doing. Downside is you have to click on every request because they're all to the same endpoint.

Step 3: Replay requests in GraphQL client

Before you start coding, you gotta verify you can hack the API. We used a desktop GraphQL Client.

Start easy, can you send requests at all?

Our first hacked request
Our first hacked request

Add an authorization header with a JWT token Authorization: Bearer ... – copypasta'd from our API trace – use the right GraphQL endpoint, and press play.

it worked 🎉

Step 4: Your first modified request

We tried a few more requests and confirmed that sending works. sendPixNote using the same data made our heart spin.

Lovebox spins!

Fantastic! Now you know it's gonna work.

Next we tried a modified request with a custom payload. Found an image online, converted to base64, pasta'd in there.

The first modified write request
The first modified write request

Apollo's GraphQL Playground client lets you do that by changing variables bottom left. Much easier than futzing around with REST.

And the Lovebox displayed a blue fish.

Blue fish on the box
Blue fish on the box

Huzzah!

Step 5: Copy request into an AWS Lambda

Request works, next we gotta move into a Lambda. We used Prisma's minimalist graphql-request library.

// src/lovebox.ts
import { request, gql, GraphQLClient } from "graphql-request"
const client = new GraphQLClient("https://app-api.loveboxlove.com/v1/graphql", {
headers: {
// TODO: figure out how to login
Authorization: "Bearer ...",
},
})
// copypasta the variables
const variables = {
base64: `data:image/png;base64,...`,
recipient: "...",
contentType: ["Image"],
options: {
framesBase64: null,
deviceId: "...",
},
}
export const sendNote = async () => {
const res = await client.request(
gql`
// copypasta the mutation
`,
variables
)
console.log(res)
}

sendNote is an async method invoked by AWS Lambda as a cloud function. It takes the initialized and authenticated GraphQLClient, feeds it the same mutation and variables we had before, prints the result.

Yes I pasted the whole base64 string for a 16KB image. Redacted 😅

Configure in serverless.yml as a function with no triggers.

# serverless.yml
service: lovebox-lambda
provider:
name: aws
runtime: nodejs12.x
stage: dev
functions:
sendNote:
handler: dist/lovebox.sendNote
package:
exclude:
- node_modules/typescript/**
- node_modules/@types/**

Name the project lovebox-lambda, set basic provider config, declare a function, exclude typescript cruft on deploy.

Later we'll add a cronjob trigger.

Step 6: Test your AWS Lambda locally

$ sls invoke local -f sendNote

It worked! 🥳

Next episode we'll take this lambda, hook it up to an S3 bucket, and automate the shit out of my boyfriend duties.

Cheers,
~Swizec

[sparkjoy|code-with-swiz-24-lovebox1]

Did you enjoy this article?

Published on February 23rd, 2021 in CodeWithSwiz, Technical, GraphQL, Serverless, AWS Lambda, Livecoding

Learned something new?
Want to become a high value JavaScript expert?

Here's how it works 👇

Leave your email and I'll send you an Interactive Modern JavaScript Cheatsheet 📖right away. After that you'll get thoughtfully written emails every week about React, JavaScript, and your career. Lessons learned over my 20 years in the industry working with companies ranging from tiny startups to Fortune5 behemoths.

Start with an interactive cheatsheet 📖

Then get thoughtful letters 💌 on mindsets, tactics, and technical skills for your career.

"Man, love your simple writing! Yours is the only email I open from marketers and only blog that I give a fuck to read & scroll till the end. And wow always take away lessons with me. Inspiring! And very relatable. 👌"

~ Ashish Kumar

Join over 10,000 engineers just like you already improving their careers with my letters, workshops, courses, and talks. ✌️

Have a burning question that you think I can answer? I don't have all of the answers, but I have some! Hit me up on twitter or book a 30min ama for in-depth help.

Ready to Stop copy pasting D3 examples and create data visualizations of your own?  Learn how to build scalable dataviz components your whole team can understand with React for Data Visualization

Curious about Serverless and the modern backend? Check out Serverless Handbook, modern backend for the frontend engineer.

Ready to learn how it all fits together and build a modern webapp from scratch? Learn how to launch a webapp and make your first 💰 on the side with ServerlessReact.Dev

Want to brush up on your modern JavaScript syntax? Check out my interactive cheatsheet: es6cheatsheet.com

By the way, just in case no one has told you it yet today: I love and appreciate you for who you are ❤️