当前位置: 首页 > news >正文

前端加密与解密的几种方式

1.base64加密方式

1. base64是什么?

Base64,顾名思义,就是包括小写字母a-z、大写字母A-Z、数字0-9、符号"+"、"/"一共64个字符的字符集,(另加一个“=”,实际是65个字符,至于为什么还会有一个“=",这个后面再说)。任何符号都可以转换成这个字符集中的字符,这个转换过程就叫做base64编码。

 2.示例

<script>
        let str = 'ImGod';
        let str64 = window.btoa(str);//Base64加密
        console.log('转化后:'+str64);
        let jm = window.atob(str64);//Base64解密
        console.log('解码后:'+jm);

</script>

结果:

2.MD5 加密方式(不可逆)

 1.什么是MD5

 MD5是一种被广泛使用的密码散列函数,可以产生出一个128位(16字节)的散列值(hash value),用于确保信息传输完整一致。MD5由美国密码学家罗纳德·李维斯特(Ronald Linn Rivest)设计,于1992年公开,用以取代MD4算法。

MD5.JS是通过前台js加密的方式对密码等私密信息进行加密的工具。

2.引入 

 <script src="https://cdn.bootcss.com/blueimp-md5/2.12.0/js/md5.min.js"></script>

4.示例

<script>

        // MD5加密方式

        // hex_md5(data);//data表示你要加密的数据

        let str = 'abc';

        let newStr = md5(str);

        console.log(newStr);

</script>

结果:

3.编码和解码字符串

1.什么是编码和解码字符串

这个主要是使用JS函数的escape()和unescape(),分别是编码和解码字符串。

escape采用ISO Latin字符集对指定的字符串进行编码。所有的空格符、标点符号、特殊字符以及其他非ASCII字符都将被转化成%xx格式的字符编码(xx等于该字符在字符集表里面的编码的16进制数字)

在很多脚本语言的应用当中,escape函数是一个可转换编码的函数,比如javascript 的 ajax 中,向a.php传递参数?city=北京,可先将"北京"用escape重新编码,再进行传递,在服务器端接收后再解码才不会出现乱码。escape一般用于传递URL参数和类似urlencode base64_encode函数是类似的。

2 .示例

<script>

        //编码和解码字符串

        let str = '在山的那边';

        let str1 = escape(str);

        let str2 = unescape(str1)

        console.log('编码:'+str1);

        console.log('解码:'+str2);

    </script>

结果:

4.sha1.js (不可逆)

1. sha1是什么?

SHA-1是一种数加密算法,该算法的思想是接收一段明文,然后以一种不可逆的方式将它转换成一段(通常更小)密文,也可以简单的理解为取一串输入码(称为预映射或信息),并把它们转化为长度较短、位数固定的输出序列即散列值(也称为信息摘要或信息认证代码)的过程。

2. 引入

  <script src="https://cdn.bootcss.com/js-sha1/0.6.0/sha1.js"></script>

目前没有在网上没找到下载地址,只能在线引入。

3. 示例

<script>

        //sha1加密方式

        let str = 'abcd';

        let sha_1 = sha1(str);

        console.log(sha_1);

    </script>

结果:

相关文章:

前端加密与解密的几种方式

1.base64加密方式 1. base64是什么&#xff1f; Base64&#xff0c;顾名思义&#xff0c;就是包括小写字母a-z、大写字母A-Z、数字0-9、符号""、"/"一共64个字符的字符集&#xff0c;&#xff08;另加一个“”&#xff0c;实际是65个字符&#xff0c;至于…...

详解Spring Bean的生命周期

详解Spring Bean的生命周期 Spring Bean的生命周期包括以下阶段&#xff1a; 1. 实例化Bean 对于BeanFactory容器&#xff0c;当客户向容器请求一个尚未初始化的bean时&#xff0c;或初始化bean的时候需要注入另一个尚未初始化的依赖时&#xff0c;容器就会调用createBean进…...

详解Shell 脚本中 “$” 符号的多种用法

通常情况下&#xff0c;在工作中用的最多的有如下几项&#xff1a; $0&#xff1a;Shell 的命令本身 1到9&#xff1a;表示 Shell 的第几个参数 $? &#xff1a;显示最后命令的执行情况 $#&#xff1a;传递到脚本的参数个数 $$&#xff1a;脚本运行的当前进程 ID 号 $*&#…...

Redis如何实现Session存储

在Redis中实现Session存储,主要有两种方式:使用Spring Session和手动存储。 使用Spring Session:Spring Session是Spring框架提供的一个模块,用于简化Session管理,并将Session数据存储到外部数据存储中,如Redis。使用Spring Session,你只需要在Spring Boot项目中添加相应…...

安防视频监控汇聚EasyCVR平台接入Ehome告警,公网快照不显示的原因排查

智能视频监控汇聚平台TSINGSEE青犀视频EasyCVR可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等&#xff0c;视频监控管理平台…...

【Springboot】@ComponentScan 详解

文章目录 ComponentScanComponentScan ANNOTATION 和 REGEXComponentScan CUSTOMComponentScan ASSIGNABLE_TYPE ComponentScan ComponentScan 是 Spring 框架中的一个注解&#xff0c;用于自动扫描和注册容器中的组件。 使用 ComponentScan 注解可以告诉 Spring 在指定的包或…...

flask-----信号

安装&#xff1a; flask中的信号使用的是一个第三方插件&#xff0c;叫做blinker。通过pip list看一下&#xff0c;如果没有安装&#xff0c;通过以下命令即可安装blinker&#xff1a; pip install blinker flask其中有内置的信号 template_rendered _signals.signal(temp…...

10_Vue3 其它的组合式API(Composition API)

Vue3 中的其它组合式API 1.shallowReactive 与 shallowRef 2. readonly 与 shallowReadonly 3.toRaw 与 markRaw 4.customRef 5.provide 与 inject 6.响应式数据的判断...

COCOS项目运行的时候图片模糊的原因

1、首先。用X坐标来分析&#xff0c;如果size*Anchor Position有小数&#xff0c;如上图57*0.5667695.5。这样就会导致x模糊。如果y同样计算结果包含小数&#xff0c;那么y也会模糊。xy同时模糊的情况是最模糊的。 2、如果当前node没有问题&#xff0c;那么就要检查上级node是…...

Python中搭建IP代理池的妙招

在Python的爬虫世界里&#xff0c;你是否也想搭建一个功能强大的IP代理池&#xff0c;让你的爬虫无忧无虑地畅游各大网站&#xff1f;今天&#xff0c;我就来教你使用Scrapy框架搭建IP代理池&#xff0c;让你的爬虫更加智能、高效&#xff01;跟着我一步一步来&#xff0c;轻松…...

学习pytorch 2

学习pytorch 2 2. dataset实战代码数据集 2. dataset实战 B站小土堆视频 代码 from torch.utils.data import Dataset from PIL import Image #import cv2 import osclass MyData(Dataset):def __init__(self, root_dir, label_dir):self.root_dir root_dirself.label_dir …...

elementui动态表单实现计算属性携带参数,并将计算出的值四舍五入保留两位小数

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言方法1方法2结论 前言 写项目的时候&#xff0c;遇到需要在动态表单中&#xff0c;将同一级输入框输入的内容计算出来&#xff0c;并动态显示&#xff0c;发现c…...

嵌入式面试5 -makefile shell

2、 如果有一个简单的helloworld项目目录如下&#xff1a; tree helloworld helloworld |– file2.h |– file1.cpp |– file2.cpp 请编写一个Makefile文件。 答&#xff1a; TARGET helloworld CXX g COMPILE : $(COMPILE) file1.cpp COMPILE : $(COMPILE) file2.cpp OBJE…...

获40余家主机厂青睐,这家OTA「吸金王」完成超亿元B2轮融资!

继今年4月获得上汽集团旗下尚颀资本及其合作方山高投控的投资后&#xff0c;近日上海艾拉比智能科技有限公司&#xff08;以下简称“艾拉比”&#xff09;正式完成总额过亿元的B2轮融资&#xff0c;新的投资方为聚卓资本、老股东国科新能继续增持&#xff0c;势能资本持续担任独…...

CGI, FastCGI, WSGI, uWSGI, uwsgi分别是什么?

CGI 1、通用网关接口&#xff08;Common Gateway Interface/CGI&#xff09;,CGI描述了服务器&#xff08;nginx,apache&#xff09;和请求处理程序&#xff08;django,flask,springboot web框架&#xff09;之间传输数据的一种标准. 2.所有bs架构软件都是遵循CGI协议的 3.一…...

Android T 窗口层级相关的类(更新中)

窗口在App端是以PhoneWindow的形式存在&#xff0c;承载了一个Activity的View层级结构。这里我们探讨一下WMS端窗口的形式。 可以通过adb shell dumpsys activity containers 来看窗口显示的层级 窗口容器类 —— WindowContainer类 /*** Defines common functionality for c…...

【云原生】深入掌握k8s中Pod和生命周期

个人主页&#xff1a;征服bug-CSDN博客 kubernetes专栏&#xff1a;kubernetes_征服bug的博客-CSDN博客 目录 1 什么是 Pod 2 Pod 基本操作 3 Pod 运行多个容器 4 Pod 的 Labels(标签) 5 Pod 的生命周期 1 什么是 Pod 摘取官网: Pod | Kubernetes 1.1 简介 Pod 是可以在 …...

openKylin+KingbaseES+Nginx安装

openKylin开放麒麟开启ssh 一、查看ssh服务是否开启。 终端输入命令&#xff1a;sudo ps -e |grep ssh &#xff0c;只显示如下内容则证明未安装ssh服务。 2127 ? 00:00:00 ssh-agent若显示如下内容则证明ssh服务已开启。 1657 ? 00:00:00 ssh-agent 2349 ?…...

lc1.两数之和

暴力解法&#xff1a;两个for循环&#xff0c;寻找和为target的两个数的索引 时间复杂度&#xff1a;O(n2) 空间复杂度&#xff1a;O(1) 哈希表&#xff1a;遍历数组&#xff0c;将nums数组的数和索引分别存储在map的key和value中&#xff0c;一边遍历&#xff0c;一边寻找是…...

c# 初始化列表,并给列表里面所有的元素进行初始化

Enumerable.Repeat 方法是用于生成一个包含指定元素重复若干次的序列。它接受两个参数&#xff0c;第一个参数是要重复的元素&#xff0c;第二个参数是重复次数。 下面是 Enumerable.Repeat 方法的用法和示例&#xff1a; using System; using System.Collections.Generic; u…...

Element-Plus:popconfirm与tooltip一起使用不生效?

你们好&#xff0c;我是金金金。 场景 我正在使用Element-plus组件库当中的el-popconfirm和el-tooltip&#xff0c;产品要求是两个需要结合一起使用&#xff0c;也就是鼠标悬浮上去有提示文字&#xff0c;并且点击之后需要出现气泡确认框 代码 <el-popconfirm title"是…...

Vue 实例的数据对象详解

Vue 实例的数据对象详解 在 Vue 中,数据对象是响应式系统的核心,也是组件状态的载体。理解数据对象的原理和使用方式是成为 Vue 专家的关键一步。我将从多个维度深入剖析 Vue 实例的数据对象。 一、数据对象的定义方式 1. Options API 中的定义 在 Options API 中,使用 …...

可下载旧版app屏蔽更新的app市场

软件介绍 手机用久了&#xff0c;app越来越臃肿&#xff0c;老手机卡顿成常态。这里给大家推荐个改善老手机使用体验的方法&#xff0c;还能帮我们卸载不需要的app。 手机现状 如今的app不断更新&#xff0c;看似在优化&#xff0c;实则内存占用越来越大&#xff0c;对手机性…...

如何让非 TCP/IP 协议驱动屏蔽 IPv4/IPv6 和 ARP 报文?

——从硬件过滤到协议栈隔离的完整指南 引言 在现代网络开发中,许多场景需要定制化网络协议(如工业控制、高性能计算),此时需确保驱动仅处理特定协议,避免被标准协议(如 IPv4/IPv6/ARP)干扰。本文基于 Linux 内核驱动的实现,探讨如何通过硬件过滤、驱动层拦截和协议栈…...

【Ragflow】26.RagflowPlus(v0.4.0):完善解析逻辑/文档撰写模式全新升级

概述 在历经半个月的间歇性开发后&#xff0c;RagflowPlus再次迎来一轮升级&#xff0c;正式发布v0.4.0。 开源地址&#xff1a;https://github.com/zstar1003/ragflow-plus 更新方法 下载仓库最新代码&#xff1a; git clone https://github.com/zstar1003/ragflow-plus.…...

民锋视角下的资金流效率与账户行为建模

民锋视角下的资金流效率与账户行为建模 在当前复杂多变的金融环境中&#xff0c;资金流效率已成为衡量一家金融服务机构专业能力的重要指标。民锋在账户管理与资金调配的实战经验中&#xff0c;逐步建立起一套以资金流路径为核心的行为建模方法&#xff0c;用以评估客户行为、交…...

MTK-Android12-13 Camera2 设置默认视频画质功能实现

MTK-Android12-13 Camera2 设置默认视频画质功能实现 场景&#xff1a;部分客户使用自己的mipi相机安装到我们主板上&#xff0c;最大分辨率为1280720&#xff0c;但是视频画质默认的是640480。实际场景中&#xff0c;在默认视频分辨率情况下拍出来的视频比较模糊、预览也不清晰…...

vue3+el-table 利用插槽自定义数据样式

<el-table-column label"匹配度" prop"baseMatchingLevel"><template #default"scope"><div :style"{ color: scope.row.baseMatchingLevel > 0.8 ? #00B578 : #FA5151 }">{{ scope.row.baseMatchingLevel }}&l…...

BERT, GPT, Transformer之间的关系

1. Transformer 是什么&#xff1f;简单介绍 1.1 通俗理解 想象你是一个翻译员&#xff0c;要把一句话从中文翻译成英文。你需要同时看句子里的每个词&#xff0c;理解它们之间的关系。Transformer就像一个超级翻译助手&#xff0c;它用“自注意力机制”&#xff08;Attentio…...

Flask与Celery 项目应用(shared_task使用)

目录 1. 项目概述主要功能技术栈 2. 项目结构3. 环境设置创建虚拟环境并安装依赖主要依赖 4. 应用配置Flask应用初始化 (__init__.py)Celery应用初始化 (make_celery.py) 5. 定义Celery任务 (tasks.py)任务说明 6. 创建API端点 (views.py)API端点说明 7. 前端界面 (index.html)…...