In the YUI 3 Gallery: Base64 and Y64 encoding

By YUI TeamJuly 6th, 2010

Nicholas C. Zakas (@slicknet on Twitter) is the lead frontend engineer on the Yahoo! homepage, a YUI contributor, and author of Professional JavaScript for Web Developers and the newly-released, High Performance JavaScript.

Base64 encoding was originally designed to allow lossless data passing between 8-bit and 7-bit systems. The primary example of its usage is in email, which traditionally used 7-bit systems to transfer the email while those of us at home on our computers were using 8-bit systems. This became especially important with non-text email attachments, which would be encoded into MIME base64 and sent along to the destination.

More recently, base64 encoding has gained popularity for its usage in data URIs. For those unaware, data URIs are a way of embedding files inside of HTML and CSS. One of the supported data URI formats is base64.

Base64 encoding is still used frequently in programming, primarily for obfuscation but also for safe data transport. While some browsers have native base64 encoding and decoding, this functionality isn’t defined in any standard nor commonly available in all browsers. The YUI 3 Gallery Base64 module provides a common implementation of base64 encoding that can be used across all A-grade browsers. To use the Base64 module, include the following on your page:

<script src="http://yui.yahooapis.com/3.1.0/build/yui/yui-min.js"></script>
<script>
YUI({
    gallery: 'gallery-2010.06.16-19-51'
}).use('gallery-base64', function(Y) {

    //your code here 
});
</script>

The Base64 module exposes a Base64 object with two methods: encode() and decode(). The methods are used as follows:

var decodedText = Y.Base64.decode(encodedText);
var encodedText2 = Y.Base64.encode(rawText);

Along with the Base64 module, I also wrote a Y64 module. Y64 is a base64 variant used at Yahoo! when base64 information needs to be transmitted as part of a GET request. Regular base64 has three characters that aren’t URL-safe: plus (+), slash (/), and equals (=). Y64 encoding replaces these with dot (.), underscore (_), and dash (-), respectively. This allows Y64-encoded strings to be placed in URLs without worrying about URL escaping of the characters.

The Y64 module requires the Base64 module, which is automatically pulled in when you include the following code:

YUI({
    gallery: 'gallery-2010.06.16-19-51'
}).use('gallery-y64', function(Y) {
    //your code here
});

The Y64 module exposes a Y64 object with encode() and decode() methods, so it usage is the same as with the Base64 object:

var decodedText = Y.Y64.decode(encodedText);
var encodedText2 = Y.Y64.encode(rawText);

If you’re planning on passing base64-encoded data in a URL string, you may want to consider Y64 as an alternative.

Please keep in mind that base64 and Y64 are not encryption algorithms. Encryption algorithms are designed to secure data from prying eyes. Base64 and Y64 are encoding algorithms designed to transmit data without the risk of data corruption – the type of corruption that happens when data is transferred from one system to the next and may be encoded and decoded in many different formats before arriving at the final destination.

A good example of this is link-sharing functionality. Suppose that you’re sharing a link by passing it to an entrypoint, such as http://www.example.com?share=<url>. The url needs to be URL-encoded for safe transmission, but that URL itself may also contain URL-encoded data. And believe it or not, sometimes browsers can mis-encoded URLs before transmission (it’s rare, but not unheard of). For a higher level of confidence that the data will arrive in good shape, you can use Y64 encoding:

var destination = "http://www.example.com?share=" + Y.Y64.encode(url);

The destination would then decode the URL value. Because this value won’t require URL-encoding, the chances of the data becoming corrupted during transmission are lessened.

Not everyone will need to use base64 or Y64 encoding in their web applications, but these can be very powerful tools to keep in your back pocket.

Further Reading:

5 Comments

  1. You are using a switch per character … which is fairly horrible. I wrote and posted an example a few years back:

    Simple Base64 encode/decode – Javascript

    Note that with a small tweak to the anonymous constructor function, you could generate an equally efficient Y64 functions.

    Feel free to reuse whatever you want.

  2. The article mentions that you can use a data URI to embed files inside of the HTML document. Does this module support that functionality (across A-grade browsers)?

  3. Michael Sheakoski said:
    July 6, 2010 at 5:36 pm

    To clarify, are you using the same conventions in Y64 as Base64 for URL? It translates “+” => “-” but this post suggests that Y64 is translating “+” => “.”. Also, Base64 for URL omits “=” for padding.

  4. @Sause – this module is for base64 encoding only. Data URI functionality is something that’s built into the browser (or not!), and so this module can’t do anything to help support browsers that don’t support them natively.

  5. @Michael – Y64 is not the same as Base64 for URL. As stated in the post, Y64 is a variant we’ve been using at Yahoo! for a while. It’s nothing terribly revolutionary, but it does achieve the same goal of passing base64-encoded data in a URL.