前端加密与解密

news2025/7/21 4:19:42

插件加密

MD5加密(不可逆)

MD5加密是不可逆的,相当于是插件加密,当然你也可以把他的方法抄过来自己实现。

MD5.js是通过前台js加密的方式对用户信息,密码等私密信息进行加密处理的工具,前端用的比较多。

MD5加密一共有6种方法
1, hex_md5(value)
2, b64_md5(value)
3, any_md5(s, e)
4, hex_hmac_md5(key, data)
5, b64_hmac_md5(key, data)
6, any_hmac_md5(key, data, e)
在这里插入图片描述

<input id="urlInput" type="text" placeholder="请输入您要加密的内容">
<br/>
<button id="btnEncrypt">加密</button>
<br>
<div>加密后的内容是:</div>
<input placeholder="加密后的内容" type="text" id="encryptContent" value="">
var btnEncrypt = document.getElementById('btnEncrypt');
var urlInput = document.getElementById('urlInput');
var outPut = document.getElementById('encryptContent');
// var btnDecryption = document.getElementById('btnDecryption');
// var decryptionContent = document.getElementById('decryptionContent');
btnEncrypt.addEventListener('click', function() {
     // 获取用户输入的内容
    /*
        加密方法
        1, hex_md5(value)
        2, b64_md5(value)
        3, any_md5(s, e)
        4, hex_hmac_md5(key, data)
        5, b64_hmac_md5(key, data)
        6, any_hmac_md5(key, data, e)
    */
     var str64 = b64_md5(urlInput.value);
     outPut.value = str64;
     console.log('hex_md5加密', hex_md5(urlInput.value));
     console.log('b64_md5加密', b64_md5(urlInput.value));
     console.log('any_md5加密', any_md5('1', urlInput.value));
     console.log('hex_hmac_md5加密', hex_hmac_md5('1', urlInput.value));
});

在这里插入图片描述

sha1加密(不可逆)

sha1.js
在这里插入图片描述

<script type="text/ecmascript" src="./sha1.js"></script>
var str = sha1('HerayChen');
console.log(str);

AES/DES加密解密

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
<script>
    var key = "01201201"     //秘钥必须为:8/16/32位
    var value = "HerayChen";
    //加密:必须是字符串格式的
    var str1 = CryptoJS.AES.encrypt(value, CryptoJS.enc.Utf8.parse(key), {
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7
    }).toString();
    console.log(str1);

    //解密:必须是utf-8格式的
    var str2 = CryptoJS.AES.decrypt(str1, CryptoJS.enc.Utf8.parse(key), {
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7
    }).toString(CryptoJS.enc.Utf8);
    console.log(str2);

</script>

在这里插入图片描述

RSA加解密(公钥加密,私钥解密)

下载后的js包在bin包里面。
在这里插入图片描述

<script src="./jsencrypt.js"></script>
<script>
    var publicKey = "NABGTKBHFMFJFMBAJAB";
    var encrypt = new JSEncrypt();
    // 加密
    encrypt.setPublicKey(publicKey);
    var str1 = encrypt.encrypt(str1); //需要加密的内容
    console.log(str1); 
    //解密数据      
    var privateKey="SNFDGKFGNDFGDFGKJFNFHJA";
    encrypt.setPrivateKey(privateKey);
    var str2 = encrypt.decrypt(str1);//需要解密的内容
    console.log(str2); 
</script>

sha256 js 加密

用JAVA来弄的,不会呀~
可以看看这篇文章了解下

JS API 加密

Base64加密

base64加密主要是使用js的btoa来实现的,可以通过atob来解密。
在这里插入图片描述

在这里插入图片描述

<input id="urlInput" type="text" placeholder="请输入您要加密的内容">
<br/>
<button id="btnEncrypt">加密</button>
<br>
<div>加密后的内容是:</div>
<input placeholder="加密后的内容" type="text" id="encryptContent" value="">
<br>
<button id="btnDecryption">解密</button>
<br>
<input placeholder="加密后的内容" type="text" id="decryptionContent" value="">
var btnEncrypt = document.getElementById('btnEncrypt');
var urlInput = document.getElementById('urlInput');
var outPut = document.getElementById('encryptContent');
var btnDecryption = document.getElementById('btnDecryption');
var decryptionContent = document.getElementById('decryptionContent');

