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 });
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
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
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.
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>...
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 });
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 });
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));
}
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With