vue项目在pc端实现对称加密AES

最新推荐文章于 2024-01-15 11:29:04 发布
最新推荐文章于 2024-01-15 11:29:04 发布
阅读量321 收藏
点赞数
分类专栏： 信息安全 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guairena/article/details/114978388
版权

需求：
  前端请求到后端返回的数据，涉及到一些敏感的数据，需要进行加密处理，前端进行解密。

  1. 接口请求到的加密数据

在这里插入图片描述

  1. 打印解密后的数据

在这里插入图片描述

思路：

  1. 后端加密，前端解密；后端生成加密的key值，告诉前端，前端解密的时候也需要使用该key值去解密。
  2. 前端首先需要在index.html中引入cdn插件crypto.js。
  3. 封装一个公共的解密函数。
  4. 在具体的vue组件中直接调用解密函数。

代码：

前端代码

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue-shop</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.3.0/echarts.min.js"></script>
   	<!-- 引入解密插件 -->
    <script src="https://cdn.bootcss.com/crypto-js/3.1.9-1/crypto-js.min.js"></script>
  </body>
</html>


// format.js
exports.install = function (Vue, options) {
	Vue.prototype.decryptByAES = (ciphertext) => {
    var key = '12345ABCDErwerw2'
    var keyHex = CryptoJS.enc.Utf8.parse(key)
    var result = CryptoJS.AES.decrypt(ciphertext, keyHex, {
      mode: CryptoJS.mode.ECB,
      padding: CryptoJS.pad.Pkcs7
    })
    var resultValue = result.toString(CryptoJS.enc.Utf8)
    return resultValue
  }
}

// main.js
import Vue from 'vue'
import ElementUI from 'element-ui'
// 导入
import formatJS from '@/utils/format'

// 注册 这样就可以在全局使用该方法了
Vue.use(formatJS)
Vue.use(ElementUI)

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

// config/index.js
module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/imp': {
        target: 'http://10.134.117.121:8609',
        changeOrigin: true,
        pathRewrite: {
          '^/' : ''
        }
      },
      // 请求的加密接口为该服务下的一个接口，需要代理服务器实现跨域请求
      '/jupiter': {
        target:'http://api.zhire.cc',
        changeOrigin: true,
        pathRewrite: {
          '^/': ''
        }
      },
    },

    host: '0.0.0.0',
    port: 8080,
    autoOpenBrowser: true,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false,
    useEslint: true,
    showEslintErrorsInOverlay: false,
    devtool: 'cheap-module-eval-source-map',
    cacheBusting: true,
    cssSourceMap: true
  }
}


// index.vue
<template>
</template>

<script>
import axios from 'axios'
import Vue from 'vue'

export default {
	data () {
	  return {
	    listParams: {
	      query_type: '1',
	      query_date: '2021-02-15',
	      query_month: '',
	      query_year: '',
	      dateStart: '',
	      dateStop: '',
	      platformId: ''
	    },
	  }
    }
}
methods: {
	getLists () {
      axios.create({
        baseURL: '/jupiter'
      }).get('/i/box/list', {
        params: {
          query_type: '1',
          query_date: '2021-02-15'
        }
      }).then(response => {
        let data = response.data.data.list
        // let resetdata = data.map(function (item, index, ary) {
        //   return Vue.prototype.decryptByAES(item.income)
        // })
        // console.log('resetdata', resetdata, 'data', data)
        data.forEach(item => {
          item.income = Vue.prototype.decryptByAES(item.income)
        })
        console.log('data2', data)
      })
    },
}
</script>

后端代码

import org.apache.commons.codec.binary.Base64;
import javax.crypto.Cipher;
import javax.crypto.spec.SecretKeySpec;
public class AesUtils {
	private static final String ALGORITHMSTR = "AES/ECB/PKCS5Padding";

