Magento base64 encode and base64 decode with JavaScript

Tweet about this on TwitterShare on LinkedInShare on Google+Share on FacebookEmail this to someone

About 2 weeks ago I worked on extension for Image Selector in Magento admin forms and I had to use base64 decode and encode functions. Basically Magento backend was sending me base64 encoded string and I had to to use base64 decode function in order to decode the data. I was lucky because Magento Core Team already had implemented such a functionality in JS files and those files were loaded in admin interface.

We have base64 functions in:

  • js/mage/adminhtml/tools.js (exists >= Magento CE 1.4 versions)
  • js/mage/adminhtml/hash.js (exists in older and current Magento CE versions)

I preferred the implementation in tools.js because it’s more robust when we do some Magento and utf8 specific things and there were functions that helped me to decode base64 strings used in URL.

Below I am going to present short documentation how base64 JavaScript functions work:

Base64.encode('Magento')      //Result: TWFnZW50bw==
Base64.decode('TWFnZW50bw==') //Result: Magento

Base64.mageEncode('Magento')      //Result: TWFnZW50bw,,
Base64.mageDecode('TWFnZW50bw,,') //Result: Magento

Base64.idEncode('Magento')      //Result: TWFnZW50bw--
Base64.idDecode('TWFnZW50bw--') //Result: Magento

As you may noticed there is nothing special in Base64.encode() and Base64.decode(), they are just standard base64 functions.

Base64.mageEncode() and Base64.mageDecode() are used when base64 data is transmitted through URL, that’s why those functions take care about converting special characters that may break URL.

Base64.mageEncode() does Base64.encode() and after that converts the characters listed below:

  • “+” to “-“
  • “/” to “_”
  • “=” to “,”

Base64.mageDecode() converts the characters listed below and after conversion does Base64.decode():

  • “-” to “+”
  • “_” to “/”
  • “,” to “=”

Base64.idEncode() and Base64.idDecode() are used when base64 data used in HTML ID attributes, that’s why those functions take care about converting special characters that may break HTML.

Base64.idEncode() does Base64.encode() and after that converts the characters listed below:

  • “+” to “:”
  • “/” to “_”
  • “=” to “-“

Base64.idDecode() converts the characters listed below and after conversion does Base64.decode():

  • “:” to “+”
  • “_” to “/”
  • “-” to “=”

I found couple of examples where Base64.idEncode() and Base64.idDecode() are used by Magento Core Team in admin area. Mainly they are used when we work with widgets.

Your thoughts?

Tweet about this on TwitterShare on LinkedInShare on Google+Share on FacebookEmail this to someone

Tsvetan Stoychev

Tsvetan aka. Cecko is the founder of Cecko's Lab. He is Magento addicted since Magento CE 1.2.1.2 and has worked on over 30 Magento projects. At the moment he is in charge to take care about the money flow of the company, to keep constant communication with the clients and to keep the people in the office busy.

More Posts

Follow Me:
TwitterLinkedIn