js 加密解密 cryptojs(对称加密库)

js 加密解密可以使用 crypto-js
这是一个对称加密的库, 可以使用 AES DES 但没有 rsa 等非对称加密的方法
安装方法 npm install crypto-js
它可以进行 MD5 SHA-1 SHA-256 Base64 AES DES 等算法和加密

	import crypto from "crypto-js"
	let md5binary = crypto.MD5("message");
	let hamcmd5binary =crypto.HmacMD5("message");
	//以上两个得到的是一个二进制的数据, 要可打印出业,就要使用 16进制模式或者base64方式
	//crypto 也有应的转换方法

通过显式调用toString方法并传递编码器,可以将WordArray(二进制数据)对象转换为其他格式。

import crypto from "crypto-js"
	 let md5message = cryptjs.MD5(str); //这里得到的都是摘要的 二进制数据
  console.log(md5message);  //打印的二进制数据
  let hmacmd5message = cryptjs.HmacMD5(str,"haha"); //这里得到的都是摘要的 二进制数据
  console.log(hmacmd5message); //打印的二进制数据

  let sha1message = cryptjs.SHA1(str); //这里得到的都是摘要的 二进制数据
  console.log(sha1message); //打印的二进制数据
  let hamcsha1message = cryptjs.HmacSHA1(str,"haha");//这里得到的都是摘要的 二进制数据
  console.log(hamcsha1message); //打印的二进制数据

  let sha512message = cryptjs.SHA512(str); //这里得到的都是摘要的 二进制数据
  console.log(sha512message); //打印的二进制数据
  let hmacsha512message = cryptjs.HmacSHA512(str,"haha");//这里得到的都是摘要的 二进制数据
  console.log(hmacsha512message);//打印的二进制数据

  //上面打印的都是二进制的数据, 不利于传输, 所以, 我们要把它们变成 十六进制数据,或都base64的数据来进行传输
  //通过显式调用toString方法并传递编码器,可以将WordArray(二进制)对象转换为其他格式。

  //转成 base64 格式的方法

  let strbyhex = md5message.toString(cryptjs.enc.Hex);   //把二进制数据转成16进制
  console.log(strbyhex,"|||||||| js 十六进制结果");

  let strbybase64 = md5message.toString(cryptjs.enc.Base64);    //把二进制数据转成base64
  console.log(strbybase64,"||||||||js base64 结果")

我们把最后几行的 二进制转16进制和 二进制转base64 的结果和 php 生成的结果对比一下看看

    public function testpass(){
        $md5binary =  hash("md5","message",true);  //第三个参数 为false  输出的是十六进制数据   如果是true  输出的是二进制数据
        //php 转二进制数据到 十六进制数据
        $md5hex = bin2hex($md5binary);
        //php 二进制数据到base64
        $md5base64 = base64_encode($md5binary);
        echo "php十六进制结果";
        echo $md5hex;
        echo "<br/>";
        echo "php base64结果";
        echo $md5base64;
        }

分别运行代码看结果
在这里插入图片描述
在这里插入图片描述
对比没有问题

对称加密

cryptojs 也可以用来做对称加密,就拿 AES 对称加密来说
AES 对称加密是 需要有 密钥key 向量 iv
CryptoJS支持AES-128、AES-192和AES-256。它会根据你传入的密钥的大小来选择变体。如果你使用密码短语,它会生成一个256位的密钥。
当然, 我们也可以自己来定义 密钥key 和 iv向量
在这之前我们要先了解一下, js base64 16进制 utf8 之前的转换

js php utf8字符串转base64
	let str = "这是一个测式";
  let words = cryptjs.enc.Utf8.parse(str);  //先把字符串转成words数型的二进制数组
  let base64words = cryptjs.enc.Base64.stringify(words);  //把二进制数组转成 base64字符串
  console.log(base64words);  //输出  6L+Z5piv5LiA5Liq5rWL5byP

我们可以用 php base64_encode 来验证一下

 $a = "这是一个测式";
 echo base64_encode($a);   //输出的结果  6L+Z5piv5LiA5Liq5rWL5byP

js php 把base64字符转成 utf8
let baseStr = "6L+Z5piv5LiA5Liq5rWL5byP";
  let wordsbyBase64 = cryptjs.enc.Base64.parse(baseStr);  //把base64字符串转成 words数组(二进制数组)
  let res = cryptjs.enc.Utf8.stringify(wordsbyBase64);
  console.log(res);   //结果 这是一个测式

php base64_decode 来验证

 		$a = "6L+Z5piv5LiA5Liq5rWL5byP";
        echo base64_decode($a);  // 结果 这是一个测式

