DEV Community

Vladimir Grigoryan
Vladimir Grigoryan

Posted on

How to record a browser demo without exposing API keys

A demo often passes through a settings page on the way to the feature you want to explain. That page might contain a deploy token, an account email or a customer record. The audience doesn't need those details, but the recorder will capture them anyway.

Preparing the account before recording makes the final review much easier. Here's a practical workflow for a browser walkthrough.

We make Nixel, a Chrome extension for covering sensitive text on web pages. I'll use it as an example below, including where it needs a manual check.

Start with fictional values

Use a separate demo account when you can. Give it sample records and remove unrelated conversations, billing details and customer data.

If the walkthrough only needs to explain the shape of a request, use an unmistakably fictional value such as YOUR_DEMO_API_KEY. Don't paste a working credential into the example just to make the screen look realistic.

Walk through the route before pressing Record

Open each page, menu and expanded panel you plan to show. Check the settings screen, account menu, notification area and any place where you copy a request or response.

Include the transitions in this rehearsal. A value that is covered on the final screen may have been visible for a moment while a panel opened.

Prepare the view you will capture

Choose the browser tab or window needed for the demo. Close unrelated tabs and panels. If the walkthrough moves into a terminal, desktop editor or another application, prepare that view separately.

For credentials that must remain on the page, use an opaque cover and check that it spans the whole value. Inspect the first and last characters, and look for repeated copies elsewhere on the page. Treat any automatic detector's findings as a starting point for that review.

An example with Nixel

Open Nixel on the Chrome page you plan to record. Review the supported API keys, tokens and other sensitive text it detects, then choose solid bars or labels for the values that need to stay hidden. Detection runs on your device.

Check the page again after opening menus or moving to another screen. Nixel can miss values and doesn't cover your whole desktop, other apps or browser controls. Don't rely on it to detect text inside images or videos.

A fictional dashboard before and after Nixel covers detected sensitive text

The before-and-after screenshot uses a fictional dashboard, so none of the example credentials are real.

If you want to try the same workflow, Nixel is available here:
https://chromewebstore.google.com/detail/nixel/mhdpmmbcnoakhpaemgpnomjpgklbdapk

Record a short test

Make a short recording that includes opening settings, expanding a panel and switching between the pages you need. Play the recorded file back at a readable size.

Check what the recorder actually captured, including the edges of the window and any account menus. This is also a chance to spot an awkward crop or a browser control you didn't mean to show.

Review the exported file

After the full take, watch the exact exported video you intend to upload. Check the moments when pages load, settings open and recording stops. Pause where a sensitive value might have appeared.

If you find an exposed credential, remove that section or record it again before sharing. Check that the file you upload is the reviewed export, rather than an earlier take.

If a working key was already shared

Editing the video doesn't revoke the key. Follow the credential provider's response steps. For example, AWS recommends replacing access keys that may be compromised and deleting the previous keys:
https://docs.aws.amazon.com/IAM/latest/UserGuide/securing_access-keys.html

Before uploading

  1. The account uses fictional data wherever possible.
  2. Every real credential in the prepared view is covered or removed.
  3. Menus, transitions and other applications have been checked.
  4. The file being uploaded is the export you reviewed.

Disclosure: AI assisted with drafting this article.

Top comments (0)