// base 64 加密
btnEncrypt.addEventListener('click', function() {
     var str64 = window.btoa(urlInput.value);
    outPut.value = str64;
})
btnDecryption.addEventListener('click', function() {
     var str = window.atob(outPut.value);
     decryptionContent.value = str;
})

编码和解码字符串

escape()和unescape()。

var name = "我的名字是:HerayChen";
// 注意编码的时候必须中英文混合,纯英文的时候编码是不生效的
// 也可以理解为编码只对中文和符号生效
var str1 = escape(name);
var str2 = unescape(name);
console.log('编码', str1);
console.log('解码', str2);

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【毕业设计】深度学习手势识别检测系统 - python

文章目录1 前言2 项目背景3 任务描述4 环境搭配5 项目实现5.1 准备数据5.2 构建网络5.3 开始训练5.4 模型评估6 识别效果7 最后1 前言 &#x1f525; Hi&#xff0c;大家好&#xff0c;这里是丹成学长的毕设系列文章&#xff01; &#x1f525; 对毕设有任何疑问都可以问学长…

【ASE+python学习】批量实现将含有空位的结构进行氢饱和(实际就是在某个位置添加氢原子)

批量实现将含有空位的结构进行氢饱和任务大纲任务思路氢原子相对位置计算代码实现-单个结构加氢导入所需库/包计算氢原子坐标给结构加氢运行结果代码实现-批量结构加氢导入相关库/包遍历文件夹内所有结构&#xff0c;并逐次给结构加氢批量实现的逻辑与结果在搬砖过程中&#xf…

【教学类-15-01】20221115《学号(姓名)描字帖-A4横版-竖切》(中班)

效果展示 浅蓝色打印纸&#xff08;灰色字体&#xff09; 背景需求&#xff1a; 在中3班的Python学具实验中&#xff0c;发现至少有3位幼儿明确表示自己不会写学号&#xff0c;还有3位幼儿书写的学号是镜像字&#xff08;两个数字位置互换、两个数字都左右镜像、2和5上下镜像等…

【树莓派不吃灰】命令篇⑤ ps -ef | grep xxx | grep -v grep | wc -l 命令

目录1. 简介2. grep -v grep 命令作用2.1 ps -ef | grep python32.2 grep -v grep❤️ 博客主页 单片机菜鸟哥&#xff0c;一个野生非专业硬件IOT爱好者 ❤️❤️ 本篇创建记录 2022-11-18 ❤️❤️ 本篇更新记录 2022-11-18 ❤️&#x1f389; 欢迎关注 &#x1f50e;点赞 &am…

让 Serverless 更普惠,阿里云函数计算 FC 宣布全面降价,最大幅度达 37.5%

背景 11 月 5 日&#xff0c;2022 杭州 云栖大会上&#xff0c;阿里云宣布函数计算 FC 开启全面降价&#xff0c;vCPU 单价降幅 11% &#xff0c;其他的各个独立计费项最高降幅达 37.5% 。 本次云栖大会上&#xff0c;阿里云智能总裁张建锋表示&#xff0c;以云为核心的新型…

动态分区算法(头歌实验)第1关:首次适应算法。第2关:最佳适应算法。

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 题目&#xff1a; 第1关&#xff1a;首次适应算法 任务描述 假设初始状态下可用的内存空间为55MB&#xff0c;并有如下的请求序列&#xff1a; 作业1申请15MB 作业2申请30M…

Yolov5+图像分割+百度AI接口——车牌实时检测识别系统

Hallo&#xff0c;各位小伙伴大家好呀&#xff01;这两天一直在肝项目&#xff0c;都是关于计算机视觉方面的&#xff0c;所以这两天一直也没有更新&#xff08;真的不是我懒&#xff09;&#xff01;在这个过程中我对Yolov5有了更深刻的理解&#xff0c;在原有的Yolov5框架上增…

14.4、SpringWebFlux-2

14.4、SpringWebFlux-2 14.4.3、SpringWebFlux执行流程和核心 API SpringWebFlux 基于 Reactor&#xff0c;默认容器是 Netty&#xff0c;Netty 是高性能的 NIO 框架&#xff0c;异步非阻塞&#xff08;AIO&#xff0c;是 NIO 的升级&#xff09;的框架 14.4.3.1、执行流程 …

jrtplib开源库系列之三:jrtplib发送接收数据流程