js php 把utf8 字符串,转成16进制
  let str1 = "这是一个字符串转成十六进制的测试";
  let words16bystr = cryptjs.enc.Utf8.parse(str1);
  let hexstr = cryptjs.enc.Hex.stringify(words16bystr);
  console.log(hexstr);  //得到结果 e8bf99e698afe4b880e4b8aae5ad97e7aca6e4b8b2e8bdace68890e58d81e585ade8bf9be588b6e79a84e6b58be8af95

用 php 来进行验证

        $str = "这是一个字符串转成十六进制的测试";
        $strto16 = bin2hex($str);
        echo $strto16; //结果 e8bf99e698afe4b880e4b8aae5ad97e7aca6e4b8b2e8bdace68890e58d81e585ade8bf9be588b6e79a84e6b58be8af95

此处有点疑问:明明是一个字符串, 为什么php 转换时用的 bin2hex 函数呢,这不应该是二进制数据转hex 才用的函数吗?
后来,我使用 php 的gettype 函数 看了一下,不管是字符串,还是二进制数据, 在php 这里都是string 类型, 也就是说 php 底层是把 字符串当做二进制的数据在处理(这里不知道对不对,感觉是这样的)

   $str = "这是一个字符串转成十六进制的测试";
        echo gettype($str);     // 显示 string
        echo "<br/>";
        //为了得到一个二进制的乱码一样的数据, 我们可以使用 hash函数得到
        //hash 第三个参数如果设为 true ,就可以得到一个二进制数据
        $binary = hash("md5","123456",true);
        echo $binary;  // 显示  � �9I�Y��V�W��>
        echo gettype($binary);  // 显示 string 但这个明显是一些乱码

从上面的例子中, 我们看到 其实 $str 和 $binary 都是一个类型的(string,底层看他们都是二进制数据),那么为什么 一个可以显示正常,一个显示乱码呢,
因为 $str 是我们输入的中文字符, 在字符码表中一定是有想应的编码的,但是 $binary 就是一串无序的二进制数, 有的可能中文码表中根本就没有对应的字符,所以就显示成乱码了
因为有的会显示成乱码, 所以我们在传输的时候,可以使用 base64来传输,把二进制数据转成 base64,传输,不会丢失数据

js php 把16进制数据转成 utf8 字符串
let str2 = "e8bf99e698afe4b880e4b8aae5ad97e7aca6e4b8b2e8bdace68890e58d81e585ade8bf9be588b6e79a84e6b58be8af95";
  let hextowords = cryptjs.enc.Hex.parse(str2);  //把十六进制转成 words (二进制数组)
  let str2back = cryptjs.enc.Utf8.stringify(hextowords);  //把二进制转成utf8
  console.log(str2back);

php 验证

       $hexstr = 'e8bf99e698afe4b880e4b8aae5ad97e7aca6e4b8b2e8bdace68890e58d81e585ade8bf9be588b6e79a84e6b58be8af95';
       $str = hex2bin($hexstr);
       echo $str;


有了上面的基础, 我们下面来做一个例子

由后端php 使用 对称加密,加密一段文字, 然后返回给前端js , 同时要返回 加密的 iv, 然后前端 js 使用 cryptojs 来进行解密, 看是否正确

js AES 加解密

cryptjs.AES.encrypt 参数中的 key 和 iv 都是 以 wordsArray (二进制) 传入的,所以要明白 Utf8.parse 的方法
CryptoJS支持AES-128、AES-192和AES-256。它会根据你传入的密钥的大小来选择变体。
所以 下例中, 我们的 key1 只有16位,所以会自动选用 aes-128

   //加密
  let secretStr = "这是一个测试AES";
  let key1 = cryptjs.enc.Utf8.parse("1234567812345678");  //十六位的
  let encrypted1 = cryptjs.AES.encrypt(secretStr,key1,{
    iv:cryptjs.enc.Utf8.parse("abcdefghijklmnop"),
    mode:cryptjs.mode.CBC,   //aes加密模式cbc  这个参数要前后端一至使用统一的加密模式
    padding:cryptjs.pad.Pkcs7  //使用 Pkcs7的方式填充   //这个php 加密时默认就是这种方式
  });
  console.log(encrypted1);  //加密的结果是一个对象
  console.log(encrypted1.key);  //对象中有 key , iv 等信息
  console.log(cryptjs.enc.Utf8.stringify(encrypted1.key))  //打印出key 的utf8字符串
  console.log(encrypted1.toString())    //使用toString 方法可以得到加密后的字符串
