html前端的几种加密/解密方式
HTML前端的加密解密方式有以下几种:
一、base64加密
-
Base64编码:Base64是一种将二进制数据转换为可打印字符的编码方式。在前端,可以使用JavaScript的btoa()函数进行Base64编码,使用atob()函数进行解码。
var str = "hello";
var str64 = window.btoa("hello");
console.log("定义的字符串为:"+str);
console.log("通过base64编码后为:"+str64);
console.log("由base64解码后为:"+window.atob(str64));
二、MD5加密(不可逆)
-
MD5散列:MD5是一种广泛使用的散列算法,可以将输入转换为固定长度的散列值。在前端,可以使用JavaScript的CryptoJS库来进行MD5散列,例如使用md5()函数。
-
html使用md5加密
// 引入md5和jquery <script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.18.0/js/md5.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>// 函数加密 <script>let mq = '741130687291314520'let pwd = md5(mq);console.log('加密前的字符串', mq) // 加密前的字符串 741130687291314520console.log('加密后的字符串', pwd) // 加密后的字符串 8a39c2287dc743a44b2483d504acb0c3 </script>
-
MD5作为插件
MD5.js是通过前台js加密的方式对用户信息,密码等私密信息进行加密处理的工具,也可称为插件。MD5共有6种加密方法:
- hex_md5(value)
- b64_md5(value)
- str_md5(value)
- hex_hmac_md5(key, data)
- b64_hmac_md5(key, data)
- str_hmac_md5(key, data)
下载好了用script 标签引入使用
var code = "123456";
var username = "123456";
var message = "123456";
var str1 = hex_md5("123456");
var str2 = b64_md5("123456");
var str3 = str_md5("123456");
var str4 = hex_hmac_md5(code,code);
var str5 = b64_hmac_md5(username,username);
var str6 = str_hmac_md5(message ,message );
console.log(str1); // e10adc3949ba59abbe56e057f20f883e
console.log(str2); // 4QrcOUm6Wau+VuBX8g+IPg
console.log(str3); // áÜ9IºY«¾VàWò��>
console.log(str4); // 30ce71a73bdd908c3955a90e8f7429ef
console.log(str5); // MM5xpzvdkIw5VakOj3Qp7w
console.log(str6); // 0Îq§;Ý��9U©��t)ï
三、编码和解码字符串
使用JS函数的escape()和unescape(),分别是编码和解码字符串
var escape1 =escape("我的名字是:mosquito~");//编码
console.log(escape1);
var unescape1 = unescape(escape1); //解码
console.log(unescape1);
四、AES/DES加密解密
1. AES加密:
AES(Advanced Encryption Standard)是一种对称加密算法,可以将数据进行加密,并使用相同的密钥进行解密。在前端,可以使用JavaScript的CryptoJS库来进行AES加密解密,例如使用AES.encrypt()和AES.decrypt()函数。
2. RSA加密:
RSA是一种非对称加密算法,可以使用公钥对数据进行加密,然后使用私钥进行解密。在前端,可以使用JavaScript的CryptoJS库结合其他库(如RSAKey)来进行RSA加密解密。
下载crypto-js.js 引入使用
// 引入库
<script src="https://cdn.bootcss.com/crypto-js/3.1.9-1/crypto-js.min.js"></script>// 使用
<script>var aseKey = "12345678" //秘钥必须为:8/16/32位var message = "741130687291314520";//加密var encrypt = CryptoJS.AES.encrypt(message, CryptoJS.enc.Utf8.parse(aseKey), {mode: CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7}).toString();console.log('加密',encrypt); //VKrZlqykem73x8/T2oCfCQ==//解密var decrypt = CryptoJS.AES.decrypt(encrypt, CryptoJS.enc.Utf8.parse(aseKey), {mode: CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7}).toString(CryptoJS.enc.Utf8);console.log('解密',decrypt); //80018000142//【注】:加密的时候必须转成字符串 使用toString。 解密的时候 必须使用utf8的格式</script>
这些加密解密方式在前端通常用于保护敏感数据,如用户密码、用户身份验证等。需要注意的是,前端加密解密只能提供一定程度上的安全性,真正的安全仍然依赖于后端的处理和保护。
相关文章:
html前端的几种加密/解密方式
HTML前端的加密解密方式有以下几种: 一、base64加密 Base64编码:Base64是一种将二进制数据转换为可打印字符的编码方式。在前端,可以使用JavaScript的btoa()函数进行Base64编码,使用atob()函数进行解码。 var str "hello…...
算法学习01:排序二分
算法学习01:排序&&二分 文章目录 算法学习01:排序&&二分前言需要记忆的模版:快速排序归并排序:整数二分:浮点数二分 一、排序1.快速排序2.归并排序: 二、二分1.整数2.浮点数 总结 前言 需要…...
OpenAI (ChatGPT)中国免费试用地址
GitHub - click33/chatgpt---mirror-station-summary: 汇总所有 chatgpt 镜像站,免费、付费、多模态、国内外大模型汇总等等 持续更新中…… 个人能力有限,搜集到的不多,求大家多多贡献啊!众人拾柴火焰高!汇总所有 cha…...
IOS面试题object-c 11-20
11、解释self [super init]方法? 容错处理, 当父类初始化失败,会返回一个nil, 表示初始化失败。 由于继承的关系, 子类是需要拥有父类的实例和行为, 因此, 我们必须先初始化父类,然后再初始化子类 12、简述使用block有什么优点?代码紧凑,传值…...
北斗导航 | 十四种抗差稳健估计(抗差M估计)方法(算法公式)
===================================================== github:https://github.com/MichaelBeechan CSDN:https://blog.csdn.net/u011344545 ===================================================== 稳健估计(M估计) 1、Huber法2、残差绝对和最小法3、L1-L2法...
【JavaEE】_Spring MVC项目使用数组与集合传参
目录 1. 使用数组传参 1.2 传递单个参数 1.3 传递多个名称相同的参数 1.3.1 关于urlencode 2. 使用集合传参 1. 使用数组传参 创建一个Spring MVC项目,其中 .java文件内容如下: package com.example.demo.controller;import com.example.demo.Per…...
Centos 9 安装 k8s
为了尽可能契合生产环境的部署情况,这里用kubeadm安装集群,同时方便跟随笔记一步步实践的过程,也更加了解k8s的一些特性和基础知识。 先决条件 这里将通过虚拟机安装3台centos stream 9服务器,并组成kubeneters集群(…...
WiFi模块助力少儿编程:创新学习与实践体验
随着科技的飞速发展,少儿编程已经成为培养孩子们创造力和问题解决能力的重要途径之一。在这个过程中,WiFi模块的应用为少儿编程领域注入了新的活力,使得学习编程不再是单一的代码教学,而是一个充满创新与实践的综合性体验。 物联网…...
最新:Selenium操作已经打开的Chrome(免登录)
最近重新尝试了一下,之前写的博客内容。重新捋了一下思路。 目的就是,selenium在需要登录的网站面前,可能就显得有些乏力,因此是不是有一种东西,可以操作它打开我们之前打开过的网站,这样就不用登录了。 …...
三色标记过程
可达性分析 GC过程中需要对对象图遍历做可达性分析。使用了三色标记法进行分析。 什么三色? 白色:尚未访问过。 黑色:本对象已访问过,而且本对象 引用到 的其他对象 也全部访问过了。 灰色:本对象已访问过࿰…...
记录汇川:IO隔离编程
IO隔离:方便程序修改 无论是输入点坏了还是输出点坏了,或者人为接错线,或者对调点,我们只需要更改IO隔离得输入输出就可以了。方便。 停止按钮外接常闭,里面也使用常闭,为了断线检测功能(安全)ÿ…...
【Docker】容器的生态系统
Docker提供了一整套技术支持,包括核心技术、平台技术、支持技术。 核心技术 容器核心技术是指能让Container(容器)在host(集群、主机)上运行起来的那些技术。 1)容器规范:OCI(runt…...
AVL树讲解
AVL树 1. 概念2. AVL节点的定义3. AVL树插入3.1 旋转 4.AVL树的验证 1. 概念 AVL树是一种自平衡二叉搜索树。它的每个节点的左子树和右子树的高度差(平衡因子,我们这里按右子树高度减左子树高度)的绝对值不超过1。AVL的左子树和右子树都是AV…...
20240308-1-校招前端面试常见问题CSS
校招前端面试常见问题【3】——CSS 1、盒模型 Q:请简述一下 CSS 盒模型? W3C 模式:盒子宽widthpaddingbordermargin 怪异模式:盒子宽widthmargin Q:inline、block、inline-block 元素的区别? inline&am…...
linux系统简述docker
简述docker docker理念docker三要素docker平台架构docker运行的基本流程 docker理念 一次镜像,处处运行 基于go语言实现的项目 解决了运行环境和配置问题的软件容器,方便做持续集成并有助于整体发布的容器虚拟化技术 能够使硬件、操作系统和应用程序三者…...
【论文阅读】Mamba:选择状态空间模型的线性时间序列建模(一)
文章目录 Mamba:选择状态空间模型的线性时间序列建模介绍状态序列模型选择性状态空间模型动机:选择作为一种压缩手段用选择性提升SSM 选择性SSM的高效实现先前模型的动机选择扫描总览:硬件感知状态扩展 Mamba论文 Mamba:选择状态空间模型的线性时间序列建…...
漏洞复现-蓝凌LandrayOA系列
蓝凌OA系列 🔪 是否利用过 优先级从高到低 发现日期从近到远 公司团队名_产品名_大版本号_特定小版本号_接口文件名_漏洞类型发现日期.载荷格式LandrayOA_Custom_SSRF_JNDI漏洞 LandrayOA_sysSearchMain_Rce漏洞 LandrayOA_Custom_FileRead漏洞...
计算机网络 路由算法
路由选择协议的核心是路由算法,即需要何种算法来获得路由表中的各个项目。 路由算法的目的很明显,给定一组路由器以及连接路由器的链路,路由算法需要找到一条从源路由器到目的路由器的最佳路径,通常,最佳路径是由最低…...
【C++ 学习】构造函数详解!!!
1. 类的6个默认成员函数的引入 ① 如果一个类中什么成员都没有,简称为空类。 ② 空类中真的什么都没有吗?并不是,任何类在什么都不写时,编译器会自动生成以下6个默认成员函数。 ③ 默认成员函数:用户没有显式实现&…...
【LeetCode】72. 编辑距离(中等)——代码随想录算法训练营Day55
题目链接:72. 编辑距离 题目描述 给你两个单词 word1 和 word2, 请返回将 word1 转换成 word2 所使用的最少操作数 。 你可以对一个单词进行如下三种操作: 插入一个字符删除一个字符替换一个字符 示例 1: 输入:w…...
XML Group端口详解
在XML数据映射过程中,经常需要对数据进行分组聚合操作。例如,当处理包含多个物料明细的XML文件时,可能需要将相同物料号的明细归为一组,或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码,增加了开…...
Go 语言接口详解
Go 语言接口详解 核心概念 接口定义 在 Go 语言中,接口是一种抽象类型,它定义了一组方法的集合: // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的: // 矩形结构体…...
1.3 VSCode安装与环境配置
进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件,然后打开终端,进入下载文件夹,键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...
Redis:现代应用开发的高效内存数据存储利器
一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发,其初衷是为了满足他自己的一个项目需求,即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源,Redis凭借其简单易用、…...
Windows安装Miniconda
一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...
消防一体化安全管控平台:构建消防“一张图”和APP统一管理
在城市的某个角落,一场突如其来的火灾打破了平静。熊熊烈火迅速蔓延,滚滚浓烟弥漫开来,周围群众的生命财产安全受到严重威胁。就在这千钧一发之际,消防救援队伍迅速行动,而豪越科技消防一体化安全管控平台构建的消防“…...
何谓AI编程【02】AI编程官网以优雅草星云智控为例建设实践-完善顶部-建立各项子页-调整排版-优雅草卓伊凡
何谓AI编程【02】AI编程官网以优雅草星云智控为例建设实践-完善顶部-建立各项子页-调整排版-优雅草卓伊凡 背景 我们以建设星云智控官网来做AI编程实践,很多人以为AI已经强大到不需要程序员了,其实不是,AI更加需要程序员,普通人…...
Python学习(8) ----- Python的类与对象
Python 中的类(Class)与对象(Object)是面向对象编程(OOP)的核心。我们可以通过“类是模板,对象是实例”来理解它们的关系。 🧱 一句话理解: 类就像“图纸”,对…...
Android屏幕刷新率与FPS(Frames Per Second) 120hz
Android屏幕刷新率与FPS(Frames Per Second) 120hz 屏幕刷新率是屏幕每秒钟刷新显示内容的次数,单位是赫兹(Hz)。 60Hz 屏幕:每秒刷新 60 次,每次刷新间隔约 16.67ms 90Hz 屏幕:每秒刷新 90 次,…...
精益数据分析(98/126):电商转化率优化与网站性能的底层逻辑
精益数据分析(98/126):电商转化率优化与网站性能的底层逻辑 在电子商务领域,转化率与网站性能是决定商业成败的核心指标。今天,我们将深入解析不同类型电商平台的转化率基准,探讨页面加载速度对用户行为的…...