说明 前面2篇文章主要说明了如何安装jrtplib库&#xff0c;以及对example1进行了说明&#xff0c;这篇文章主要说下jrtplib库数据的收发流程。 数据收发流程 从例子1就可以很好的说明jrtplib的使用是非常简单的&#xff0c;主要分为以下几步 1. 设置会话参数(比如时间戳&am…

同花顺_代码解析_技术指标_C

本文通过对同花顺中现成代码进行解析&#xff0c;用以了解同花顺相关策略设计的思想 CBJX 成本均线 成本价均线不同于一般移动平均线系统&#xff0c;成本价均线系统首次将成交量引入均线系统&#xff0c;充分提高均线系统的可靠性。成本均线不容易造成虚假信号或骗线&#xf…

牛客网项目-开发注册功能

前言 本文是对牛客网项目的总结&#xff0c;本文主要讲解页面注册逻辑 当我们点击首页的注册按钮时&#xff0c;会跳转到注册页面&#xff0c;然后再祖册页面提交账号&#xff0c;密码邮箱后会跳转到首页或者直接登录页面进行登录&#xff0c;这个操作可以自己设定 【设计逻辑…

SAP ABAP BAPI_SALESORDER_CREATEFROMDAT2 成本中心 kostl

BAPI_SALESORDER_CREATEFROMDAT2提供参数无成本中心字段&#xff0c;所以需要用扩展字段实现。 BAPE_VBAK&#xff1a; BAPE_VBAKX VBAKKOZ VBAKKOZX 封装扩展结构&#xff1a; DATA: LS_EXTENSION TYPE BAPIPAREX, LT_EXTENSION TYPE TABLE OF BAPIPAREX. DATA: LS_B…

目标检测论文解读复现之十一:基于特征融合与注意力的遥感图像小目标检测

前言 此前出了目标改进算法专栏&#xff0c;但是对于应用于什么场景&#xff0c;需要什么改进方法对应与自己的应用场景有效果&#xff0c;并且多少改进点能发什么水平的文章&#xff0c;为解决大家的困惑&#xff0c;此系列文章旨在给大家解读最新目标检测算法论文&#xff0c…

【MySQL】5.触发器

文章目录1. 触发器概述2. 触发器的相关语法3. 触发的NEW与OLD4. 总结1. 触发器概述 触发器&#xff0c;就是一种特殊的存储过程。触发器和存储过程一样是一个能够完成特定功能、存储在数据库服务器上的SQL片段&#xff0c;但是触发器无需调用&#xff0c;当对数据库表中的数据…

python批量读取nc气象数据并转为tif

python批量nc数据转tif 各类地理数据中&#xff0c;NC格式是很常见的&#xff0c;然而这种格式ArcGIS是无法打开的。一旦下载的话nc也是多时序的&#xff08;多年、多月等等&#xff09;&#xff0c;让我们看看如何批量操作吧。 直接上代码&#xff1a; import numpy as np …

[附源码]Python计算机毕业设计本科生外出请假管理信息系统

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…

数据结构和算法

1.数据结构 食谱和算法之间最大的区别就在于算法是严密的。食谱上经常会有描述得比较模糊的部分&#xff0c; 而算法的步骤都是用数学方式来描述的&#xff0c;所以十分明确。 算法和程序有些相似&#xff0c;区别在于程序是以计算机能够理解的编程语言编写而成的&#xff0c;…

构造函数详解

构造函数详解1.构造函数的概念与特性2.默认构造函数&#xff08;1&#xff09;概念&#xff08;2&#xff09;分类&#xff08;3&#xff09;工作原理3.初始化列表&#xff08;1&#xff09;定义&#xff08;2&#xff09;为什么使用初始化列表&#xff08;3&#xff09;必须使…

WebRTC系列<五>我与一位大佬的聊天记录

原本打算想用webrtc部署虚幻项目。后来在了解虚幻过程中&#xff0c;得知虚幻有像素流插件&#xff0c;导出项目里带有STUN和TURN服务&#xff0c;但是在webGL项目里比如three.js、babylon.js如果也能部署在服务器端&#xff0c;那就厉害了&#xff0c;也很有想象力空间。 基本…

表白墙网站练习【前端+后端+数据库】

表白墙网站练习【前端后端数据库】 开发该表白墙&#xff08;简单网站&#xff09;的基本步骤&#xff1a; 1.约定前后端交互接口 2.开发服务器代码 编写Servlet能够处理前端发来的请求编写数据库代码&#xff0c;来获取/存储关键数据 3.开发客户端代码 基于ajax能够构造请…