//加密的结果是:  YzXNRYB6/mmevnBiZPLRPu4Knk+qUVNyhUKonAB2Wjg=  这明显是一个base64格式的 
  //解密
  let result = cryptjs.AES.decrypt(encrypted1.toString(),key1,{
    iv:cryptjs.enc.Utf8.parse("abcdefghijklmnop"),
    mode:cryptjs.mode.CBC,
    padding:cryptjs.pad.Pkcs7
  })
  console.log(result);  //解密后得到的是一个 wordArray 二进制的对象
  console.log(cryptjs.enc.Utf8.stringify(result));    //把二进制对象转成 utf8的字符
  //解密的结果是 这是一个测试AES

php AES 加解密

        $str =  "这是一个测试AES";
        $algo = "AES-128-CBC";
        dump(openssl_cipher_iv_length($algo));  //这里我们可以先看一下 AES-128-CBC 的所需要的  iv 长度 结果是16,所以我们自定义了一个iv 是16个字符
        $key = "1234567812345678";
        $iv = "abcdefghijklmnop";
        $encrypt = openssl_encrypt($str,$algo,$key,OPENSSL_RAW_DATA,$iv);
        echo $encrypt;  //显示结果 YzXNRYB6/mmevnBiZPLRPu4Knk+qUVNyhUKonAB2Wjg=
        echo "<br/>";
        $decrypt = openssl_decrypt($encrypt,$algo,$key,OPENSSL_RAW_DATA,$iv);
        echo $decrypt;

从上面可以看到 js 和 php 加密的结果是一样的,那么就说明 前端js 和 后端php也是可以互通加解密的

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/135676.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

docker安装AWVS 23.9.231005181

本文声明仅AWVS用作学习使用 将镜像文件secfa_awvs.tar复制到目标机器上。 我的百度网盘文件路径&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1frbOH4UZlMz9bMXyZs1o0g 提取码&#xff1a;na6y –来自百度网盘超级会员V6的分享 在目标机器上&#xff0c;使用以下命…

macOS Big Sur(macos11版本)

macOS Big Sur是苹果推出的最新操作系统&#xff0c;具有以下特点&#xff1a; 全新的设计风格&#xff1a;Big Sur采用了全新的设计语言&#xff0c;包括更加圆润的窗口和控件、更加鲜明的色彩和更加简洁的界面。这种设计风格使得操作系统更加美观和易用。强大的性能表现&…

jQuery和BootStrap

文章目录 jQuery1、jQuery介绍2、jQuery的选择器2.1、直接查找2.2、导航查找 3、jQuery的绑定事件4、jQuery的操作标签5、jQuery的动画5.1、基本方法5.2、自定义动画 6、扩展方法 (插件机制)7、BootStrap jQuery 1、jQuery介绍 jQuery是什么 jQuery是一个快速、简洁的JavaSc…

华为ensp:ppp+CHAP认证

如果一头开启了认证&#xff0c;如果对面没有输入认证则双方无法通信 开启ppp r1和r2在系统视图模式进行同样的操作 interface Serial 1/0/0 link-protocol pppquit 开启ppp R1 去r1设置chap认证用户和密钥 进入系统视图 interface Serial 1/0/0 ppp authentication-m…

Django视图函数和资源

文章目录 1.视图1.1 文件or文件夹1.2 相对和绝对导入urls1.3 视图参数1.4 返回值1.5 响应头1.6 FBV和CBV 2.静态资源2.1 静态文件2.2 媒体文件 1.视图 1.1 文件or文件夹 1.2 相对和绝对导入urls 注意实现&#xff1a;不要再项目根目录做相对导入。 原则&#xff1a; 绝对导入…

PanNet: A deep network architecture for pan-sharpening(ICCV 2017)

文章目录 AbstractIntroduction过去方法存在的问题我们提出新的解决方法Related work PanNet: A deep network for pan-sharpening&#xff08;PanNet:用于泛锐化的深度网络&#xff09;Background and motivationPanNet architectureSpectral preservationStructural preserva…

windows HOOK学习(一)

了解HOOK 一&#xff1a;HOOK是什么&#xff1f;二&#xff1a;HOOK的分类三&#xff1a;HOOK的原理&#xff1f;四&#xff1a;为什么全局钩子HOOK必须写到DLL中&#xff1f;五&#xff1a;HOOK的类型 一&#xff1a;HOOK是什么&#xff1f; hook就是我们平时听到的钩子&…

vue2 数字软键盘 封装 可拖动 使用简单

1、效果图 2、使用方式 <Keyboard v-if"show" close"show false" :inputDom"$refs.input" /> 封装的数字键盘 Keyboard.vue 组件代码 <template><divclass"keyboard"ref"keyboard":style"{ left: …

算法通关村第八关-白银挑战二叉树的深度和高度问题

大家好我是苏麟 , 今天说说几道二叉树深度和高度相关的题目 . LeetCode给我们造了一堆的题目&#xff0c;研究一下104、110和111三个题&#xff0c;这三个颗看起来挺像的&#xff0c;都是关于深度、高度的。 最大深度问题 描述 : 二叉树的 最大深度 是指从根节点到最远叶子…