    /**
     * 加密
     *
     * @param content 待加密的内存
     * @param key     加密key（长度要超过16）
     * @return
     */
    public static String encrypt(String content, String key) {
        try {
            //获得密码的字节数组
            byte[] raw = key.getBytes();
            //根据密码生成AES密钥
            SecretKeySpec skey = new SecretKeySpec(raw, "AES");
            //根据指定算法ALGORITHM自成密码器
            Cipher cipher = Cipher.getInstance(ALGORITHMSTR);
            //初始化密码器，第一个参数为加密(ENCRYPT_MODE)或者解密(DECRYPT_MODE)操作，第二个参数为生成的AES密钥
            cipher.init(Cipher.ENCRYPT_MODE, skey);
            //获取加密内容的字节数组(设置为utf-8)不然内容中如果有中文和英文混合中文就会解密为乱码
            byte[] byte_content = content.getBytes("utf-8");
            //密码器加密数据
            byte[] encode_content = cipher.doFinal(byte_content);
            //将加密后的数据转换为字符串返回
            return Base64.encodeBase64String(encode_content);
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
    }

    /**
     * 解密
     *
     * @param encryptStr
     * @param decryptKey
     * @return
     */
    public static String decrypt(String encryptStr, String decryptKey) {
        try {
            //获得密码的字节数组
            byte[] raw = decryptKey.getBytes();
            //根据密码生成AES密钥
            SecretKeySpec skey = new SecretKeySpec(raw, "AES");
            //根据指定算法ALGORITHM自成密码器
            Cipher cipher = Cipher.getInstance(ALGORITHMSTR);
            //初始化密码器，第一个参数为加密(ENCRYPT_MODE)或者解密(DECRYPT_MODE)操作，第二个参数为生成的AES密钥
            cipher.init(Cipher.DECRYPT_MODE, skey);
            //把密文字符串转回密文字节数组
            byte[] encode_content = Base64.decodeBase64(encryptStr);
            //密码器解密数据
            byte[] byte_content = cipher.doFinal(encode_content);
            //将解密后的数据转换为字符串返回
            return new String(byte_content, "utf-8");
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
    }

    public static void main(String[] args) {
        // 加密的key,前后端需要保持一致
        String key = "12345ABCDErwerw2";
        // 加密
        String s = encrypt("hello", key);
        System.out.println(s);
        // 解密
        String s1 = decrypt(s, key);
        System.out.println(s1);
    }
}
// 接口http://api.zhire.cc/jupiter/i/box/list?query_type=1&query_date=2021-02-01

参考文章：
前后端分离API接口如何加密 —— AES加密方案
对称加密和非对称加密（一）初步理解
[安全与协议]使用crypto.js进行加密详解
AES加密算法的详细介绍与实现
vue-cli本地环境API代理设置和解决跨域
浅谈vue中插件的使用方法Vue.use(xxx),原理及实现

怪哈哈
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前后端（JAVA）实现AES对称加解密方式_前端后端对称加解密
m0_57077948的博客
04-12 838
RC加密包括RC2，RC4，RC5，RC2 是由著名密码学家 Ron Rivest 设计的一种传统对称分组加密算法，它可作为 DES 算法的建议替代算法。它的输入和输出都是64bit。密钥的长度是从1字节到128字节可变，但目前的实现是8字节（1998年）。前端其他工程配置请看文章《java前后端参数和返回加密解密AES+CBC》
aes对称加密vue版本demo
01-16
内含JAVA端封装好的AES加密类 VUE依赖于CryptoJS封装好的对应的前端JS 亲测可用 对了 CBC模式
Vue中使用crypto-js进行AES对称加密
~~
03-23 8261
参考： https://www.cnblogs.com/cndarren/p/15108270.html https://blog.csdn.net/qq_40323256/article/details/116947888 下载crypto-js cnpm i -S crypto-js 局部引用 import CryptoJS from "crypto-js"; 加密解密数据 // 此处key为16进制 let key = '385f33cb91484b04a177828.
vue 实现AES对称加密（CBC模式）
7c
06-13 2469
vue 实现AES对称加密； key 是密钥 ，iv 是密钥偏移量，对称解密使用的算法是 AES-128-CBC算法，数据采用 Pkcs7填充 ， key 需要为16位，约定密钥要与后端协定一致。
vue.js 登录对密码进行对称加密（AES）
night43的博客
08-17 467
vue.js 登录对密码进行对称加密（AES）
VUE中的AES对称加密应用（详细）
Kilven
06-12 1758
密码学中的高级加密标准（Advanced Encryption Standard，AES），又称Rijndael加密法，是美国联邦政府采用的一种区块加密标准。 话不多说上才艺！ 一、在终端中输入安装命令： npm install crypto-js --save-dev 二、在VUE目录的src文件夹中的common公用文件夹中添加文件AES.js，在文件中添加代码。 import CryptoJS from 'crypto-js'; export default { //随机生
vue项目中使用AES实现密码加密解密（ECB和CBC两种模式）
10-16
总之，在Vue项目中实现AES加密解密可以有效保护用户数据，ECB模式简单但可能存在模式可预测性，而CBC模式通过引入初始向量提高了安全性。正确理解和运用这些加密技术，有助于构建更加安全的Web应用。在开发过程中，...
如何基于python3和Vue实现AES数据加密
09-17
AES是一种广泛使用的对称加密算法，适用于保护敏感信息，如在微信小程序中用于加密传输数据。对称加密算法的核心特点是加密和解密使用相同的密钥，这使得AES在性能上表现出色，尤其适合于大量数据的快速加解密。 ...
基于前端VUE框架的 RSA 和 AES 用户登录信息远程加密传输的实现
06-03
本文将深入探讨如何在Vue.js项目中实现RSA和AES加解密，以及它们在用户登录信息保护中的作用。 首先，Vue.js是一个流行的轻量级前端JavaScript框架，用于构建用户界面。在Vue项目中，我们可以利用Vue的组件化特性，...
对称加密
big_sea_m的博客
11-14 162
对称加密 String src=""; try { String str = "向金海10086abc@#$%^&*?"; // 待加密 String key = "12345678"; SecretKey secretKey = new SecretKeySpec(key.getBytes(
SpringBoot+Vue实现对称加密和非对称加密
最新发布
m0_63378258的博客
01-15 1564
了解什么是对称加密和非对称加密，以及两者的优缺点。并且实现加解密功能
vue.js java 前后台aes对称加密解密 CBC模式
01-16 1722
JAVA端封装 package com.zdgk.application.thirdparty.pay.compont; import org.apache.commons.codec.DecoderException; import org.apache.commons.codec.binary.Hex; import org.apache.commons.net.util.Base64; i...
vue中AES(对称加密)，RSA(非对称加密)实现登录页用户名，密码加密
qq_42483955的博客
04-18 1524
vue项目中使用AES，RAS加密方法实操
vue前后端rsa+aes混合加密_AES前后端对称加密
weixin_35947010的博客
01-25 967
概述 高级加密标准(AES,Advanced Encryption Standard)为最常见的对称加密算法，对称加密算法即加密和解密的过程使用同一个秘钥进行加密。本文从实用的角度去描述前后端使用AES对称加密。需求分析 前端请求数据传递参数时，需要对其进行加密，而不是使用明文进行传输，防止http请求被人截获而获取到信息，AES对称加密就是一种方式，前端对密码进行加密，传输给后端，后端获取之后使...
vue中使用AES加密（AES/ECB/PKCS5Padding）
热门推荐
Stiven_Lu的博客
10-16 1万+
       前端项目中遇到需要对登录密码进行AES/ECB/PKCS5Padding加密，然后调用登录接口，传入密码，用户名。现将实现方法，记录下来。 第一步: 安装crypto-js         vue项目中执行npm install crypto-js --save-dev ，安装crypto-js。 第二步：项目中新建一个js文件，比如：utils.js （utils：工具集） ...
echarts前后端交互数据_前后端交互如何保证安全性？
weixin_39653622的博客
11-24 430
前言web与后端，andorid与后端，ios与后端，像这种类型的交互其实就属于典型的前端与后端进行交互。在与B端用户进行交互的过程中，我们通常忽略了其安全性(甚至从未考虑安全性)。比如，请求和响应数据的明文传输，对接口并没有做严格的身份校验。如果我们还是按照这种思路去做C端用户的交互，那么等待着必将是血淋淋的教训。接下来，我带领大家如何在与C端用户安全的进行交互。保证安全性的几种方式前后端安全性...
java前后端参数和返回加密解密AES+CBC+BASE64
weixin_37530941的博客
04-27 1万+
java 前后端加密解密， java +vue aes+cbc参数返回值加密解密
JAVA 实现AES/ECB/PKCS5Padding加解密
sinat_34690106的博客
12-05 1593
package com.newland.njwpayment.utils; import javax.crypto.Cipher; import javax.crypto.spec.SecretKeySpec; import Decoder.BASE64Decoder; import Decoder.BASE64Encoder; /** * AES加解密 * * Created ...
在VUE3项目中 axios 使用AES
05-31
axios 是一个基于 Promise 的 HTTP 客户端，可以用于浏览器和 Node.js。而 AES（Advanced Encryption Standard）是一种常用的对称加密算法，可以用来加密和解密数据。 在 VUE3 项目中使用 axios 和 AES 进行加密和解密的步骤如下： 1. 安装 axios 和 crypto-js： ```bash npm install axios crypto-js ``` 2. 在需要使用 axios 的组件或页面中引入 axios 和 crypto-js： ```javascript import axios from 'axios'; import CryptoJS from 'crypto-js'; ``` 3. 定义一个加密函数，用来对请求数据进行加密： ```javascript function encryptData(data, key) { const iv = CryptoJS.enc.Utf8.parse('1234567890123456'); // 初始化向量 const encrypted = CryptoJS.AES.encrypt(data, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 }); return encrypted.toString(); } ``` 其中，`data` 是需要加密的数据，`key` 是加密密钥，`iv` 是初始化向量，`mode` 和 `padding` 是 AES 加密算法的模式和填充方式。 4. 在发送请求前，对请求数据进行加密： ```javascript const key = '1234567890123456'; // 加密密钥 const requestData = { name: 'John', age: 30 }; // 需要加密的数据 const encryptedData = encryptData(JSON.stringify(requestData), key); // 对数据进行加密 axios.post('/api/data', { data: encryptedData }) .then(response => { console.log(response.data); }) .catch(error => { console.error(error); }); ``` 其中，`JSON.stringify(requestData)` 将请求数据转换成字符串，然后使用 `encryptData` 函数对其进行加密。 5. 定义一个解密函数，用来对响应数据进行解密： ```javascript function decryptData(data, key) { const iv = CryptoJS.enc.Utf8.parse('1234567890123456'); // 初始化向量 const decrypted = CryptoJS.AES.decrypt(data, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 }); return decrypted.toString(CryptoJS.enc.Utf8); } ``` 其中，`data` 是需要解密的数据，`key` 是解密密钥，`iv` 是初始化向量，`mode` 和 `padding` 是 AES 解密算法的模式和填充方式。 6. 在接收响应后，对响应数据进行解密： ```javascript const key = '1234567890123456'; // 解密密钥 axios.get('/api/data') .then(response => { const decryptedData = decryptData(response.data, key); // 对响应数据进行解密 console.log(JSON.parse(decryptedData)); }) .catch(error => { console.error(error); }); ``` 其中，`response.data` 是响应数据，使用 `decryptData` 函数对其进行解密，然后使用 `JSON.parse` 将解密后的字符串转换成对象。 注意：在使用 AES 加密算法时，加密密钥和解密密钥必须相同，否则无法正确解密数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值