window.btoa

  • Revision slug: Web/API/window.btoa
  • Revision title: window.btoa
  • Revision id: 413901
  • Created:
  • Creator: ethertank
  • Is current revision? No
  • Comment

Revision Content

{{domref()}}

Summary

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

Please note that this is not suitable for raw Unicode strings! See Unicode section below.

Syntax

var encodedData = window.btoa(stringToEncode);

Example

var encodedData = window.btoa("Hello, world"); // encode a string
var decodedData = window.atob(encodedData); // decode the string

Notes

You can use this method to encode data which may otherwise cause communication problems, transmit it, then use the window.atob method to decode the data again. For example, you can encode control characters such as ASCII values 0 through 31.

btoa() is also available to XPCOM components implemented in JavaScript, even though window is not the global object in components.

Unicode Strings

In most browsers, calling window.btoa on a Unicode string will cause a Character Out Of Range exception.

To avoid this, consider this pattern, noted by Johan Sundström:

function utf8_to_b64( str ) {
    return window.btoa(unescape(encodeURIComponent( str )));
}

function b64_to_utf8( str ) {
    return decodeURIComponent(escape(window.atob( str )));
}

// Usage:
utf8_to_b64('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU="
b64_to_utf8('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"

Specification

{{ DOM0() }} Except of course http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#atob

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} 10 {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatVersionUnknown() }} {{ CompatUnknown() }} {{ CompatNo() }} {{ CompatUnknown() }} {{ CompatVersionUnknown() }}

See also

Revision Source

<div>
  {{domref()}}</div>
<h2 id="Summary" name="Summary">Summary</h2>
<p>Creates a base-64 encoded ASCII string from a "string" of binary data.</p>
<p>Please note that this is not suitable for raw Unicode strings! See Unicode section below.</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="syntaxbox">
var encodedData = window.btoa(<em>stringToEncode</em>);</pre>
<h2 id="Example" name="Example">Example</h2>
<pre class="brush:js">
var encodedData = window.btoa("Hello, world"); // encode a string
var decodedData = window.atob(encodedData); // decode the string
</pre>
<h2 id="Notes" name="Notes">Notes</h2>
<p>You can use this method to encode data which may otherwise cause communication problems, transmit it, then use the <a href="/en-US/docs/DOM/window.atob" title="DOM/window.atob">window.atob</a> method to decode the data again. For example, you can encode control characters such as ASCII values 0 through 31.</p>
<p><code>btoa()</code> is also available to XPCOM components implemented in JavaScript, even though <a href="/en-US/docs/DOM/window" title="DOM/window"><code>window</code></a> is not the global object in components.</p>
<h2 id="Unicode_Strings">Unicode Strings</h2>
<p>In most browsers, calling <code>window.btoa</code> on a Unicode string will cause a Character Out Of Range exception.</p>
<p>To avoid this, consider this pattern, noted by <a class="external" href="http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html" title="http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html">Johan Sundström</a>:</p>
<pre class="brush:js">
function utf8_to_b64( str ) {
    return window.btoa(unescape(encodeURIComponent( str )));
}

function b64_to_utf8( str ) {
    return decodeURIComponent(escape(window.atob( str )));
}

// Usage:
utf8_to_b64('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU="
b64_to_utf8('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"</pre>
<h2 id="Specification" name="Specification">Specification</h2>
<p>{{ DOM0() }} Except of course http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#atob</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>10</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
  <li><a href="/en-US/docs/DOM/window.atob" title="DOM/window.atob">window.atob</a></li>
</ul>
Revert to this revision