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

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()函数。

  1. 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>

  2. 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前端的加密解密方式有以下几种&#xff1a; 一、base64加密 Base64编码&#xff1a;Base64是一种将二进制数据转换为可打印字符的编码方式。在前端&#xff0c;可以使用JavaScript的btoa()函数进行Base64编码&#xff0c;使用atob()函数进行解码。 var str "hello…...

算法学习01:排序二分

算法学习01&#xff1a;排序&&二分 文章目录 算法学习01&#xff1a;排序&&二分前言需要记忆的模版&#xff1a;快速排序归并排序&#xff1a;整数二分&#xff1a;浮点数二分 一、排序1.快速排序2.归并排序&#xff1a; 二、二分1.整数2.浮点数 总结 前言 需要…...

OpenAI (ChatGPT)中国免费试用地址

GitHub - click33/chatgpt---mirror-station-summary: 汇总所有 chatgpt 镜像站&#xff0c;免费、付费、多模态、国内外大模型汇总等等 持续更新中…… 个人能力有限&#xff0c;搜集到的不多&#xff0c;求大家多多贡献啊&#xff01;众人拾柴火焰高&#xff01;汇总所有 cha…...

IOS面试题object-c 11-20

11、解释self [super init]方法&#xff1f; 容错处理, 当父类初始化失败,会返回一个nil, 表示初始化失败。 由于继承的关系, 子类是需要拥有父类的实例和行为, 因此, 我们必须先初始化父类,然后再初始化子类 12、简述使用block有什么优点&#xff1f;代码紧凑&#xff0c;传值…...

北斗导航 | 十四种抗差稳健估计(抗差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项目&#xff0c;其中 .java文件内容如下&#xff1a; package com.example.demo.controller;import com.example.demo.Per…...

Centos 9 安装 k8s

为了尽可能契合生产环境的部署情况&#xff0c;这里用kubeadm安装集群&#xff0c;同时方便跟随笔记一步步实践的过程&#xff0c;也更加了解k8s的一些特性和基础知识。 先决条件 这里将通过虚拟机安装3台centos stream 9服务器&#xff0c;并组成kubeneters集群&#xff08;…...

WiFi模块助力少儿编程:创新学习与实践体验

随着科技的飞速发展&#xff0c;少儿编程已经成为培养孩子们创造力和问题解决能力的重要途径之一。在这个过程中&#xff0c;WiFi模块的应用为少儿编程领域注入了新的活力&#xff0c;使得学习编程不再是单一的代码教学&#xff0c;而是一个充满创新与实践的综合性体验。 物联网…...

最新:Selenium操作已经打开的Chrome(免登录)

最近重新尝试了一下&#xff0c;之前写的博客内容。重新捋了一下思路。 目的就是&#xff0c;selenium在需要登录的网站面前&#xff0c;可能就显得有些乏力&#xff0c;因此是不是有一种东西&#xff0c;可以操作它打开我们之前打开过的网站&#xff0c;这样就不用登录了。 …...

三色标记过程

可达性分析 GC过程中需要对对象图遍历做可达性分析。使用了三色标记法进行分析。 什么三色&#xff1f; 白色&#xff1a;尚未访问过。 黑色&#xff1a;本对象已访问过&#xff0c;而且本对象 引用到 的其他对象 也全部访问过了。 灰色&#xff1a;本对象已访问过&#xff0…...

记录汇川:IO隔离编程

IO隔离&#xff1a;方便程序修改 无论是输入点坏了还是输出点坏了&#xff0c;或者人为接错线&#xff0c;或者对调点&#xff0c;我们只需要更改IO隔离得输入输出就可以了。方便。 停止按钮外接常闭&#xff0c;里面也使用常闭&#xff0c;为了断线检测功能(安全)&#xff…...

【Docker】容器的生态系统

Docker提供了一整套技术支持&#xff0c;包括核心技术、平台技术、支持技术。 核心技术 容器核心技术是指能让Container&#xff08;容器&#xff09;在host&#xff08;集群、主机&#xff09;上运行起来的那些技术。 1&#xff09;容器规范&#xff1a;OCI&#xff08;runt…...

AVL树讲解

AVL树 1. 概念2. AVL节点的定义3. AVL树插入3.1 旋转 4.AVL树的验证 1. 概念 AVL树是一种自平衡二叉搜索树。它的每个节点的左子树和右子树的高度差&#xff08;平衡因子&#xff0c;我们这里按右子树高度减左子树高度&#xff09;的绝对值不超过1。AVL的左子树和右子树都是AV…...

20240308-1-校招前端面试常见问题CSS

校招前端面试常见问题【3】——CSS 1、盒模型 Q&#xff1a;请简述一下 CSS 盒模型&#xff1f; W3C 模式&#xff1a;盒子宽widthpaddingbordermargin 怪异模式&#xff1a;盒子宽widthmargin Q&#xff1a;inline、block、inline-block 元素的区别&#xff1f; inline&am…...

linux系统简述docker

简述docker docker理念docker三要素docker平台架构docker运行的基本流程 docker理念 一次镜像&#xff0c;处处运行 基于go语言实现的项目 解决了运行环境和配置问题的软件容器&#xff0c;方便做持续集成并有助于整体发布的容器虚拟化技术 能够使硬件、操作系统和应用程序三者…...

【论文阅读】Mamba:选择状态空间模型的线性时间序列建模(一)

文章目录 Mamba:选择状态空间模型的线性时间序列建模介绍状态序列模型选择性状态空间模型动机&#xff1a;选择作为一种压缩手段用选择性提升SSM 选择性SSM的高效实现先前模型的动机选择扫描总览&#xff1a;硬件感知状态扩展 Mamba论文 Mamba:选择状态空间模型的线性时间序列建…...

漏洞复现-蓝凌LandrayOA系列

蓝凌OA系列 &#x1f52a; 是否利用过 优先级从高到低 发现日期从近到远 公司团队名_产品名_大版本号_特定小版本号_接口文件名_漏洞类型发现日期.载荷格式LandrayOA_Custom_SSRF_JNDI漏洞 LandrayOA_sysSearchMain_Rce漏洞 LandrayOA_Custom_FileRead漏洞...

计算机网络 路由算法

路由选择协议的核心是路由算法&#xff0c;即需要何种算法来获得路由表中的各个项目。 路由算法的目的很明显&#xff0c;给定一组路由器以及连接路由器的链路&#xff0c;路由算法需要找到一条从源路由器到目的路由器的最佳路径&#xff0c;通常&#xff0c;最佳路径是由最低…...

【C++ 学习】构造函数详解!!!

1. 类的6个默认成员函数的引入 ① 如果一个类中什么成员都没有&#xff0c;简称为空类。 ② 空类中真的什么都没有吗&#xff1f;并不是&#xff0c;任何类在什么都不写时&#xff0c;编译器会自动生成以下6个默认成员函数。 ③ 默认成员函数&#xff1a;用户没有显式实现&…...

【LeetCode】72. 编辑距离(中等)——代码随想录算法训练营Day55

题目链接&#xff1a;72. 编辑距离 题目描述 给你两个单词 word1 和 word2&#xff0c; 请返回将 word1 转换成 word2 所使用的最少操作数 。 你可以对一个单词进行如下三种操作&#xff1a; 插入一个字符删除一个字符替换一个字符 示例 1&#xff1a; 输入&#xff1a;w…...

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

MPNet:旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义,在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容,其实不管是方块还是方块实体,都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器,用于动态创…...

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

Spring AI 入门:Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...