In the YUI 3 Gallery: Base64 and Y64 encoding

By YUI TeamJuly 6, 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=""></script>
    gallery: 'gallery-2010.06.16-19-51'
}).use('gallery-base64', function(Y) {

    //your code here 
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:
    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<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 = "" + 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: