JavaScript base64 encode decode

Javascript Course

Base64-encoded data takes about 33% more space than the original data, but it is useful when you want to transfer compact and encrypted data from an aplication to another (for example from cliend side /browser to a script on server and vice versa).
In this page it is presented a JavaScript object that can be used to encode / decode data with MIME base64 . This object is fully compatible with UTF-8 encoding.
— Source code of Base64 object, from http://www.webtoolkit.info/javascript-base64.html. /** * Base64 encode / decode * http://www.webtoolkit.info/ **/ var Base64 = { // private property _keyStr : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=", // public method for encoding encode : function (input) { var output = ""; var chr1, chr2, chr3, enc1, enc2, enc3, enc4; var i = 0; input = Base64._utf8_encode(input); while (i < input.length) { chr1 = input.charCodeAt(i++); chr2 = input.charCodeAt(i++); chr3 = input.charCodeAt(i++); enc1 = chr1 >> 2; enc2 = ((chr1 & 3) << 4) | (chr2 >> 4); enc3 = ((chr2 & 15) << 2) | (chr3 >> 6); enc4 = chr3 & 63; if (isNaN(chr2)) { enc3 = enc4 = 64; } else if (isNaN(chr3)) { enc4 = 64; } output = output + this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) + this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4); } return output; }, // public method for decoding decode : function (input) { var output = ""; var chr1, chr2, chr3; var enc1, enc2, enc3, enc4; var i = 0; input = input.replace(/[^A-Za-z0-9\+\/\=]/g, ""); while (i < input.length) { enc1 = this._keyStr.indexOf(input.charAt(i++)); enc2 = this._keyStr.indexOf(input.charAt(i++)); enc3 = this._keyStr.indexOf(input.charAt(i++)); enc4 = this._keyStr.indexOf(input.charAt(i++)); chr1 = (enc1 << 2) | (enc2 >> 4); chr2 = ((enc2 & 15) << 4) | (enc3 >> 2); chr3 = ((enc3 & 3) << 6) | enc4; output = output + String.fromCharCode(chr1); if (enc3 != 64) { output = output + String.fromCharCode(chr2); } if (enc4 != 64) { output = output + String.fromCharCode(chr3); } } output = Base64._utf8_decode(output); return output; }, // private method for UTF-8 encoding _utf8_encode : function (string) { string = string.replace(/\r\n/g,"\n"); var utftext = ""; for (var n = 0; n < string.length; n++) { var c = string.charCodeAt(n); if (c < 128) { utftext += String.fromCharCode(c); } else if((c > 127) && (c < 2048)) { utftext += String.fromCharCode((c >> 6) | 192); utftext += String.fromCharCode((c & 63) | 128); } else { utftext += String.fromCharCode((c >> 12) | 224); utftext += String.fromCharCode(((c >> 6) & 63) | 128); utftext += String.fromCharCode((c & 63) | 128); } } return utftext; }, // private method for UTF-8 decoding _utf8_decode : function (utftext) { var string = ""; var i = 0; var c = c1 = c2 = 0; while ( i < utftext.length ) { c = utftext.charCodeAt(i); if (c < 128) { string += String.fromCharCode(c); i++; } else if((c > 191) && (c < 224)) { c2 = utftext.charCodeAt(i+1); string += String.fromCharCode(((c & 31) << 6) | (c2 & 63)); i += 2; } else { c2 = utftext.charCodeAt(i+1); c3 = utftext.charCodeAt(i+2); string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63)); i += 3; } } return string; } } — Usage:
1. Copy the Base64 object into your JavaScript script.
2. To encode a string, calls the encode() method:   Base64.encode(‘string’); .
3. To decode a base64-encoded string, calls the decode() method:   Base64.decode(‘base64-string’); .

— Example. The text added into a textarea will be encoded with base64, and added into an input form field. The base64-encoded string added in that input field can be decoded and displayed into an Alert window. <form action="#" method="post"> Enter a text:<br/> <textarea name="txtstr" id="txtstr" cols="26" rows="5"></textarea> <button id="btnencode64">Encode</button><br/><br/> Base64 encoded data:<br/> <input type="text" name="str64" id="str64" size="34" /> <button id="btndecode64">Decode</button> </form> <script type="text/javascript"> // Here add the code of Base64 object // register onclick events for encode button document.getElementById(‘btnencode64’).onclick = function() { var txt_string = document.getElementById(‘txtstr’).value; // gets data from textarea // encode data and adds it in #str64 element document.getElementById(‘str64’).value = Base64.encode(txt_string); return false; } // register onclick events for decode button document.getElementById(‘btndecode64’).onclick = function() { // decode data from input text field and display it into an alert window var str64 = Base64.decode(document.getElementById(‘str64’).value); alert(str64); return false; } </script> Demo:

— WebMaster, WebDesigner : MarPlo —

Decode from Base64 format

Simply use the form below

Details of the encoding

Base64 — это группа аналогичных схем кодирования двоичного текста, которые представляют двоичные данные в формате строки ASCII путем перевода их в представление radix-64. Термин Base64 происходит от определенной кодировки передачи содержимого MIME.

Каждая цифра base64 представляет ровно 6 бит данных. Таким образом, три 8-битных байта (т. е. всего 24 бита) могут быть представлены четырьмя 6-битными цифрами base64.

Определенный набор из 64 символов, выбранных для представления 64 мест-значений для базы, варьируется между реализациями. Общая стратегия состоит в том, чтобы выбрать 64 символа, которые являются членами подмножества, общего для большинства кодировок, а также для печати. Эта комбинация оставляет данные, которые вряд ли будут изменены при передаче через информационные системы, такие как электронная почта, которые традиционно не были 8-битными чистыми. Например, реализация Base64 MIME использует A-Z, A-z и 0-9 для первых 62 значений.

JavaScript base64 encode decode

Другие варианты разделяют это свойство, но отличаются символами, выбранными для последних двух значений; примером является UTF-7.

Самые ранние экземпляры этого типа кодирования были созданы для коммутируемой связи между системами, работающими под управлением той же ОС — например, uuencode для UNIX, BinHex для TRS-80 (позже адаптированный для Macintosh) — и поэтому могли бы сделать больше предположений о том, какие символы были безопасны для использования. Например, uuencode использует прописные буквы, цифры и много знаков препинания, но не строчные.

Ресурсы:

Кодирование Base64 дает возможность для отправки всех типов данных через электронную почту в Интернете.

Если Интернет является информационной магистралью, то в случае с электронной почтой имеются ограничения. Через нее могут передаваться только небольшие данные.

Транспортная система электронной почты предназначена только для обычного ASCII текста. Попытка отправить текст на других языках или произвольные файлы — это как получить грузовик через овраг.

При попытке отправить текст на других языках или отправить случайный файл — это как попытаться проехать на большом грузовике через маленькое ущелье.

Так как же проехать на грузовике через это маленькое ущелье?

Мы должны разобрать наш грузовик на части и переправить эти части с одного конца на другой.

То же самое происходит, когда вы отправляете вложения по электронной почте. В процессе, известном как кодирование, двоичные данные преобразуются в текст ASCII, который можно без проблем транспортировать по электронной почте. В конце пути данные декодируются и мы получаем исходный файл.

Одним из методов кодирования данных в виде обычного текста ASCII является Base64.

Это один из способов, используемых стандартом MIME для отправки данных, отличных от обычного текста.

Base64 в помощь

Кодирование Base64 занимает три байта, каждый из которых состоит из восьми битов, и представляет их в виде четырех печатных символов в стандарте ASCII. По сути, делается это в два шага.

Первым шагом является преобразование трех байтов в четыре числа из шести бит. Каждый символ в стандарте ASCII состоит из семи битов. Base64 использует только 6 бит (что соответствует 2 ^ 6 = 64 символам), чтобы гарантировать, что закодированные данные могут быть пригодны для печати и читаемы «по-человечески».

Ни один из специальных символов, доступных в таблице ASCII, не используется. 64 символа (отсюда и название Base64) — это 10 цифр, 26 символов в нижнем регистре, 26 символов в верхнем регистре, а также символы «+» и «/».

Например, три байта равны 155, 162 и 233, соответствующий (и пугающий) поток битов равен 100110111010001011101001, который, в свою очередь, соответствует 6-битовым значениям 38, 58, 11 и 41.

Эти цифры преобразуются в символы из таблицы ASCII на втором шаге с использованием таблицы «Base64 encoding».

6-битные значения нашего примера преобразуются в последовательность ASCII «m6Lp».

• 155 -> 10011011
• 162 -> 10100010
• 233 -> 11101001
• 100110 -> 38
• 111010 -> 58
• 001011 -> 11
• 101001 -> 41
• 38 -> m
• 58 -> 6
• 11 -> L
• 41 -> p

Этот двухэтапный процесс применяется ко всей последовательности байтов, которые закодированы. Чтобы гарантировать, что закодированные данные могут быть правильно напечатаны и не превышают ограничения почтового сервера, символы новой строки добавляются так, чтобы общая длина строк не превышала 76 символов. Символы новой строки кодируются, как и все остальные данные.

Решение

В процессе кодирования мы можем столкнуться с проблемой. Если размер исходных данных в байтах кратен трем, все работает нормально.

JavaScript аналог функций php base64_decode и base64_encode

Если это не так, мы можем получить один или два 8-битных байта. Однако для правильного кодирования нам нужно ровно три байта.

Решение состоит в том, чтобы добавить достаточно байтов со значением «0» для создания 3-байтовой группы. Два таких значения добавляются, если у нас есть один дополнительный байт данных, один добавляется для двух дополнительных байтов.

Конечно, эти искусственные завершающие «0» не могут быть закодированы, используя таблицу кодирования ниже. Они должны быть представлены 65-м символом.

Отступом Base64 является «=». Естественно, он может появляться только в конце закодированных данных.