文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue中使用crypto-jsAES对称加密算法实现加密解密

2024-04-02 19:55

关注

 在数字加密算法中,通过可划分为对称加密非对称加密

对称加密:如AES,DES,3DES

含义:加密和解密使用的是同一把钥匙。密钥不能在网络中传输,避免被拦截。如果要传输,必须要对密钥进行非对称加密再加密一次。

优点:算法简单,加密解密容易,效率高,执行快。

缺点:相对来说不算特别安全,只有一把钥匙,密文如果被拦截,且密钥也被劫持,那么,信息很容易被破译。

非对称加密:如RSA DSA RCC

含义:有两个钥匙,及公钥(Public Key)和私钥(Private Key)。公钥和私钥是成对的存在,如果对原文使用公钥加密,则只能使用对应的私钥才能解密。通过私钥经过一系列算法是可以推导出公钥的,但是无法通过公钥反向推倒出私钥,这个过程的单向的。

优点:安全,即使密文被拦截、公钥被获取,但是无法获取到私钥,也就无法破译密文。作为接收方,务必要保管好自己的密钥。

缺点:加密算法及其复杂,安全性依赖算法与密钥,而且加密和解密效率很低。

 下载crypto-js

cnpm i -S crypto-js

局部引用

import CryptoJS from "crypto-js";

加密解密数据

前端CBC模式或者ECB模式下的填充方式 Pkcs7,对应后端AES算法模式中的 PKCS5Padding 填充方式

AES算法的ECB模式加密-设置秘钥

ECB(Electronic Code Book电子密码本)模式

优点:

缺点:  

因此,此模式适于加密小消息。 

秘钥必须为16进制

encryptData() {
      // 此处key为16进制
      let key = '385f33cb91484b04a177828829081ab7';
      console.log('密钥:', key);
      // key格式化处理
      key = CryptoJS.enc.Utf8.parse(key);
      // 加密内容
      const polygonGeojson = {
        type: 'Feature',
        properties: {},
        geometry: {
          type: 'Polygon',
          coordinates: [
            [
              [106, 33],
              [108.03955078125, 32.2313896627376],
              [108.25927734375, 33.15594830078649],
              [106, 33]
            ]
          ]
        }
      };
      const content = JSON.stringify(polygonGeojson);
      console.log('加密前:', polygonGeojson);
      // 加密方法
      const encryptedContent = CryptoJS.AES.encrypt(content, key, {
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7
      });
      const encStr = encryptedContent.ciphertext.toString();
      console.log('加密后:', encStr);
      // 解密方法
      const decryptedContent = CryptoJS.AES.decrypt(
        CryptoJS.format.Hex.parse(encStr),
        key,
        {
          mode: CryptoJS.mode.ECB,
          padding: CryptoJS.pad.Pkcs7
        }
      );
      console.log(
        '解密:',
        JSON.parse(CryptoJS.enc.Utf8.stringify(decryptedContent))
      );
    }

AES算法的CBC模式加密-设置秘钥和偏移量

CBC(Cipher Block Chaining,加密块链)模式 

优点:  

缺点:  

CBC模式前、后端需要确定偏移量的值,并且保持一致,这样才能确保后端解密成功。

    encryptData() {
      // 此处key为16进制
      let key = '385f33cb91484b04a177828829081ab7';
      console.log('密钥:', key);
      // key格式化处理
      key = CryptoJS.enc.Utf8.parse(key);
 
      // 偏移量长度为16位, 注:偏移量需要与后端定义好,保证一致
      let iv_key = '37fa77f6a3b0462d';
      let iv = CryptoJS.enc.Utf8.parse(iv_key);
      // 加密内容
      const polygonGeojson = {
        type: 'Feature',
        properties: {},
        geometry: {
          type: 'Polygon',
          coordinates: [
            [
              [106, 33],
              [108.03955078125, 32.2313896627376],
              [108.25927734375, 33.15594830078649],
              [106, 33]
            ]
          ]
        }
      };
      const content = JSON.stringify(polygonGeojson);
      console.log('加密前:', polygonGeojson);
      // 加密方法
      const encryptedContent = CryptoJS.AES.encrypt(content, key, {
        iv: iv,
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7
      });
      const encStr = encryptedContent.ciphertext.toString();
      console.log('加密后:', encStr);
      // 解密方法
      const decryptedContent = CryptoJS.AES.decrypt(
        CryptoJS.format.Hex.parse(encStr),
        key,
        {
          iv: iv,
          mode: CryptoJS.mode.ECB,
          padding: CryptoJS.pad.Pkcs7
        }
      );
      console.log(
        '解密:',
        JSON.parse(CryptoJS.enc.Utf8.stringify(decryptedContent))
      );
    }

参考:

https://www.cnblogs.com/cndarren/p/15108270.html

https://blog.csdn.net/qq_40323256/article/details/116947888

到此这篇关于Vue中使用crypto-js AES对称加密算法实现加密解密的文章就介绍到这了,更多相关Vue crypto-js AES对称加密解密内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