Encode base64 in JavaScript and Decode in Python: Part 1

I was building an API that accepts data in either the path parameter of the URL or the query string. Browsers and other tools will auto mangle the URL to make them URL-safe before working with them. Special characters like #, ?, and = will end up stripped or encoded.

URL encoding special characters is also problematic because some libraries will automatically decode and mangle the characters before making the request. Then you’ll end up with malformed data.

So, I decided to look at base64 encoding. By default, it’s not URL-safe either because the output can contain characters like + and /. However, there’s a way to make base64 URL-safe without losing data.

For example, I want to make a GET request to https://myapi.com/files/{file_path} where file_path is a parameter configured in your API router. The value could be something like /Users/data/mystuff, which isn’t URL-safe.

Instead of building my own encoder, I decided to get one from npm called js-base64

I used it to encode the /Users/data/mystuff:

import { Base64 } from "js-base64";
const result = Base64.encodeURI("/Users/data/mystuff");

It resulted in L1VzZXJzL2RhdGEvbXlzdHVmZg, which looks perfect.

Notice that if I use the plain encode method instead, I get a non URL-safe string back:

const result = Base64.encode("/Users/data/mystuff");

The result is _L1VzZXJzL2RhdGEvbXlzdHVmZg==_, which contains the = signs at the end — not URL-safe. According to the base64 specification, removing the = characters is lossless.

I can now safely pass this string to my api like so: https://myapi.com/files/L1VzZXJzL2RhdGEvbXlzdHVmZg

The next step is to use this base64 encoded string in my Python back-end. It will be in Part 2 of this post, so stay tuned.