Como codificar e decodificar strings com Base64 em JavaScript

Em JavaScript, é possível usar Base64 para codificar e decodificar strings.

Neste artigo, você será apresentado ao btoa e atob Funções JavaScript disponíveis em navegadores modernos.

Implante seus aplicativos frontend do GitHub usando DigitalOcean App Platform. Deixe a DigitalOcean se concentrar em dimensionar seu aplicativo.

Pré-requisitos

Para acompanhar este artigo, você precisará de:

• Uma compreensão de strings em JavaScript. Você pode consultar Como trabalhar com strings em JavaScript para saber mais.
• Uma compreensão do uso de funções disponíveis para o Window ou WorkerGlobalScope.
• Uma compreensão do Developer Console. Você pode consultar Como usar o JavaScript Developer Console para saber mais.

Codificando e decodificando strings com Base64

btoa() e atob() são duas funções auxiliares Base64 que são uma parte central da especificação HTML e estão disponíveis em todos os navegadores modernos.

btoa() pega uma string e a codifica em Base64.

Digamos que você tenha uma corda, "Hello World!"e deseja codificá-lo para Base64. No console do desenvolvedor web do seu navegador, defina a string, codifique-a e exiba a string codificada:

// Define the stringvar decodedStringBtoA = 'Hello World!';// Encode the Stringvar encodedStringBtoA = btoa(decodedStringBtoA);console.log(encodedStringBtoA);

A saída deste código é uma sequência de caracteres com letras e números:

Output

SGVsbG8gV29ybGQh

atob() pega uma string e a decodifica em Base64.

Vamos pegar a string codificada anterior, 'SGVsbG8gV29ybGQh'e decodifique-o de Base64. No console do desenvolvedor web do seu navegador, defina a string, decodifique-a e exiba a string decodificada:

// Define the stringvar encodedStringAtoB = 'SGVsbG8gV29ybGQh';// Decode the Stringvar decodedStringAtoB = atob(encodedStringAtoB);console.log(decodedStringAtoB);

A saída deste código revela que a string foi convertida de volta à sua mensagem original:

Output

Hello World!

Agora você tem duas ferramentas para codificar e decodificar Base64.

Explorando casos de uso comuns para Base64

Você também pode usar Base64 para representar dados binários de forma compatível com HTML, JavaScript e CSS. Por exemplo, você pode incorporar uma imagem embutida em um arquivo CSS ou JavaScript usando Base64.

É possível usar Base64 para converter entradas, como dados de formulário ou JSON, em uma string com um conjunto de caracteres reduzido que seja seguro para URL. No entanto, devido à forma como certos servidores podem interpretar mais (+) e barra (/) caracteres, é recomendado usar encodeURIComponent em vez de.

Compreendendo as limitações do Base64

Base64 não pretende de forma alguma ser um método de criptografia seguro.

Base64 também não é um método de compactação. Codificar uma string para Base64 normalmente resulta em uma saída 33% mais longa.

Observação: É importante notar que btoa() e atob() funções só funcionam com strings que contêm ASCII personagens. Se você precisar codificar ou decodificar strings que contenham non-ASCII caracteres, você deve usar TextEncoder e TextDecoder aulas em vez disso.

Conclusão

Neste artigo, você foi apresentado a btoa e atob para codificar e decodificar strings Base64.

Observação: Can I Use documenta o problema conhecido para lidar com UTF-8 e fornece um polyfill para navegadores mais antigos.

Se você quiser saber mais sobre JavaScript, confira nossa página de tópicos sobre JavaScript para exercícios e projetos de programação.