Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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 });
like image 775
Jon Sud Avatar asked Sep 26 '19 07:09

Jon Sud


People also ask

Is there a problem with UTF-8 data in Safari?

There is no problem with the above code running in chrome, but in Safari, malformed UTF-8 data is reported Maybe there are few scenarios of front-end encryption and decryption, and some errors are found, but there are few solutions. One of them says that the encrypted data is not an integral multiple of 8, and the above errors will be reported

What is the uncaught error in crypto-JS?

Crypto-JS——Uncaught Error: Malformed UTF-8 data tags: JavaScript Foreword useCrypto-JSAfter adding decryption, the prompt errorUncaught Error: Malformed UTF-8 data step I said that I am here, because there is a wrap in the data passed, it will be fine ~ JSON.stringify(content.data.replace(/[ ]/g, '')) Intelligent Recommendation

Why can't I decrypt the encrypted text?

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.

What is UTF8 Bom error in XML serialization?

C # UTF8 BOM leads to XML serialization and reverse sequence error: Data At the root level is invalid. Line 1, Position 1. Recently I have a problem in writing an XML serialization and reverse sequence implementation, roughly similar to the following code: The XML variable value of the above code sequence is: <test>...


4 Answers

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 });
like image 87
Shlomi Levi Avatar answered Oct 20 '22 10:10

Shlomi Levi


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 });
like image 20
Mahesh Avatar answered Oct 20 '22 10:10

Mahesh


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));
}
    

like image 2
Severine Avatar answered Oct 20 '22 09:10

Severine


Despite all the above suggestions check your Encryption Key and Secret Key. While decrypting Encryption Key should match with your Encryption Key which you have used at the time of encrypting.

like image 1
Ahmer Saeed Avatar answered Oct 20 '22 10:10

Ahmer Saeed