CODEWITHSUNDEEP
javascripthtmlencode
Timppa
Timppa

Reputation: 363

Decoding not working with Base64

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.

Upvotes: 0

Views: 7290

Answers (4)

Sᴀᴍ Onᴇᴌᴀ
Sᴀᴍ Onᴇᴌᴀ

Reputation: 8297

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. 1

The length of the string literal "hello" (i.e. 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 (e.g. with btoa()) or at least has a length of four (e.g. 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>

1https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/atob

Upvotes: 1

Ateş G&#246;ral
Ateş G&#246;ral

Reputation: 140032

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.

Upvotes: 0

herriekrekel
herriekrekel

Reputation: 571

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

Upvotes: 0

Ayman El Temsahi
Ayman El Temsahi

Reputation: 2610

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/

Upvotes: 1

Related Questions