前端数据加密的几种方式

news2024/11/20 9:23:31

1.base64加密方式

1.1 base64是什么?

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

1.2 base64转码和解码

<script>

       let str = 'ImGod';

       let str64 = window.btoa(str);

       console.log('转化后:'+str64);

       let jm = window.atob(str64);

       console.log('解码后:'+jm);

    </script>

结果:

  

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

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

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

2.1使用方法

1.引入 

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

2.示例

<script>

        // MD5加密方式

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

        let str = 'abc';

        let newStr = md5(str);

        console.log(newStr);

    </script>

结果:

 

3.sha1.js (不可逆)

3.1 sha1是什么?

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

3.2 引入

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

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

3.3 示例

<script>

        //sha1加密方式

        let str = 'abcd';

        let sha_1 = sha1(str);

        console.log(sha_1);

    </script>

结果:

 

4.编码和解码字符串

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

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

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

 4.1 示例

 <script>

        //编码和解码字符串

        let str = '在山的那边';

        let str1 = escape(str);

        let str2 = unescape(str1)

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

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

    </script>

结果:

 

5. AES/DES加解密方式 

对称加密算法是应用较早的加密算法,技术成熟。在对称加密算法中,数据发信方将明文(原始数据)和加密密钥(mi yue)一起经过特殊加密算法处理后,使其变成复杂的加密密文发送出去。收信方收到密文后,若想解读原文,则需要使用加密用过的密钥及相同算法的逆算法对密文进行解密,才能使其恢复成可读明文。在对称加密算法中,使用的密钥只有一个,发收信双方都使用这个密钥对数据进行加密和解密,这就要求解密方事先必须知道加密密钥。

5.1 优缺点

 优点:算法公开、计算量小、加密速度快、加密效率高。

         缺点:

(1)交易双方都使用同样钥匙,安全性得不到保证。

(2)每对用户每次使用对称加密算法时,都需要使用其他人不知道的惟一钥匙,这会使得发收信双方所拥有的钥匙数量呈几何级数增长,密钥管理成为用户的负担。对称加密算法在分布式网络系统上使用较为困难,主要是因为密钥管理困难,使用成本较高。

5.2 示例

 <script type="text/javascript">

        var aseKey = "12345678" //秘钥必须为:8/16/32位

        var message = "13785624612";

        //加密

        var encrypt = CryptoJS.AES.encrypt(message, CryptoJS.enc.Utf8.parse(aseKey), {

            mode: CryptoJS.mode.ECB,

            padding: CryptoJS.pad.Pkcs7

        }).toString();

        console.log(encrypt);

        //解密

        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); //13785624612

    </script>

结果:

 

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

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

相关文章

Access-Control-Allow-Origin跨域解决及详细介绍

首先&#xff0c;跨域不是问题。是一种安全机制。 这是你在开发时、上线前就必须提前考虑到的安全问题并且采取合适的手段去避免这个问题带来的程序错误。不过通常情况下&#xff0c;前端开发的小伙伴们都非常坚信后端小伙伴的接口一定已经处理好了跨域这个需求。然而事实上许多…

JavaWeb 项目 --- 表白墙 和 在线相册

文章目录一. 案例: 表白墙 (使用模板引擎)1. 首先创建 maven 项目2. 创建好模板文件3. 使用数据库存储数据.创建一个类用于数据库连接4. 使用 监视器 来初始化 Thymeleaf5. 编写 Servlet 代码① 重写 doGet 方法② 重写 doPost 方法③ 实现 load 方法④ 实现 save 方法6. 注意事…

Vue中key的作用及原理

1. 先说结论 key在Vue是DOM对象的标识&#xff1b;进行列表展示时&#xff0c;默认key是index&#xff1b;如果数据只做展示使用&#xff0c;使用index作为key是没有任何问题的&#xff1b;如果使用index作为key&#xff0c;而后续操作会破坏顺序&#xff0c;一定会带来效率问…

vue3 antd table表格样式修改——使用rowClassName更改某行数据的样式

vue3 antd项目实战——修改ant design vue组件中table表格的默认样式&#xff08;二&#xff09;知识调用场景复现修改table表格的行样式一、rowClassName添加行样式二、表格的不可控操作写在最后知识调用 文章中可能会用到的知识链接vue3ant design vuets实战【ant-design-vu…

解决:在 VSCode 中如何设置默认的浏览器为Chrome或Firefox

1、问题描述&#xff1a; 在 VSCode 编辑器中&#xff0c;其一般默认打开的浏览器是 IE 浏览器&#xff0c;而我已经习惯使用 Chrome 浏览器&#xff0c;以及会遇到页面的调试等不同的问题&#xff0c;因此需要将 VSCode 的默认浏览器调整为 Chrome 浏览器&#xff1b; 2、操…

【web前端开发】超详细讲解CSS盒子模型

文章目录1.盒子模型介绍2.内容3.边框4.内边距5.⭐盒子大小计算6.⭐内减模式7.外边距外边距的合并外边距的塌陷行内元素的垂直外边距8.⭐清除默认样式9.⭐版心居中1.盒子模型介绍 所有HTML元素可以看作盒子,CSS盒模型本质上是一个盒子&#xff0c;封装周围的HTML元素&#xff0c…

使用Vue来完成项目中的首页导航+左侧菜单

