前端常用的三种加密方式(MD5、base64、sha.js)

news2024/9/29 11:34:22

作为一名优秀的前端开发工程狮,保障用户的信息安全、密码义不容辞,废话不多说,由我来介绍三种日常开发中经常用到的加密方式。

一、MD5加密

介绍: MD5中文含义为信息-摘要算法5,就是一种信息摘要加密算法,可以将数据转译为另一固定长度值

特点:

  • 压缩性:任意长度的数据,算出的MD5值长度都是固定的。
  • 容易计算:从原数据计算出MD5值很容易。
  • 抗修改性:对原数据进行任何改动,哪怕只修改1个字节,所得到的MD5值都有很大区别。
  • 强抗碰撞:已知原数据和其MD5值,想找到一个具有相同MD5值的数据(即伪造数据)是非常困难的。

使用方式:通过项目中引入MD5.js包

import MD5 from 'MD5'

function Md5() {
  return (
    <>
      <h1>MD5加密</h1>
      <h3>加密前:18888888888 加密后:{MD5(18888888888)}</h3>
      <h3>加密前:大大大大奔 加密后:{MD5('大大大大奔')}</h3>
    </>
  )
}

export default Md5

 页面展示效果:

二、base64加密

介绍:base64是一种加密算法,有着广泛的应用和支持,但却是当今最弱的编码标准之一。它主要是对明文转换后的二进制序列做处理,使之变为不能被人直接识别的形式。
特点:

  • 使用最广泛
  • 简单易上手
  • 可以将图片转译存储
  • 编码之后的结果,只有64个字符 az AZ 0~9 / + 再加上一个辅助字符 =

使用方式:直接调用btoa方法转换成base64方法,使用atob方法可解码

function Base64() {
  return (
    <>
      <h3>MD5加密</h3>
      <br></br>
      {/* btoa用于加密,atob用于解密 */}
      <h3>加密前:18888888888 加密后:{window.btoa(18888888888)}</h3>
      <h3>解码后:{window.atob(window.btoa(18888888888))}</h3>
    </>
  )
}
export default Base64

页面展示效果:

 

三、sha.js加密

介绍: 项目中经常会用的方式,使用起来简单方便
使用方式: 项目中直接引入sha.js包

import { sha256 } from 'js-sha256'
function Sha() {
  return (
    <>
      <h3>sha.js加密</h3>
      <br></br>
      <h3>加密前:18888888888 加密后:{sha256('18888888888')}</h3>
    </>
  )
}

export default Sha

 页面展示效果:

 

 

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

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

相关文章

【数据分享】2013-2023年全国370多个城市逐日空气质量数据(Excel格式/无需转发)

空气质量的好坏反映了空气污染程度&#xff0c;它是依据空气中污染物浓度的高低来判断的。在各项涉及城市环境的研究与实际项目中&#xff0c;城市空气质量都是一个十分重要的指标。那么&#xff0c;去哪里能获取到各城市空气质量的历史数据呢&#xff1f; 之前我们分享了2014…

python连接PostgreSQL 数据库

执行如下命令安装 pip3 install psycopg2 python代码 Author: tkhywang 2810248865qq.com Date: 2023-08-21 11:42:17 LastEditors: tkhywang 2810248865qq.com LastEditTime: 2023-08-21 11:51:56 FilePath: \PythonProject02\PostgreSQL 数据库.py Description: 这是默认设置…

linux系统启动redis

首先进入redis目录 cd /usr/local/redis/redis-7.0.8 输入ll 查看一下 &#xff0c;然后再进入src 目录&#xff0c;找到redis.service文件 输入 ./redis.service 就可以启动了&#xff0c;效果如下图

Mysql系列 - 第1天:mysql基础知识

这是mysql系列第1篇。 本文主要内容 背景介绍 数据库基础知识介绍 mysql的安装 mysql常用的一些命令介绍 SQL分类 背景介绍 我们每天都在访问各种网站、APP&#xff0c;如微信、QQ、抖音、今日头条、腾讯新闻等&#xff0c;这些东西上面都存在大量的信息&#xff0c;这…

小型双轮差速底盘实现悬崖巡检功能

1. 功能说明 本文示例将实现R023样机小型双轮差速底盘悬崖巡检的功能。在小型双轮差速底盘上安装一个检测装置&#xff0c;它可以由1个 近红外传感器 和1个 灰度传感器 组成。近红外传感器可以识别桌面&#xff0c;灰度传感器可以识别“悬崖”&#xff0c;让机器人沿着“悬崖”…

如何快速搭建基于高频数据的因子平台

在因子投研和生产过程中&#xff0c;往往需要基于大量因子进一步加工有状态的复杂指标&#xff0c;比如计算实时 K 线和 MACD、RSI 等。 假设要计算1000个因子&#xff0c;每个因子实现逻辑各不相同&#xff0c;并有特定的如窗口关闭信号、计算窗口边界等配置&#xff0c;重复…

QCustomPlot横坐标为毫秒级的时间轴数据展示的实时刷新数据功能

头文件 #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QTimer>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent nullptr);~Widget();int realtime…

单键电容触摸键IC原厂技术支持低功耗触摸芯片VKD223B资料

