Why I get Malformed UTF-8 data error on crypto-js?

Question

I try to encrypt and decrypt this string using crypto-js:

const str = `eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOiI1ZDg5MjMxMjc5OTkxYjJhNGMwMjdjMGIiLCJoc2giOiIkMmEkMTMkWk53Y0cubjdRZFIybDA3S1RHd2RoLlN0QksudW5GSFVGLkZnZ0tQTGlUV2pOVEFqVy9SMm0iLCJncmFudCI6ImFjY2VzcyIsImlhdCI6MTU2OTI2ODUwMiwiZXhwIjoxNjAwODI2MTAyfQ.PQcCoF9d25bBqr1U4IhJbylpnKTYiad3NjCh_LvMfLE~3~null~undefined~434ce0149ce42606d8746bd9`;

But I got an error:

Error: Malformed UTF-8 data

What I doing wrong? How do I fix that?

The full code also on stackbliz:

import crypto from 'crypto-js';

const str = `eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOiI1ZDg5MjMxMjc5OTkxYjJhNGMwMjdjMGIiLCJoc2giOiIkMmEkMTMkWk53Y0cubjdRZFIybDA3S1RHd2RoLlN0QksudW5GSFVGLkZnZ0tQTGlUV2pOVEFqVy9SMm0iLCJncmFudCI6ImFjY2VzcyIsImlhdCI6MTU2OTI2ODUwMiwiZXhwIjoxNjAwODI2MTAyfQ.PQcCoF9d25bBqr1U4IhJbylpnKTYiad3NjCh_LvMfLE~9~null~undefined~434ce0149ce42606d8746bd9`;

const cryptoInfo = crypto.AES.encrypt(str, 'secret').toString();

console.log({ cryptoInfo });
const info2 = crypto.AES.decrypt(str, 'secret').toString(crypto.enc.Utf8);

console.log({ info2 });

Solution 1

Not sure why, but you have to wrap your string with an object and use JSON.stringify in order to make it works.

Here:

    import crypto from 'crypto-js';

    const str = `eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOiI1ZDg5MjMxMjc5OTkxYjJhNGMwMjdjMGIiLCJoc2giOiIkMmEkMTMkWk53Y0cubjdRZFIybDA3S1RHd2RoLlN0QksudW5GSFVGLkZnZ0tQTGlUV2pOVEFqVy9SMm0iLCJncmFudCI6ImFjY2VzcyIsImlhdCI6MTU2OTI2ODUwMiwiZXhwIjoxNjAwODI2MTAyfQ.PQcCoF9d25bBqr1U4IhJbylpnKTYiad3NjCh_LvMfLE~9~null~undefined~434ce0149ce42606d8746bd9`;

    const cryptoInfo = crypto.AES.encrypt(JSON.stringify({ str }), 'secret').toString();

    console.log({ cryptoInfo });
    const info2 = crypto.AES.decrypt(cryptoInfo, 'secret').toString(crypto.enc.Utf8);

    console.log({ info2 });

    const info3 = JSON.parse(info2);

    console.log({ str: info3.str });

Solution 2

You forgot to pass the encrypted text as parameter to decrypt function.

In decrypt function you are passing original string, i.e. 'str' which is causing the problem in above code, here is the corret code.

import crypto from "crypto-js";

const str = `eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOiI1ZDg5MjMxMjc5OTkxYjJhNGMwMjdjMGIiLCJoc2giOiIkMmEkMTMkWk53Y0cubjdRZFIybDA3S1RHd2RoLlN0QksudW5GSFVGLkZnZ0tQTGlUV2pOVEFqVy9SMm0iLCJncmFudCI6ImFjY2VzcyIsImlhdCI6MTU2OTI2ODUwMiwiZXhwIjoxNjAwODI2MTAyfQ.PQcCoF9d25bBqr1U4IhJbylpnKTYiad3NjCh_LvMfLE~9~null~undefined~434ce0149ce42606d8746bd9`;

const cryptoInfo = crypto.AES.encrypt(JSON.stringify(str), "secret");

console.log({cryptoInfo});

const info2 = crypto.AES.decrypt(cryptoInfo.toString(), 'secret').toString(crypto.enc.Utf8);

console.log({ info2 });

Solution 3

I encrypt a name and pass it as URL parameter. I was supprised, that the decrypt code did not work It was because of the "+" char generated in the encrypted parameter. Then using "encodeURIComponent" and "decodeURIComponent" it worked.

<script>
jQuery("#myBtn").click(function(){
    var clientname= jQuery("#myInput").val();
    var encrypted  = CryptoJS.AES.encrypt(clientname, "secret key 123");
    //my URL to call with encrypted client name
    jQuery("#output").append('<small id="myurl">https://www.xxxxx.com/?id='+encodeURIComponent(encrypted)+"</small>");
});
</script>  



var urlParams = new URLSearchParams(window.location.search);
var crypted_param = decodeURIComponent(urlParams.get('id'));
if(crypted_param && crypted_param != null && crypted_param != "" && crypted_param != "null"){   
    var decrypted = CryptoJS.AES.decrypt(crypted_param, "secret key 123");
    jQuery('#output1').val(decrypted.toString(CryptoJS.enc.Utf8));
}
    

---