目录 1. 准备工作 2. 动态树 2.1 在配置请求路径 2.2 使用动态数据构建导航菜单 2.2.1 通过接口获取数据 2.2.3 通过后台获取的数据构建菜单导航 2.3 点击菜单实现路由跳转 2.3.1 创建书本管理组件 2.3.2 配置路由 2.3.3 修改LeftAside组件 2.3.4 修改Main组件 3. …

8个不能错过的程序员必备网站,惊艳到我了!!!

程序员是一个需要不断学习的职业&#xff0c;不少朋友每天来逛CSDN、掘金等网站&#xff0c;但一直都抱着“收藏从未停止&#xff0c;学习从未开始”的态度&#xff0c;别骗自己了兄弟。在编程体系中&#xff0c;有很多不错的小工具&#xff0c;可以极大得提升我们的开发效率。…

前端技术:解决执行npm install提示 xxx packages are looking for funding run `npm fund` for details的问题 详述npm fund

目录复现问题分析问题npm fund的命令npm fund的由来npm fund与npm ls解决问题参看文献&#x1f610; 我的博客&#xff0c;不仅帮你解决此类问题&#xff0c;还会告诉如何去分析定位问题。 复现问题 今天执行如下命令时&#xff1a; npm install报出如下问题&#xff1a; 2…

cookie、localStorage和sessionStorage详解

目录 一、cookie 二、Web storage 1、localStorage 2、sessionStorage的使用 3、复杂数据类型储存 Web Storage带来的好处&#xff1a; 三、sessionStorage、localStorage和cookie的区别 一、cookie cookie是客户端与服务器端进行会话使用的一个能够在浏览器本地化存储…

vue引入elementUi后打开页面报错Uncaught TypeError: Cannot read properties of undefined(reading ‘prototype‘)

vue引入elementUi后打开页面报错 本人在用idea创建vue项目并引入elemenUi之后网页报错&#xff1a; Uncaught TypeError: Cannot read properties of undefined(reading ‘prototype’)。 百度了很多办法都说是因为在vue3中引入了elementUi&#xff0c;vue3.0之后是不支持el…

基于Java+Springmvc+vue+element员工信息管理系统详细设计

博主介绍&#xff1a;✌公司项目主程、全网粉丝10W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,CSDN博客之星TOP100、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业设计✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f345;…

React中实现插槽效果的方案

文章目录React实现插槽children实现插槽props实现插槽React实现插槽 在开发中&#xff0c;我们抽取了一个组件&#xff0c;但是为了让这个组件具备更强的通用性&#xff0c;我们不能将组件中的内容限制为固定的div、span等等这些元素。 我们应该让使用者可以决定某一块区域到…

项目部署,一点也不难!

目录 一、部署前准备 &#xff08;一&#xff09;前端多环境准备 &#xff08;二&#xff09;后端多环境准备 二、项目部署 &#xff08;一&#xff09;原始部署 1、前端部署 2、前端部署测试 3、后端部署 &#xff08;二&#xff09;宝塔 Linux 部署 1、前端部署 2…

前端面试八股文--Vue篇(持续更新)

一. Vue2 篇 1.MVC MVVM区别 首先呢这是两种模式 MVC指的是 modal&#xff0c;view&#xff0c; controller MVVM 指的是 modal &#xff0c;view&#xff0c; view modal mvc和mvvm区别是&#xff1a;1、处理业务的模式不同&#xff0c;MVC里&#xff0c;View是可以直接访…

在 Vue3 中使用 Vuex

本篇文章主要记录 Vue3 中使用 Vuex 的步骤和注意事项&#xff1a; 1、安装依赖库 npm install vuex --save-dev2、配置 Vuex 实例 对比 Vue2 和 Vue3 各自创建 Store 实例的区别&#xff1b; Vue2 是用 Vue.use(Vuex)注入 Vuex 插件&#xff0c;然后通过 new Vuex.Store(o…

真正有效解决vue addRoute动态添加路由后刷新页面白屏的靠谱方法及思路,切实可行!

PS&#xff1a;想直接看解决方法的可以跳过前面的废话阶段从后往前看~ 前情回顾&#xff1a;萌新最近从Vue2转战Vue3&#xff0c;一边自学一遍自己做点娱乐项目练练手&#xff0c;这次Vue3项目权限管理用到动态路由&#xff0c;由于以前一直用的addRoutes()方法已经被废弃&…

如何在Windows server 2012配置Web服务器

现在&#xff0c;我们浏览网页已经成为了一种常态&#xff0c;但是你知道网页是怎么运行的吗&#xff1f; 我们浏览网页&#xff0c;首先会打开浏览器&#xff0c;然后输入网页的地址&#xff08;当然这里现在已经可以不用我们自己输入地址了&#xff0c;一般现在就是直接搜索…

在vite里获取env环境变量

在vite里获取env环境变量.env环境配置文件在cli项目中我们可以是配置.env.[mode]文件来配置环境变量在cli项目中使用.env.[mode]在vite中使用.env文件.env环境配置文件 在项目中总会遇到一些默认的配置,需要我们配置到静态文件中方便我们去获取,这时候就可以用到这个.env环境变…

vue项目中使用vuedraggable

最近在学习一个可视化搭建的项目&#xff0c;里面用的拖拽就是draggable.js。看了几个中文的文档&#xff0c;有很多坑&#xff0c;可能是没有及时更新的原因。 VUe 建议去看vuedraggable的官方文档&#xff0c;只不过是英文的。官方文档&#xff1a;https://github.com/Sor…