Angular中URL查询参数解密时UTF-8格式错误的解决请求

在应用中使用AES加密解密服务处理localStorage数据完全正常，但解密通过URL查询参数传递的加密对象时，出现以下错误：

core.js:478 Uncaught Error: Malformed UTF-8 data

相关代码 #

AES加密解密服务 #

export class AESEncryptDecryptService {
    
      secretKey = 'My secret string';
      constructor() { }
    
      encrypt(value? : string) : string{
        if(!isNil(value)) {
          return CryptoJS.AES.encrypt(value, this.secretKey.trim()).toString();
        }
      }
    
      decrypt(textToDecrypt?){
        if(!isNil(textToDecrypt)) {
        return CryptoJS.AES.decrypt(textToDecrypt, this.secretKey.trim()).toString(CryptoJS.enc.Utf8);
        }
      }
}

生成带加密参数的URL #

const user= new User();
this.qrUrl =  `${environment.someurl}` +'currentUser=' +this._AESEncryptDecryptService.encrypt(JSON.stringify(user).toString()).toString();

解密URL参数 #

const url_string = window.location.href;
const url = new URL(url_string);

if(url.searchParams.get('user')) {
  this.qrDevice = JSON.parse(this._AESEncryptDecryptService.decrypt(url.searchParams.get('user')));
}

问题原因 #

调试后确认，加密字符串中的+号在URL传递后被解析成了空格，同时出现了不必要的换行，导致解密时拿到的数据和原始加密数据不一致，最终触发UTF-8格式错误。这是因为+在URL查询参数中是空格的编码表示，直接将包含+的加密字符串拼接进URL会被自动替换。

修复方案 #

1. 生成URL时对加密字符串做URL编码 #

使用encodeURIComponent()对加密后的字符串进行编码，保留所有特殊字符：

const encryptedUser = this._AESEncryptDecryptService.encrypt(JSON.stringify(user));
this.qrUrl = `${environment.someurl}currentUser=${encodeURIComponent(encryptedUser)}`;

2. 解密前对获取到的参数做URL解码 #

从URL中拿到加密参数后，先通过decodeURIComponent()解码，恢复原始加密字符串再进行解密：

const encryptedUser = url.searchParams.get('user');
if(encryptedUser) {
  const decodedUser = decodeURIComponent(encryptedUser);
  this.qrDevice = JSON.parse(this._AESEncryptDecryptService.decrypt(decodedUser));
}

补充说明：CryptoJS的AES加密结果为Base64格式，其中包含+、/、=这类在URL中有特殊含义的字符，必须通过URL编码确保这些字符在传递过程中不被篡改，解码后再解密才能得到正确的原始数据。

内容的提问来源于stack exchange，提问作者coder123