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 🤔

    Swizec Teller published ServerlessHandbook.dev avatarSwizec Teller published ServerlessHandbook.dev@Swizec
    Got a thing for The Girl.

    It’s a box that receives love notes and photos. And there’s an API. Gonna lovecode a idea tomorrow ✌️
    Tweet media

    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 an expert?

    Here's how it works 👇

    Leave your email and I'll send you thoughtfully written emails every week about React, JavaScript, and your career. Lessons learned over 20 years in the industry working with companies ranging from tiny startups to Fortune5 behemoths.

    Join Swizec's Newsletter

    And get thoughtful letters 💌 on mindsets, tactics, and technical skills for your career. Real lessons from building production software. No bullshit.

    "Man, love your simple writing! Yours is the only newsletter I open 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 14,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 ❤️

    Created by Swizec with ❤️