VKD223B是单键电容触摸键IC&#xff0c;提供直接模式和触发模式两种输出方式&#xff0c;具有低功耗和宽工作电压的特点&#xff0c;是目前应用量最大的触摸芯片型号。&#xff08;由于收到原厂通知&#xff0c;此料已逐渐停产&#xff0c;现有新产品进行替代&#xff0c;性能更…

Mybatis入门和环境搭建

文章目录 一. Mybatis的简介1. 什么是ORM?2. 什么是持久层&#xff1f;3. Mybatis的作用 二. Mybatis环境搭建1. 搭建一个数据库2. 创建maven项目并导入相关依赖3. Mybatis相关插件安装4. Mybatis.cfg.xml核心配置文件 三. 基于ssm逆向工程的使用1. 配置generatorConfig.xml2.…

HICP学习--VLAN实验

一、实验拓扑 二、实验要求 1、PC1/3的接口均为access模式,且属于vlan2 ,在同一网段 2、PC2/4/5/6的IP地址在同一-网段,与PC1/3不在同一网段 3、PC2可以访问4/5/6 , PC4不能访问5/6 , PC5不能访问PC6 4、所有PC通过DHCP获取ip地址, PC1/3可以访问PC2/4/5/6 三、实验步骤 首先…

pytorch 入门1-tensor 广播 view reshape

tensor 的四则运算broadcast import torch import numpy as np # 张量tensor 随机初始化 x torch.rand(4,3) print(x) y torch.randn(4,3) print(y)# 初始化全零 张量 a torch.zeros((4,4),dtypetorch.long) print(a) #初始化全一 张量 b torch.ones(4,4) print(b) c tor…

汇川PLC单位换算及电子齿轮比

本文以汇川H5U为例进行说明轴控的单位换算&#xff0c;经过改进后&#xff0c;H5U的设置界面更加合理及容易理解&#xff0c;汇川中型PLC-AM400/AM600系列的设置与此类似&#xff0c;界面也相同。 H5U支持本地轴控&#xff08;发脉冲&#xff09;和EtherCAT轴控&#xff0c;轴…

途乐证券|增持回购队伍扩容 上市公司传递信心暖流

一场“活泼资本市场&#xff0c;提振投资者决心”的举动正在紧锣密鼓地进行&#xff0c;一批上市公司斥真金白银参加增持回购部队。 8月18日&#xff0c;中国证监会有关负责人就贯彻落实“要活泼资本市场&#xff0c;提振投资者决心”情况承受媒体采访时说到&#xff0c;鼓舞有…

【Vue】vue2项目使用swiper轮播图2023年8月21日实战保姆级教程

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、npm 下载swiper二、使用步骤1.引入库声明变量2.编写页面3.执行js 总结 前言 swiper轮播图官网 参考文章&#xff0c;最好先看完他的介绍&#xff0c;再看…

【Spring框架】Spring事务的介绍与使用方法

⚠️ 再提醒一次&#xff1a;Spring 本身并不实现事务&#xff0c;Spring事务 的本质还是底层数据库对事务的支持。你的程序是否支持事务首先取决于数据库 &#xff0c;比如使用 MySQL 的话&#xff0c;如果你选择的是 innodb 引擎&#xff0c;那么恭喜你&#xff0c;是可以支持…

3分钟掌握实时目标检测:使用 OpenCV 和 YOLOv3 的手把手教程

实时目标检测&#xff1a;使用 OpenCV 和 YOLOv3 在这篇博客文章中&#xff0c;我们将探讨如何使用 OpenCV 和 YOLOv3 进行实时目标检测。我们将从头到尾演示整个过程&#xff0c;包括加载模型、处理图像和识别对象。 需要的库和工具 首先&#xff0c;我们需要导入以下库&am…

Jmeter 接口测试总结

背景介绍 对于 Android 项目来说&#xff0c;使用的是 Java 开发&#xff0c;网络请求接口的数量庞大且复杂&#xff0c;测试人员无法很直观的判断、得出网络请求是否存在问题。另一方面&#xff0c;为了验证请求接口是否能够在大负荷条件下&#xff0c;长时间、稳定、正常的运…

14. 实现业务功能--帖子列表

1. 版块帖子列表 对应版块中显示的帖子列表以发布时间降序排列&#xff08;desc&#xff09;不传入版块 Id 返回所有帖子 2. 实现逻辑 用户点击某个版块或首页时&#xff0c;将版块 Id 做为参数向服务器发送请求 服务器接收请求&#xff0c;并获取版块 Id&#xff0c;查询对…

多领域模型效果测试指南

在我最近的写作创作实践中&#xff0c;我尝试了使用不同的模型来测试它们的效果。通过这些测试&#xff0c;我发现每个模型在不同任务上的表现和适用性都有所不同。 首先&#xff0c;对于写作创作领域&#xff0c;我发现生成式模型可以很好地生成创意性的文章和故事。当我使用…

STM32都学什么

一、什么是STM32? 对于STM32&#xff0c;从字面意思上来理解&#xff0c;ST是意法半导体&#xff0c;M是Microelectronics的缩写&#xff0c;其中32表示的是32位&#xff0c;那么整合起来理解就是&#xff1a;STM32就是指的ST公司开发的32位微控制器。在如今的32位控制器中&am…