Кодирование строк с помощью Base64 в JavaScript

Development, Java | Amber | Комментировать запись

Для кодирования и декодирования строк в JavaScript можно использовать Base64.

В этом руководстве вы познакомитесь с функциями JavaScript btoa и atob, которые поддерживаются современными веб-браузерами.

Требования

Для работы вам нужно:

• Знать, как работают строки в JavaScript. Чтобы узнать об этом больше, выполните мануал Работа со строками в JavaScript.
• Понимать, какие функции доступны для Window или WorkerGlobalScope.
• Уметь работать в консоли разработчика. Больше информации на эту тему вы найдете в мануале Использование консоли разработчика JavaScript.

Код и декод строк с помощью Base64

btoa() и atob() – это две вспомогательные функции Base64, которые включены в основную часть спецификации HTML и доступны во всех современных браузерах.

Примечание: Названия этих функций отсылают к названиям старых команд Unix, предназначенных для преобразования двоичного кода в ASCII (btoa) и наоборот (atob). Однако и входными, и выходными данными этих функций являются строки Unicode.

Функция btoa() принимает строку и кодирует ее в Base64.

Допустим, у нас есть строка «Hello World!», которую мы хотим закодировать в Base64. В консоли веб-разработчика вашего браузера можно определить строку, закодировать ее и отобразить результат:

// определяем строку
var decodedStringBtoA = 'Hello World!';

// кодируем ее
var encodedStringBtoA = btoa(decodedStringBtoA);

console.log(encodedStringBtoA);

В результате вы получите строку символов (буков и цифр):

SGVsbG8gV29ybGQh

Функция atob() принимает строку Base64 и декодирует ее.

Для примера теперь возьмем закодированную ранее строку и декодируем ее из Base64. В консоли браузера вы можете определить строку, декодировать ее и получить результат:

// определяем строку
var encodedStringAtoB = 'SGVsbG8gV29ybGQh';

// декодируем ее
var decodedStringAtoB = atob(encodedStringAtoB);

console.log(decodedStringAtoB);

Вывод этого кода подтверждает, что строка была преобразована в свое исходное состояние:

Hello World!

Итак, теперь у вас есть два инструмента для кодирования и декодирования строк в Base64.

Когда использовать Base64?

Base64 можно использовать для представления двоичных данных способом, совместимым с HTML, JavaScript и CSS. Например, так вы можете встроить изображение в файл CSS или JavaScript.

Также Base64 можно применить для преобразования входных данных, таких как form-data или JSON, в строку с сокращенным набором символов, которую можно использовать для URL. Однако из-за того серверы могут некорректно интерпретировать символы плюса (+) и косой черты (/), а потому вместо Base64 рекомендуется использовать метод encodeURIComponent.

Ограничения Base64

Base64 ни в коем случае не предназначен для использования в качестве безопасного метода шифрования.

Base64 также не является методом сжатия: кодирование строки в Base64 обычно приводит к увеличению длины вывода на 33%.

Заключение

В этом мануале вы познакомились с функциями btoa и atob, которые предназначены для кодирования и декодирования строк в Base64.

Примечание: Ресурс Can I Use документирует известные проблемы с обработкой UTF-8 и предоставляет полифил для старых браузеров.