Base64 encode with javascript

Кодирование и декодирование в формате Base64

Base64 — это группа схожих binary-to-text encoding схем, которые представляют двоичные данные в ASCII-формате методом перевода в radix-64 представление. Термин Base64 происходит от a specific MIME content transfer encoding.

Кодирование Base64 широко используется в случаях, когда требуется перекодировать двоичные данные для передачи по каналу приспособленному для передачи текстовых данных. Это делается с целью защиты двоичных данных от любых возможных повреждений при передаче. Base64 широко используется во многих приложениях, включая электронную почту (MIME), и при сохранении больших объёмов данных в XML (en-US) .

В языке JavaScript существуют две функции, для кодирования и декодирования данных в/из формат Base64 соответственно:

Функция atob() декодирует Base64-кодированную строку. В противоположность ей, функция btoa() создаёт Base64 кодированную ASCII строку из «строки» бинарных данных.

Обе функции atob() и btoa() работают со строками. Если вам необходимо работать с ArrayBuffers , обратитесь к этому параграфу.

Документация

data URIs, описанные в RFC 2397, позволяют создателям контента встроить в документ маленькие файлы в виде строки (инлайном).

Wikipedia article about Base64 encoding.

Decodes a string of data which has been encoded using base-64 encoding.

Creates a base-64 encoded ASCII string from a «string» of binary data.

In most browsers, calling btoa() on a Unicode string will cause a Character Out Of Range exception. This paragraph shows some solutions.

List of Mozilla supported URI schemes

In this article is published a library of ours whose aims are:

• creating a C-like interface for strings (i.e. array of characters codes — ArrayBufferView (en-US) in JavaScript) based upon the JavaScript ArrayBuffer (en-US) interface,
• creating a collection of methods for such string-like objects (since now: stringView s) which work strictly on array of numbers rather than on immutable JavaScript strings,
• working with other Unicode encodings, different from default JavaScript’s UTF-16 DOMString s,

Tools

Related Topics

The «Unicode Problem»

Since DOMString s are 16-bit-encoded strings, in most browsers calling window.btoa on a Unicode string will cause a Character Out Of Range exception if a character exceeds the range of a 8-bit byte (0x00~0xFF). There are two possible methods to solve this problem:

• the first one is to escape the whole string (with UTF-8, see encodeURIComponent ) and then encode it;
• the second one is to convert the UTF-16 DOMString to an UTF-8 array of characters and then encode it.

Here are the two possible methods.

Solution #1 – escaping the string before encoding it

function b64EncodeUnicode(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] )/g, function toSolidBytes(match, p1)  return String.fromCharCode("0x" + p1); >, ), ); > b64EncodeUnicode("✓ à la mode"); // "4pyTIMOgIGxhIG1vZGU token function">b64EncodeUnicode("\n"); // "Cg= code-example">
js
function b64DecodeUnicode(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(""), ); > b64DecodeUnicode("4pyTIMOgIGxhIG1vZGU token punctuation">); // "✓ à la mode" b64DecodeUnicode("Cg= token punctuation">); // "\n" 
 
Unibabel implements common conversions using this strategy.
 
Solution #2 – rewrite the DOMs atob() and btoa() using JavaScript's TypedArray s and UTF-8
 
Use a TextEncoder (en-US) polyfill such as TextEncoding (also includes legacy windows, mac, and ISO encodings), TextEncoderLite, combined with a Buffer and a Base64 implementation such as base64-js.
 
When a native TextEncoder implementation is not available, the most light-weight solution would be to use TextEncoderLite with base64-js. Use the browser implementation when you can.
 
The following function implements such a strategy. It assumes base64-js imported as . Note that TextEncoderLite only works with UTF-8.
 
function Base64Encode(str, encoding = "utf-8")  var bytes = new (TextEncoder || TextEncoderLite)(encoding).encode(str); return base64js.fromByteArray(bytes); > function Base64Decode(str, encoding = "utf-8")  var bytes = base64js.toByteArray(str); return new (TextDecoder || TextDecoderLite)(encoding).decode(bytes); > 
 
Found a content problem with this page?
 
This page was last modified on 20 июл. 2023 г. by MDN contributors.
 
Your blueprint for a better internet.
 
Источник
 
How To Encode and Decode Strings with Base64 in JavaScript
 
 
In JavaScript, it is possible to use Base64 to encode and decode strings.
 
In this article, you will be introduced to the btoa and atob JavaScript functions that are available in modern web browsers.
 
Prerequisites 
 
To follow along with this article, you will need:
 
 
An understanding of strings in JavaScript. You can consult How To Work with Strings in JavaScript to learn more.
 
An understanding of using functions available to the Window or WorkerGlobalScope .
 
An understanding of the Developer Console. You can consult How To Use the JavaScript Developer Console to learn more.
 
 
Encoding and Decoding Strings with Base64 
 
 btoa() and atob() are two Base64 helper functions that are a core part of the HTML specification and available in all modern browsers.
 
Note: The naming of these functions reference old Unix commands for converting binary to ASCII (btoa) and ASCII to binary (atob). However, “both the input and output of these functions are Unicode strings”.
 
btoa() takes a string and encodes it to Base64.
 
Let’s say you have a string, "Hello World!" , and wish to encode it to Base64. In your browser’s web developer console, define the string, encode it, and display the encoded string:
 
// Define the string var decodedStringBtoA = 'Hello World!'; // Encode the String var encodedStringBtoA = btoa(decodedStringBtoA); console.log(encodedStringBtoA); 
 
