1. Application Scenarios

1.1 Mail

RFC821 requires that email content be ASCII. When a message contains other non-ASCII characters or binary data, Content-Transfer-Encoding is needed, and Base64 is one such method.

1.2 URL

Some applications need to put binary data into a URL, but URLs only allow a specific set of ASCII characters. This also calls for Base64 encoding. Of course, this only encodes the data itself; the encoded data may contain + and /, so when it is actually placed into a URL it still needs URL-Encoding to become the %XX form.

1.3 Embedding Images in HTML

This approach encodes an image as a Base64 string and places it in the HTML page. Once the HTML page has finished loading, the image data has loaded with it, with no separate HTTP request required.

The data: URI is defined in the IETF standard RFC 2397. The basic usage format is as follows:

1

data:[<MIME-type>][;base64|charset=some_charset],<data></data></MIME-type>

MIME-type is the MIME type of the embedded data, for example image/png for a PNG image. If base64 follows immediately, it means the data that follows is Base64-encoded.

1.4 Digital Certificate Signatures

CER, CRT, PEM, and KEY certificates are all in Base64-encoded format.

1.5 De-visualization

Base64 is not recommended for encryption, but some scenarios simply need to turn a plain string into an unrecognizable one — for example Cookie and Signature parameters. Some blogs also Base64-encode email addresses to avoid spam.

2. How Base64 Works

2.1 Base64 Encoding

Base64 encoding converts 3 8-bit bytes (38=24) into 4 6-bit bytes (46=24), then pads two 0s in front of each 6 bits to form 8-bit bytes. When the original data is not a multiple of 3, if two input bytes remain at the end, one “=” is appended to the encoded result; if one input byte remains, two “=” are appended; if nothing remains, nothing is appended.

2.2 Base64 Decoding

Decoding is the reverse of encoding: strip the trailing =, expand in 8-bit units, and if it is not a multiple of 8, pad 0 at the end, then convert to ASCII.

3. Frontend JavaScript Implementation

This mainly uses the library functions provided by the js-base64 project.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<script src="base64.js/2.1.9/base64.min.js"></script>
<script>
Base64.encode('有意思');  // 5pyJ5oSP5oCd
Base64.decode('5pyJ5oSP5oCd');  // 有意思

Base64.encode('/user/?name=test'); // L3VzZXIvP25hbWU9dGVzdA==
Base64.decode('L3VzZXIvP25hbWU9dGVzdA=='); // /user/?name=test

Base64.encodeURI('/user/?name=test'); // L3VzZXIvP25hbWU9dGVzdA
Base64.decode('L3VzZXIvP25hbWU9dGVzdA');  // /user/?name=test
</script>

4. Backend Python Implementation

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

> ipython
In [1]: import base64

In [2]: base64.b64encode('ascii_string')
Out [2]:'YXNjaWlfc3RyaW5n'

In [3]: base64.b64decode('YXNjaWlfc3RyaW5n')
Out [3]:'ascii_string'

In [4]: base64.b64encode(u'有意思'.encode('utf-8'))
Out [4]:'5pyJ5oSP5oCd'

In [5]: print base64.b64decode('5pyJ5oSP5oCd').decode('utf-8')
Out [5]:'有意思'

When handling Chinese, note that the Python base64 library is implemented according to RFC 3548 and can only handle Byte and ASCII characters. The solution is to first convert the Unicode characters into Bytes.

Processing flow: Unicode -> Byte string -> Base64 String -> Byte String -> Unicode

Because standard Base64 encoding may produce the characters + and /, which cannot be used directly as URL parameters, there is also a “url safe” Base64 encoding, which simply turns the characters + and / into - and _ respectively:

1
2
3
4
5
6
7
8

In[1]: base64.b64encode('i\xb7\x1d\xfb\xef\xff')
Out[1]: 'abcd++//'

In[2]: base64.urlsafe_b64encode('i\xb7\x1d\xfb\xef\xff')
Out[2]: 'abcd--__'

In[3]: base64.urlsafe_b64decode('abcd--__')
Out[3]: 'i\xb7\x1d\xfb\xef\xff'

5. References

• https://github.com/dankogai/js-base64