Codificación y decodificación Base64 en JavaScript

Base64 es un esquema de codificación de binario a texto ampliamente utilizado que transforma los datos binarios en un conjunto de caracteres ASCII equivalente traduciéndolos a una representación radix-64. Se usa comúnmente para codificar y transportar datos a través de medios que son incompatibles para transferir datos binarios. Base64 se asegura de que los datos binarios no cambien durante el transporte.

Es importante recordar que Base64 no un esquema de cifrado o compresión. Solo transforma los datos binarios en un conjunto de caracteres ASCII que es extremadamente útil para transferir cadenas ofuscadas a través de la red. Por ejemplo, un ejemplo común es enviar una imagen o cualquier otro archivo binario a un servidor de correo electrónico que normalmente espera datos de texto. Primero debe codificar el archivo binario en un formato de texto, preferiblemente ASCII.

En este artículo, aprenderás a codificar y decodificar cadenas en Base64 en JavaScript. Hay dos funciones integradas en JavaScript para codificar y decodificar datos binarios sin procesar en cadenas Base64.

btoa() — Codificación Base64

El btoa() (significa binario a ASCII) se utiliza para crear una cadena ASCII codificada en Base64 a partir de los datos binarios. Acepta la cadena binaria como argumento y devuelve una cadena ASCII codificada en Base64.

El siguiente ejemplo muestra cómo puede usar btoa() para codificar en Base64 una cadena en JavaScript:

const str = "JavaScript is fun!!";

// encode the string
const encodedStr = btoa(str);

// print encoded string
console.log(encodedStr);

// output: SmF2YVNjcmlwdCBpcyBmdW4hIQ==

Por defecto, el btoa() El método funciona bien para datos binarios que consisten en bytes de 8 bits. Si sus datos de entrada contienen cualquier carácter que tenga más de 8 bits, por ejemplo, un carácter Unicode, el btoa() La función lanzará una excepción.

Aquí hay un ejemplo:

const str = "JavaScript is fun 🎉";

// encode the string
const encodedStr = btoa(str);

// print encoded string
console.log(encodedStr);

Si ejecuta el código anterior, debería ver el siguiente resultado de error:

Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.

Para codificar caracteres Unicode, primero debe escapar de la cadena de entrada a una matriz de bytes de 8 bits (como UTF-8) y luego usar btoa() para codificarlo en Base64 como se muestra en el siguiente ejemplo:

function encodeUnicode(str) {
  // first we use encodeURIComponent to get percent-encoded UTF-8,
  // then we convert the percent encodings into raw bytes which
  // can be fed into btoa.
  return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
      function toSolidBytes(match, p1) {
          return String.fromCharCode('0x' + p1);
  }));
}

encodeUnicode('JavaScript is fun 🎉'); // SmF2YVNjcmlwdCBpcyBmdW4g8J+OiQ==
encodeUnicode('🔥💡'); // 8J+UpfCfkqE=

atob() — Decodificación Base64

El atob() (significa ASCII-a-binario) decodifica una cadena de datos que se codificó usando la codificación Base64 de vuelta al texto normal en JavaScript. Aquí hay un ejemplo que muestra cómo puede usar atob() para decodificar una cadena de codificación Base64:

const encodedStr = "SmF2YVNjcmlwdCBpcyBmdW4hIQ==";

// decode the string
const str = atob(encodedStr);

// print decoded string
console.log(str);

// output: JavaScript is fun!!

El atob() funciona perfectamente si la cadena de entrada codificada en Base64 solo tiene bytes de 8 bits. Sin embargo, no se decodifica correctamente si la entrada codificada tenía caracteres Unicode de 16 bits, como se muestra en el siguiente ejemplo:

// Encode String: 'JavaScript is fun 🎉'
const encodedStr = "SmF2YVNjcmlwdCBpcyBmdW4g8J+OiQ==";

// decode the string
const str = atob(encodedStr);

// print decoded string
console.log(str);

// output: JavaScript is fun 🎉

Como puede ver arriba, el carácter Unicode no se decodifica correctamente. Para manejar cadenas DOM Unicode, debe convertir los bytes codificados en Base64 en cadenas codificadas en porcentaje y luego decodificar la cadena codificada en porcentaje usando decodeURIComponent() como el siguiente:

function decodeUnicode(str) {
  // Going backwards: from bytestream, to percent-encoding, to original string.
  return decodeURIComponent(atob(str).split('').map(function (c) {
    return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
  }).join(''));
}

decodeUnicode('SmF2YVNjcmlwdCBpcyBmdW4g8J+OiQ=='); // JavaScript is fun 🎉
decodeUnicode('8J+UpfCfkqE='); // 🔥💡

Conclusión

Eso es todo amigos para la codificación y decodificación Base64 en JavaScript. Base64 es un esquema de codificación ampliamente utilizado para transmitir de forma segura datos binarios como un flujo de caracteres ASCII a través de la red.

Por supuesto, aún puede optar por enviar datos binarios a través de la red. Pero a veces puede ser arriesgado, ya que no todas las aplicaciones y dispositivos de comunicación de red pueden manejar datos binarios sin procesar. Por otro lado, el juego de caracteres ASCII es bastante simple de manejar para la mayoría de las aplicaciones.

Para obtener más información sobre la codificación y decodificación de Base64, consulte esta guía de MDN.