The output of this code is a string of characters with letters and numbers:
 
atob() takes a string and decodes it from Base64.
 
Let’s take the encoded string from earlier, 'SGVsbG8gV29ybGQh' , and decode it from Base64. In your browser’s web developer console, define the string, decode it, and display the decoded string:
 
// Define the string var encodedStringAtoB = 'SGVsbG8gV29ybGQh'; // Decode the String var decodedStringAtoB = atob(encodedStringAtoB); console.log(decodedStringAtoB); 
 
The output of this code reveals the string has been converted back to its original message:
 
Now, you have two tools for encoding and decoding Base64.
 
Exploring Common Use Cases for Base64 
 
You can also use Base64 to represent binary data in a way that is compatible with HTML, JavaScript, and CSS. For example, you can embed an image inline in a CSS or JavaScript file using Base64.
 
It is possible to use Base64 to convert input, like form data or JSON, to a string with a reduced character set that is URL-safe. However, due to how certain servers may interpret plus ( + ) and forward-slash ( / ) characters, it is recommended to use encodeURIComponent instead.
 
Understanding the Limitations of Base64 
 
Base64 is in no way meant to be a secure encryption method.
 
Base64 is also not a compression method. Encoding a string to Base64 typically results in 33% longer output.
 
Conclusion 
 
In this article, you were introduced to btoa and atob to encode and decode Base64 strings.
 
Note: Can I Use documents the known issue for handling UTF-8 and provides a polyfill for older browsers.
 
If you’d like to learn more about JavaScript, check out our JavaScript topic page for exercises and programming projects.
 
Want to deploy your application quickly? Try Cloudways, the #1 managed hosting provider for small-to-medium businesses, agencies, and developers - for free. DigitalOcean and Cloudways together will give you a reliable, scalable, and hassle-free managed hosting experience with anytime support that makes all your hosting worries a thing of the past. Start with $100 in free credits!
 
Источник
 
Base64 encoding and decoding in JavaScript
 
Base64 is a widely used binary-to-text encoding scheme that transforms binary data into an equivalent ASCII character set by translating it into a radix-64 representation. It is commonly used for encoding and transporting data over media incompatible with transferring binary data. Base64 makes sure that the binary data doesn't change during transportation.
 
It is important to remember that Base64 is not an encryption or compression scheme. It only transforms the binary data into an ASCII character set that is extremely useful for transferring obfuscated strings over the network.
 
For instance, a simple example is sending an image or any other binary file to an email server that typically expects textual data. You first encode the binary file into a textual format, preferably ASCII.
 
In this article, you'll learn how to encode and decode Base64 strings in JavaScript. There are two built-in functions in JavaScript for encoding and decoding raw binary data into Base64 strings.
 
The btoa() function (stands for binary-to-ASCII) is used to create a Base64 encoded ASCII string from the binary data. It accepts the binary string as an argument and returns a Base64 encoded ASCII string. The following example shows how you can use btoa() to Base64 encode a string in JavaScript:
 
const str = 'JavaScript is fun!!' // encode the string const encodedStr = btoa(str) // print encoded string console.log(encodedStr) // output: SmF2YVNjcmlwdCBpcyBmdW4hIQ== 
 
By default, the btoa() method works fine for binary data consisting of 8-bit bytes. If your input data contains any character with more than 8 bits, for instance, a Unicode character, the btoa() function will throw an exception. Here is an example:
 
const str = 'JavaScript is fun 🎉' // encode the string const encodedStr = btoa(str) // print encoded string console.log(encodedStr) 
 
Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range. 
 
To encode Unicode characters, you first need to escape the input string to an array of 8-bit bytes (like UTF-8) and then use btoa() to encode it to Base64, as shown in the following example:
 
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])/g, function toSolidBytes(match, p1)  return String.fromCharCode('0x' + p1) >) ) > encodeUnicode('JavaScript is fun 🎉') // SmF2YVNjcmlwdCBpcyBmdW4g8J+OiQ== encodeUnicode('🔥💡') // 8J+UpfCfkqE= 
 
The atob() function (stands for ASCII-to-binary) decodes a string of data encoded using Base64 encoding back to normal text in JavaScript. Here is an example that shows how you can use atob() to decode a Base64 encoding string:
 
const encodedStr = 'SmF2YVNjcmlwdCBpcyBmdW4hIQ==' // decode the string const str = atob(encodedStr) // print decoded string console.log(str) // output: JavaScript is fun!! 
 
The atob() function works perfectly if the Base64 encoded input string only has 8-bit bytes. However, it fails to properly decode if the encoded input string includes 16-bit Unicode characters, as shown in the following example:
 
// 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 ð 
 
As you can see above, the Unicode character is not properly decoded. To handle Unicode DOM strings, you have to convert the Base64 encoded bytes to percent-encoded strings and then decode the percent-encoded string using decodeURIComponent() like the following:
 
function decodeUnicode(str)  // Going backward: from byte-stream 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=') // 🔥💡 
 
That's all folks for Base64 encoding and decoding in JavaScript. Base64 is a widely used encoding scheme for securely transmitting binary data as a stream of ASCII characters over the network. Of course, you can still choose to send binary data over the network. But it can be risky sometimes, as not all applications and network communication devices can handle raw binary data. On the other hand, the ASCII character set is quite simple to consume for most applications. For more information on Base64 encoding and decoding, read this MDN guide. ✌️ Like this article? Follow me on Twitter and LinkedIn. You can also subscribe to RSS Feed.
 
You might also like.
 
Источник