Decoding and Extracting Content from Data URIs

Decoding Data URIs

Extracting the original content from a data URI is useful for debugging, auditing, and reverse-engineering. The process involves parsing the URI format, identifying the encoding, and decoding the payload.

Data URI Structure

data:[<mediatype>][;base64],<data>

The regex to parse this:

const regex = /^data:([^;,]+)?(;base64)?,(.*)$/;
const match = dataUri.match(regex);
// match[1] = MIME type
// match[2] = ";base64" or undefined
// match[3] = encoded data

JavaScript Decoding

Base64-encoded data URI:

function decodeDataUri(dataUri) {
  const match = dataUri.match(/^data:([^;,]+)?(;base64)?,(.*)$/);
  if (!match) throw new Error('Invalid data URI');

  const mimeType = match[1] || 'text/plain';
  const isBase64 = !!match[2];
  const data = match[3];

  if (isBase64) {
    // Decode Base64 to binary string
    const binary = atob(data);
    // Convert to Uint8Array for binary processing
    const bytes = Uint8Array.from(binary, c => c.charCodeAt(0));
    return { mimeType, bytes };
  } else {
    // Percent-encoded
    return { mimeType, text: decodeURIComponent(data) };
  }
}

Saving decoded content as a file download:

function downloadFromDataUri(dataUri, filename) {
  const link = document.createElement('a');
  link.href = dataUri;
  link.download = filename;
  link.click();
}

Command-Line Decoding

Using base64 command (macOS/Linux):

echo "iVBORw0KGgo..." | base64 --decode > output.png

Using Python:

import base64
data_uri = "data:image/png;base64,iVBORw0KGgo..."
header, encoded = data_uri.split(",", 1)
binary = base64.b64decode(encoded)
with open("output.png", "wb") as f:
    f.write(binary)

Browser DevTools

In Chrome DevTools:

1. Open the Console
2. Paste: fetch('data:image/png;base64,...').then(r => r.blob()).then(b => console.log(b))
3. Inspect the resulting Blob object for size and type

Common Decoding Errors

• Invalid Base64: Ensure the data portion contains only valid Base64 characters (A-Z, a-z, 0-9, +, /, =)
• Truncated data: If the data URI was cut off, decoding will produce corrupted output
• Wrong encoding assumption: Trying to Base64-decode percent-encoded data or vice versa