使用jsencrypt加密后,经get方式传递后解密为null

需求是这样的:要从内部产品,跳到外部链接时,需要将加密后的信息使用get方法的参数带到url上,然后那边接收到后解密
我遇到的问题:密文通过url传输后,密文丢失且错误,导致解密为null

1. 安装

npm i jsencrypt --save

2. 封装加解密文件

公钥和私钥生成方式,可以参考官网:https://www.npmjs.com/package/jsencrypt,在这里我用的是网上找的公钥和私钥,自己开发时,请自行替换

// encrypt.js 加解密的方法
// 这是网上找的测试公钥
const publicKey = `MIGeMA0GCSqGSIb3DQEBAQUAA4GMADCBiAKBgHpl+vwbsumVicyKwLS7430FSo5x
gUaNGAvdoPehz2Kz0/nNb9p3nlY5U3IkQ7flyFg5/n25UXGaNALU4/ud7SlTCSOk
mDqfyJWGJHSDA8rc60B5hwkKkXdoFMYZ/MixbqTFP4es//fco0+BOo/7GCIZjlgi
RgbKZlJrhUPTN4CvAgMBAAE=`;

import JSEncrypt from "jsencrypt";

// 加密
export function setEncryt(msg) {
  const jsentrypt = new JSEncrypt();
  jsentrypt.setPublicKey(publicKey);
  return jsentrypt.encrypt(msg);
}

// 这是网上找的测试用的解密私钥
const privateKey = `MIICWgIBAAKBgHpl+vwbsumVicyKwLS7430FSo5xgUaNGAvdoPehz2Kz0/nNb9p3
nlY5U3IkQ7flyFg5/n25UXGaNALU4/ud7SlTCSOkmDqfyJWGJHSDA8rc60B5hwkK
kXdoFMYZ/MixbqTFP4es//fco0+BOo/7GCIZjlgiRgbKZlJrhUPTN4CvAgMBAAEC
gYB38rLJF9f4g1x8f8mkFLE2VtYey+s1mZXkIvjZVNBo2PQ2TPZ9sVYRB7LYG+Pl
NyFkHMliqha/bq/jyn/1mGnN+zYObiloea+djwfYxClBE5RlpMbKDWNLVhA+TIdf
itMaNtVxBS+Uxben5zLjS/lNb6MghPfKsqNpLu8mOTKVIQJBAOc0zTr74GrR1irS
obnh5p4wmtjtK1vvQCqZRZynzM4GjFjA46oBLwERrmg1rwuwYqqk5a8a+UMnAwIy
LapYknECQQCHhiA9+xSu1MACAgtvOnbYp3AH9LkkVJsRWewp+Gi7nKiQuIB4WzMq
sGH331c0NX+xjivclZZv8NjFaVb2YpUfAkBQ33taQniBZNzRJdREPOx6MO45Ktyb
z9hWDj73SQqulkPJV89KzBcw/IpREVYldJFOt1dQJNND1gWLYxnuGAVBAkBDUxk/
UTUUKTJ9jOB7UBLsTDm2ahdzeehS9VYB/5qf4RJIWq/PmpbPlTIF/liG4jDeVt9p
RJKoZ4B4iX0fBxhHAkAYmuzegom74e41u8tB1pAvfGiz8btZhzfdaU0tVSMJ4gi2
QZMikWSBT+13h+vBtIp9E18viI84lS2TECghHaIW`;

// 解密
export function decrypt(msg) {
  let decrypt = new JSEncrypt();
  decrypt.setPrivateKey(privateKey);
  var decryptMsg = decrypt.decrypt(msg);
  return decryptMsg;
}

加密并传递信息

一开始,我是这样做的加密:

import { setEncryt } from "@/utils/encrypt";
sendInfo() {
      const url = `https://test.com/param=${setEncryt(text)}`
      window.open(
        url,
        "_self"
      );
}

对方解密:

import { decrypt } from "@/utils/encrypt";
// 获取url上的参数信息
let text = query.param;
console.log("解密后:", decrypt(text));  // null

然后,发现对方解密后为null???

于是不信邪的我,开始自己来验证一下里面的坑,自己模拟一下跳内部页面,然后发现:
加密后:DecD7fTpRDk2ygoOWHMiHbecHMdwZoYxGHR04n8iO/CZLFO+A7MGan7riue7Mz9IkwUMIlTbMTaVDMsTJ/hhf/IZOp/eW6l0CkkS+7CQrhiNJsSQrYDew63bYCea3kdchJO417SiP1VncKOrPrQPIxH7vLVleujrXYrxtQ67su0=
解密后就变成了:
DecD7fTpRDk2ygoOWHMiHbecHMdwZoYxGHR04n8iO/CZLFO A7MG...ncKOrPrQPIxH7vLVleujrXYrxtQ67su0=

中间那段被吃了!变成...了,然后+号变成了空格" ",所以解密后就自然为null

解决方案

  1. 针对...问题:发送和接收信息,要经过url编码(encodeURI、decodeUrl)
  2. 针对空格问题,将其替换成+号后,再进行解密

import { setEncryt } from "@/utils/encrypt";
// 加密过程
sendInfo() {
      const text= "13111111111"; // 要加密的信息
      let encrytText = setEncryt(phone); // 进行加密
      console.log("加密后:", encrytText);
      var res = encodeURI(encrytText); // 进行url编码
      console.log("urlEncode后", res);
      const url = `https://test.com/param=${setEncryt(res)}`
      window.open(
        url,
        "_self"
      );
}
import { decrypt } from "@/utils/encrypt";

// 解密过程
getInfo() {
    let text = query.param; // 接收到的url编码后的密文
    console.log("接收到的密文", text);
    const decodeUrl = decodeURI(text);  // 进行url解码
    console.log("解码后的密文", decodeUrl);
    const replaceText = decodeUrl.replace(/\s/g, "+"); // 将密文传递过程丢失的+号,替换回来
    console.log("替换后的密文:", replaceText);
    console.log("解密后:", decrypt(replaceText)); // 13111111111
}

你可能感兴趣的:(使用jsencrypt加密后,经get方式传递后解密为null)