SharePoint 是什么

SharePoint 平台使您能够以在线方式和本地方式轻松地管理和协调业务数据。因为其灵活性和易使用性&#xff0c;公司可以快速采用SharePoint来管理其业务数据。 SharePoint Microsoft 365 一种基于云的服务&#xff0c;由 Microsoft 托管&#xff0c;适用于各种规模的企业。 任何…

【Redis】redis-server和redis-cli

上一篇《redis 的下载和安装》 https://blog.csdn.net/m0_67930426/article/details/134341071?spm1001.2014.3001.5501 安装完之后开始使用 打开客户端之前需要先打开服务端 redis-server 直接使用该命令打开就行 然后在打开客户端 redis-cli 使用ping命令查看是否连接服…

云原生 黑马Kubernetes教程(K8S教程)笔记——kubernetes介绍。Master集群控制节点、Node工作负载节点、Pod控制单元

参考文章&#xff1a;kubernetes介绍 文章目录 1. Kubernetes介绍1.1 应用部署方式演变传统部署&#xff1a;互联网早期&#xff0c;会直接将应用程序部署在物理机上虚拟化部署&#xff1a;可以在一台物理机上运行多个虚拟机&#xff0c;每个虚拟机都是独立的一个环境&#xff…

如何提升管理组织能力?

组织能力能力属于管理能力中的一部分&#xff0c;所以也称之为管理组织能力&#xff0c;组织是将人和事物的组合&#xff0c;有效的梳理和导向结果的能力。每个人都有组织能力&#xff0c;只是能力和效率上存在较大的差异。 一人的组织能力从学生时代就能体现出来&#xff0c;…

华为ensp:vrrp双机热备负载均衡

现在接口ip都已经配置完了&#xff0c;直接去配置vrrp r1上192.168.1.100 作为主 192.168.2.100作为副 r2上192.168.1.199 作为副 192.168.2.100作为主 这样就实现了负载均衡&#xff0c;如果两个都正常运行时&#xff0c;r1作为1.1的网关&#xff0c;r2作为2.1网关…

springboot高校全流程考勤系统-计算机毕设 附源码 27637

Springboot高校全流程考勤系统 摘 要 本文针对高校考勤等问题&#xff0c;对其进行研究分析&#xff0c;然后开发设计出高校全流程考勤系统以解决问题。高校全流程考勤系统系统主要功能模块包括&#xff1a;考勤签到、课程信息、考勤情况、申请记录列表等&#xff0c;系统功能设…

OpenWRT浅尝 / 基于RAVPower-WD009便携路由文件宝的旁路网关配置

目录 前言需求分析手头的设备家庭网络拓扑图旁路网关配置OpenWRT固件选择OpenWRT固件刷入旁路网关配置流程 旁路网关的使用前置工作日常存储/关键备份内网穿透24小时待命下载器 前言 近期由于个人需求&#xff0c;需要一台OpenWRT设备实现一些功能。所以本文主要还是为了自己后…

堆的应用-----Top k 问题

目录 前言 Topk问题 1.问题描述 2.解决方法 3.代码实现&#xff08;C/C&#xff09; 前言 在人工智能算法岗位的面试中&#xff0c;TopK是问得最多的几个问题之一&#xff1a; 到底有几种方法&#xff1f; 这些方案里蕴含的优化思路究竟是怎么样的&#xff1f; 为啥T…

ARM Linux 基础学习 / 系统相关,文件系统,文件属性

编辑整理 by Staok。 本文部分内容摘自 “100ask imx6ull” 开发板的配套资料&#xff08;如 百问网的《嵌入式Linux应用开发完全手册》&#xff0c;在 百问网 imx6ull pro 开发板 页面 中的《2.1 100ASK_IMX6ULL_PRO&#xff1a;开发板资料》或《2.2 全系列Linux教程&#xf…

高性能收发原始数据包的框架(Netmap)

一、Netmap 简介 Netmap 是一个高性能收发原始数据包的框架&#xff0c;由 Luigi Rizzo 等人开发完成&#xff0c;其包含了内核模块以及用户态库函数。其目标是&#xff0c;不修改现有操作系统软件以及不需要特殊硬件支持&#xff0c;实现用户态和网卡之间数据包的高性能传递。…

链表的逆置

方法1&#xff1a; 依次将指针反向&#xff0c;最后令头指针指向尾元素。 逆置过程如下&#xff1a; 当q指针为空时&#xff0c;循环结束。 //试写一算法&#xff0c;对单链表实现就地逆置&#xff0c; void Reverse1(List plist)//太复杂,不用掌握 {assert(plist ! NULL);i…