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

目录
  • 下载crypto-js
  • 加密解密数据
  • AES算法的ECB模式加密-设置秘钥
  • AES算法的CBC模式加密-设置秘钥和偏移量
  • 参考:

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

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

(0)

相关推荐

  • 在vue项目中使用md5加密的方法

    npm安装: npm install --save js-md5 1.在需要使用的项目文件中引入: import md5 from 'js-md5'; 使用: md5('hello world')  // 5eb63bbbe01eeed093cb22bb8f5acdc3 2.或者在main.js文件中将md5转换成vue原型: import md5 from 'js-md5'; Vue.prototype.$md5 = md5; 使用: this.$md5('hello world') // 5

  • 在Vue项目中使用jsencrypt.js对数据进行加密传输的方法

    项目需求中需要对用户登录时的密码进行加密,在网上查询些许文章后,最终与后端协商使用jsencrypt.js. jsencrypt.js的github地址: https://github.com/travist/js... 使用yarn安装至Vue项目 yarn add jsencrypt --dep 或者使用npm npm install jsencrypt --dep 引入jsencrypt import { JSEncrypt } from 'jsencrypt' 可封装为全局混合,便于调用

  • vue中使用cookies和crypto-js实现记住密码和加密的方法

    使用crypto-js加解密 第一步,安装 npm install crypto-js 第二步,在你需要的vue组件内import import CryptoJS from "crypto-js"; 第三步,使用 // Encrypt 加密 var cipherText = CryptoJS.AES.encrypt( "my message", "secretkey123" ).toString(); console.log(cipherText

  • vue.js使用3DES加密的方法示例

    本文实例讲述了vue.js使用3DES加密的方法.分享给大家供大家参考,具体如下: 如何在VUE-CLI手脚架建立的工程中使用3des加密: npm install crypto-js --save-dev import CryptoJS from 'crypto-js' //DES加密 Pkcs7填充方式 encryptByDES(message, key){ const keyHex = CryptoJS.enc.Utf8.parse(key); const encrypted = Cryp

  • Vue使用JSEncrypt实现rsa加密及挂载方法

    挂载全局方法 使用jsencrypt进行rsa加密 原文链接:Js参数RSA加密传输,jsencrypt.js的使用 * https://www.jb51.net/article/179813.htm (原文处有一个地方不对,不需要转换+,rsa已经做过base64转码了) 1.安装依赖 npm install jsencrypt 2.在main.js引入 import { JSEncrypt } from 'jsencrypt' 3.挂载全局方法 //JSEncrypt加密方法 Vue.pro

  • vue接口请求加密实例

    1. 安装vue项目 npm init webpack project 2 安装iview npm i iview --save (这里是结合iview框架使用的 可根据自己的需求安装 当然也可以不安装) 3 在src目录下建一个utils文件夹 里面需要放5个js 都是封装好的js文件 功能不仅仅局限于加密 可以研究一下 你会学到很多东西 1.api.js /** * 为vue实例添加http方法 * Vue.use(http) */ import http from './http' exp

  • vue实现文字加密功能

    本文实例为大家分享了vue实现文字加密功能的具体代码,供大家参考,具体内容如下 效果: 组件代码:  base64 npm install --save js-base64 md5 npm install --save js-md5 <template> <div> </div> </template> <script> import md5 from 'js-md5'; var Base64 = require('js-base64').Bas

  • Vue中使用crypto-js AES对称加密算法实现加密解密

    目录 下载crypto-js 加密解密数据 AES算法的ECB模式加密-设置秘钥 AES算法的CBC模式加密-设置秘钥和偏移量 参考: 在数字加密算法中,通过可划分为对称加密和非对称加密 对称加密:如AES,DES,3DES 含义:加密和解密使用的是同一把钥匙.密钥不能在网络中传输,避免被拦截.如果要传输,必须要对密钥进行非对称加密再加密一次. 优点:算法简单,加密解密容易,效率高,执行快. 缺点:相对来说不算特别安全,只有一把钥匙,密文如果被拦截,且密钥也被劫持,那么,信息很容易被破译. 非对

  • Golang实现AES对称加密算法实例详解

    目录 前言 前置知识 生成随机数 生成随机字符串 加密和解密 加密 解密 总结 前言 安全总是相对的,对于敏感数据最好要有一定保护措施,尤其是在线数据,通过加密可转换信息为编码,从而防止非法获取.对开发者来说,加密本质是保护应用程序数据,假设我们以明文存储用户密码,可能会导致信息泄露.使用密文在一定程度上可避免信息落入他人之手,本文介绍Golang的对称加密算法实现. 前置知识 在正式学习加密解密之前,首先看看如何生成随机数,以及为什么要随机数. 生成随机数 编程中生成随机数或字符串非常重要,它

  • java基于AES对称加密算法实现的加密与解密功能示例

    本文实例讲述了java基于AES对称加密算法实现的加密与解密功能.分享给大家供大家参考,具体如下: package com.soufun.com; import java.io.UnsupportedEncodingException; import java.security.InvalidKeyException; import java.security.NoSuchAlgorithmException; import java.security.SecureRandom; import

  • vue中利用iscroll.js解决pc端滚动问题

    项目中经常遇到区域超出部分会出现滚动条,滚动条在pc端可以通过鼠标滚轮控制上下,在移动端可以通过鼠标拖动页面进行滚动,这两种场景都是符合用户习惯,然而这种滚动条一般都是竖[vertical]项滚动条,如果pc端出现横向滚动条[horizontal],在不做处理的情况下,你只能用鼠标拖动横向滚动条按钮[scrollerbar]展示滚动区域,而且为了美观,一般滚动条会进行样式编写或者隐藏,那么横向区域默认情况下就没法滚动. 二.描述 现为了解决pc端滚动区域能像移动端一样,能够通过鼠标拖动滚动区域直

  • vue中使用vue-print.js实现多页打印

    本文主要介绍了vue项目中使用print.js打印,解决多页,分页,打印预览样式修改等问题. 引入安装vue-print.js cnpm i vue-printjs --save-dev 解决打印多页只出现一页问题 由于打印插件存在问题,如果打印文件超出一页,只显示一页,所以我们需要修改print.js源文件,所以只能手动下载vue-print.js到本地,做一些修改,然后引入到项目中,不能使用npm安装 下载 print.js https://github.com/zxc19890923/pr

  • vue 中使用print.js导出pdf操作

    1.print.js // 打印类属性.方法定义 /* eslint-disable */ const Print = function (dom, options) { if (!(this instanceof Print)) return new Print(dom, options); this.options = this.extend({ 'noPrint': '.no-print' }, options); if ((typeof dom) === "string") {

  • 如何在vue中使用video.js播放m3u8格式的视频

    @[toc] 注意: "vue": "^2.6.11", "video.js": "^7.10.2", "videojs-contrib-hls": "^5.15.0", "mux.js": "^5.7.0" 一.安装 yarn add video.js yarn add videojs-contrib-hls // 这是播放hls流需要的插件 y

  • vue中利用three.js实现全景图的完整示例

    粗暴一点,直接上代码: 第一步: 通过指令下载three.js npm install three -S 第二步: 在组件中引用 import * as THREE from 'three' 第三步: html部分 <div id="container"></div> js部分 <script> import * as THREE from 'three'; var camera; var renderer; var scene; export de

  • 关于vue中使用three.js报错的解决方法

    目录 前言 1.vue的问题? 2.Proxy的异常情况 3.Three.js的问题 4.defineProperty异常情况 5.解决 总结 前言 最近在学习three.js,同时也学习一下vue3,然后就出现问题了,报错直接用不了,错误信息如下: Uncaught TypeError: 'get' on proxy: property 'modelViewMatrix' is a read-only and non-configurable data property on the prox

  • Vue中使用highlight.js实现代码高亮显示以及点击复制

    目录 效果如下 第一步 安装highlight.js 第二步 在main.js中引入 第三步 创建组件 效果如图:点击显示代码 第四步: 使用组件 第五步 实现点击复制代码clipboard.js. 本文主要介绍了Vue中使用highlight.js实现代码高亮显示以及点击复制,具体如下: 效果如下 第一步 安装highlight.js yarn add highlight.js 第二步 在main.js中引入 import hl from 'highlight.js' // 导入代码高亮文件

随机推荐