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

对称加密:如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,加密块链)模式 

优点:  

  • 不容易主动攻击
  • 安全性好于ECB
  • 适合传输长度长的报文,是SSL、IPSec的标准。 

缺点:  

  • 不利于并行计算
  • 误差传递
  • 需要初始化向量IV

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对称加密解密内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax!

Vue中使用crypto-js AES对称加密算法实现加密解密的更多相关文章

  1. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  2. Android,AES-GCM或普通AES上的数据加密?

    我的团队需要开发一个解决方案来加密二进制数据(存储为byte[])在用Java编写的Android应用程序的上下文中.加密数据将以各种方式传输和存储,在此期间不能排除数据损坏.最终,另一个Android应用程序(再次用Java编写)将不得不解密数据.已经确定加密算法必须是AES,密钥为256位.但是,我想知道我们应该使用哪种AES实现和/或“模式”.我已经阅读了一些名为GCM模式的内容,我们已经对

  3. 我的Android项目的FIPS合规性

    我正在开发一个与安全相关的项目,并且必须确保它符合FIPS标准.根据我的理解,FIPS合规性是硬件和软件级别的合规性.目前有2款三星Android设备符合FIPS标准,即它们在硬件和软件级别都具有合规性.我的问题如下:–1)如果我想让我的Android应用程序符合FIPS标准,如果我在我的项目FIPS兼容中使用了唯一的加密模块,这就够了吗?

  4. vue自定义加载指令v-loading占位图指令v-showimg

    这篇文章主要为大家介绍了vue自定义加载指令和v-loading占位图指令v-showimg的示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

  5. vue使用动画实现滚动表格效果

    这篇文章主要为大家详细介绍了vue使用动画实现滚动表格效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  6. 关于Vue 监控数组的问题

    这篇文章主要介绍了Vue 监控数组的示例,主要包括Vue 是如何追踪数据发生变化,Vue 如何更新数组以及为什么有些数组的数据变更不能被 Vue 监测到,对vue监控数组知识是面试比较常见的问题,感兴趣的朋友一起看看吧

  7. Vue子组件props从父组件接收数据并存入data

    这篇文章主要介绍了Vue子组件props从父组件接收数据并存入data的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  8. Vue h函数的使用详解

    本文主要介绍了Vue h函数的使用详解,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  9. VUE响应式原理的实现详解

    这篇文章主要为大家详细介绍了VUE响应式原理的实现,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

  10. vue+Element ui实现照片墙效果

    这篇文章主要为大家详细介绍了vue+Element ui实现照片墙效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部