前端加密-aes-256-cbc(服务端是php,项目是用的vue)

  最近有一个项目是接口都需要进行加密,采用的加密方法是aes-256-cbc的模式。网上查找了好多资料,也折腾了好久。终于弄好了。特此记录下。

  首先安装crypto-js。 npm install crypto-js --save

  然后定义2个方法,用于加密和解密。这里我将其命名为cryptoJS.js。放在utils文件夹下。具体代码如下:

import CryptoJS from "crypto-js";

/**
  *
  * 第一个参数word是待加密或者解密的字符串;
  * 第二个参数keyStr是aes加密需要用到的16位字符串的key;
  * 第三个参数是初始化向量 iv。
*/

export default {
  // 加密
  encrypt(word, keyStr, ivStr) {
    const key = CryptoJS.enc.Latin1.parse(keyStr);
    const iv = CryptoJS.enc.Latin1.parse(ivStr);
    const encoded = CryptoJS.AES.encrypt(word, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        adding: CryptoJS.pad.ZeroPadding
    }).toString()
    return encoded;
  },
  // 解密
  decrypt(word, keyStr, ivStr) {
    keyStr = keyStr;
    ivStr = ivStr;
    var key = CryptoJS.enc.Utf8.parse(keyStr);
    let iv = CryptoJS.enc.Utf8.parse(ivStr);

    var decrypt = CryptoJS.AES.decrypt(word, key, {
      iv,
      mode: CryptoJS.mode.CBC,
      padding: CryptoJS.pad.ZeroPadding
    });
    return decrypt.toString(CryptoJS.enc.Utf8);
  }
};

  然后在需要使用加密方法的那个文件里先引入cryptoJS.js文件。如:import CryptoJS from ‘../utils/CryptoJS‘

  使用的时候:let cryData = CryptoJS.encrypt(paramsEncode, keyStr, hash)   // 即为加密后的数据。其中paramsEncode是需要加密的数据、keyStr是加密时使用的key,与服务端一致、hash是偏移量,是一个随机生成的16位字符串。发送请求时需要将该偏移量与加密后的数据一起传递给服务端,由服务端完成加密工作。

  随机生成字符串的方法:

const random = {
   randomString (len) {
       len = len || 32;
      var $chars = ‘ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678‘;    /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
      var maxPos = $chars.length;
      var pwd = ‘‘;
      for (var i = 0; i < len; i++) {
      pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
    }
    return pwd;
   }
}

export default random

原文地址:https://www.cnblogs.com/jf-67/p/12125348.html

时间: 2024-11-06 12:30:32

前端加密-aes-256-cbc(服务端是php,项目是用的vue)的相关文章

IOS加密 AES 256算法(EncryptAndDecrypt.h)[转载]

////EncryptAndDecrypt.h #import <Foundation/Foundation.h> @class NSString; @interface NSData (Encryption) - (NSData *)AES256EncryptWithKey:(NSData *)key; //加密 - (NSData *)AES256DecryptWithKey:(NSData *)key; //解密 - (NSString *)newStringInBase64FromDa

WebApi用JilFormatter处理客户端序列化的字符串加密,之后在服务端解析。

本文有改动,参考原文:https://www.cnblogs.com/liek/p/4888201.html https://www.cnblogs.com/tonykan/p/3963875.html 功能背景:WebApi 客户端 一个Model 序列化为string类型,想将其加密之后再Post到服务端,在服务端解析出来再处理. Jil.dll 安装: 然后: 选择项目,输入 Install-Package Jil 回车. 然后创建一个JilFormatter类,代码如下: using J

Javascript端加密java服务端解密

通常我们会通过htts来保证传输安全,但如果我们不用https,如何通过javascript来保证浏览器端发送的参数进行加密,并且通过RSA算法来处理. 这里我们可以利用jquery的一个加密插件jcryption来处理,可以参考 http://jcryption.org/#examples 现在版本是3.0 但是没有java端的实现,下次有时间再研究.现在这个用的是1.1的版本 这个可以在 http://linkwithweb.googlecode.com/svn/trunk/Utilitie

websocket 实现 前端vue-socket.io 服务端 koa2(socket.io)

前端:(vue项目,main.js) // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' // import VueNa

springboot+spring security +oauth2.0 demo搭建(password模式)(认证授权端与资源服务端分离的形式)

项目security_simple(认证授权项目) 1.新建springboot项目 这儿选择springboot版本我选择的是2.0.6 点击finish后完成项目的创建 2.引入maven依赖  下面是我引入的依赖 1 <?xml version="1.0" encoding="UTF-8"?> 2 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&q

服务端主动给客户端推送消息

在了解这个之前,先要知道ajax,队列和递归 ajax操作 异步提交,局部刷新.用它就可以实现轮询/长轮询 创建django项目 views from django.shortcuts import render,HttpResponse import json from django.http import JsonResponse # Create your views here. # 验证ajax def ab_dy(request): if request.method == 'post

WebSocket 实现服务端给客户端推送消息

目录 代码发布 应用场景 ajax 操作 队列 递归 如何实现服务端主动给客户端推送消息的效果 长轮询(兼容性好) websocker(主流浏览器都支持) 代码验证(了解) 代码发布 服务端主动给客户端推送消息 截至目前为止,我们所写的 web 项目基本都是基于 HTTP 协议的 HTTP 协议有四大特性:无链接 基于 HTTP 协议实现服务端主动给客户端推送消息好像有点麻烦--- 我们都经历过,浏览器打开一个网站不动,网站过一会儿自动弹出消息 再比如网页版本的微信和 qq,我们所有人创建一个群

服务端渲染与客户端渲染的区别与应用场景

内容整理自多个论坛博客. 主要参考:https://www.jianshu.com/p/b8cfa496b7ec https://www.jianshu.com/p/10b6074d772c https://www.douban.com/note/722996691/ 客户端渲染(CSR)VS服务端渲染(SSR) 1.客户端渲染和服务端渲染 1.1 概念 客户端渲染:后端不提供完整的html页面,而是提供一些api使得前端可以获取json数据,然后前端拿到json数据之后再在前端进行html页面

git分布式的理解----简单服务端搭建

Git是分布式的,并没有服务端跟客户端之分,所谓的服务端安装的其实也是git.Git支持四种协议,file,ssh,git,http.ssh是使用较多的,下面使用ssh搭建一个免密码登录的服务端. 1.提前安装git跟sshserver: 2. 创建一个用户,用来运行git服务: 新建一个用户,叫gituser,然后切换到gituser的默认目录,创建一个叫.ssh的文件夹,并在其中创建一个叫authorized_keys的文件,这个文件将用于存储git开发者的ssh公钥. 3.建立一个git仓

XFire创建WebService服务端和客户端

感谢这篇博客http://clq9761.iteye.com/blog/1261963的分享. 可能是环境搭建的原因,按照资料有些地方没有成功,于是自己改了一部分,写了下面的demo 1.服务端 1.1.新建web工程,复制需要的jar包到lib文件夹 1.2.web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/