解码不适用于Base64

Question

Encoding my URL works perfectly with base-64 encoding. So does decoding but not with the string literal variable .

This works:

document.write(atob("hi"));

This does not:

var tempvar = "hello";
document.write(atob(tempvar));

What am I doing wrong? Nothing is displayed. But if I quote "tempvar" , then it of course works but is not the same thing since "tempvar" is a string, not a variable.

Answer 1

It's because it can't decode the string "hello" , try an actual string that can be decoded from base64, here is an example;

var tempvar = "aHR0cDovL3N0YWNrb3ZlcmZsb3cuY29tL3F1ZXN0aW9ucy80MzEyOTEzNi9kZWNvZGluZy1ub3Qtd29ya2luZy13aXRoLWJhc2U2NA==";
document.write(atob(tempvar));

If you want to encode, use the btoa function instead,

var tempvar = "hello";
document.write(btoa(tempvar));

You can use this website to test decoding and encoding base64, https://www.base64encode.org/

Answer 2

Your Question

What am I doing wrong?

The string being passed to atob() is a string literal of length 5 (and not technically a base-64 encoded string). The browser console should reveal an exception in the error log (see explanation in The cause below).

The cause

Per the MDN documentation of atob() :

Throws

Throws a DOMException if the length of passed-in string is not a multiple of 4. ¹

The length of the string literal " hello " (ie 5 ) is not a multiple of 4. Thus the exception is thrown instead of returning the decoded version of the string literal.

A Solution

One solution is to either use a string that has actually been encoded (eg with btoa() ) or at least has a length of four (eg using String.prototype.substring() ). See the snippet below for an example.

 var tempvar = "hello"; window.addEventListener("DOMContentLoaded", function(readyEvent) { var container = document.getElementById("container"); //encode the string var encoded = btoa(tempvar); container.innerHTML = encoded; var container2 = document.getElementById("container2"); //decode the encoded string container2.innerHTML = atob(encoded); var container3 = document.getElementById("container3"); //decode the first 4 characters of the string container3.innerHTML = atob(tempvar.substring(0, 4)); }); 

 <div> btoa(tempvar): <span id="container"></span></div> <div> atob(decoded): <span id="container2"></span></div> <div> atob(tempvar.substring(0, 4)): <span id="container3"></span></div> 

---

¹ _{https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/atob}

Answer 3

it's because you are trying to decode a not base64 encoded string that it works on hi is just a coincidence it seems.

atob = decode

btoa = encode

Answer 4

You're using the wrong function. You should use btoa() to encode.

When you do atob('hi') , you're actually decoding 'hi', which happens to be valid base-64.