前端常见的加密算法介绍

一、前言

在信息安全越来越受重视的今天,前端的各种加密也变得更加重要。通常跟服务器的交互中,为保障数据传输的安全性,避免被人抓包篡改数据,除了 https 的应用,还需要对传输数据进行加解密。

目前常见的加密算法可以分成三类

  • 对称加密算法:AES、...
  • 非对称加密算法:RSA、...
  • Hash 算法:MD5、...

二、对称加密算法

对称加密(也叫私钥加密)指加密和解密使用相同密钥的加密算法。它要求发送方和接收方在安全通信之前,商定一个密钥。对称算法的安全性依赖于密钥,泄漏密钥就意味着任何人都可以对他们发送或接收的消息解密,所以密钥的保密性对通信的安全性至关重要。

特点

  • 优点:算法公开、计算量小、加密速度快、加密效率高。
  • 缺点:在数据传送前,发送方和接收方必须商定好密钥,然后双方保存好密钥。如果一方的密钥被泄露,那么加密信息也就不安全了
  • 使用场景:本地数据加密、https 通信、网络传输等

AES

AES:高级加密标准(Advanced Encryption Standard)为最常见的对称加密算法(微信小程序加密传输就是用这个加密算法的)。

 

密钥:用来加密明文的密码。密钥为接收方与发送方协商产生,但不可以直接在网络上传输,否则会导致密钥泄漏,通常是通过非对称加密算法加密密钥,然后再通过网络传输给对方,或者直接面对面商量密钥。密钥是绝对不可以泄漏的,否则会被攻击者还原密文,窃取数据。

在项目中需要用到 AES 加密时,可以使用开源的 js 库:crypto-js

var CryptoJS = require('crypto-js');var data = { id: 1, text: 'Hello World' };// 加密生成密文
var ciphertext = CryptoJS.AES.encrypt(JSON.stringify(data), 'secret_key_123').toString();// 解密得到明文
var bytes = CryptoJS.AES.decrypt(ciphertext, 'secret_key_123');
var decryptedData = JSON.parse(bytes.toString(CryptoJS.enc.Utf8));

三、非对称加密算法

非对称加密算法需要两个密钥:公开密钥(publickey:简称公钥)和私有密钥(privatekey:简称私钥)。公钥与私钥是一对,如果用公钥对数据进行加密,只有用对应的私钥才能解密。因为加密和解密使用的是两个不同的密钥,所以这种算法叫作非对称加密算法。

特点

  • 优点:非对称加密与对称加密相比其安全性更好
  • 缺点:加密和解密花费时间长、速度慢,只适合对少量数据进行加密。
  • 使用场景:https 会话前期、CA 数字证书、信息加密、登录认证等

RSA

RSA 加密算法是非对称加密算法最常见的一种。RSA 是 1977 年由 Ron Rivest、Adi Shamir 和 Leonard Adleman 一起提出的。RSA 就是他们三人姓氏开头字母拼在一起组成的。

 

在项目中需要用到 RSA 加密时,可以使用开源的 js 库:jsencrypt

// 使用公钥加密
var publicKey = 'public_key_123';
var encrypt = new JSEncrypt();
encrypt.setPublicKey(publicKey);
var encrypted = encrypt.encrypt('Hello World');// 使用私钥解密
var privateKey = 'private_key_123';
var decrypt = new JSEncrypt();
decrypt.setPrivateKey(privateKey);
var uncrypted = decrypt.decrypt(encrypted);

四、Hash 算法

Hash,一般翻译做“散列”,也有直接音译为“哈希”的,就是把任意长度的输入(又叫做预映射, pre-image),通过散列算法,变换成固定长度的输出,该输出就是散列值。这种转换是一种压缩映射,也就是,散列值的空间通常远小于输入的空间,不同的输入可能会散列成相同的输出,而不可能从散列值来唯一的确定输入值。

简单的说就是一种将任意长度的消息压缩到某一固定长度的消息摘要的函数。

特点

  • 优点:不可逆、易计算、特征化
  • 缺点:可能存在散列冲突
  • 使用场景:文件或字符串一致性校验、数字签名、鉴权协议

MD5

MD5 是比较常见的 Hash 算法,对于 MD5 而言,有两个特性是很重要的,第一:明文数据经过散列以后的值是定长的;第二:是任意一段明文数据,经过散列以后,其结果必须永远是不变的。前者的意思是可能存在有两段明文散列以后得到相同的结果,后者的意思是如果我们散列特定的数据,得到的结果一定是相同的。

比如在登录时将密码进行 md5 加密再传输给服务器,服务器中的密码也是用 md5 加密后存储的,那么只要验证加密后的密文是否一致则可。

在项目中需要用到 MD5 加密时,可以使用开源的 js 库:JavaScript-MD5

var hash = md5('Hello World');
// b10a8db164e0754105b7a99be72e3fe5

五、Base64 编码

Base64 编码只是一种编码格式并不是加密算法,它可用于在 HTTP 环境下传递较长的标识信息。

特点

  • 可以将任意的二进制数据进行 Base64 编码
  • 数据加密之后,数据量会变大,变大 1/3 左右
  • 编码后有个非常显著的特点,末尾有个=号
  • 可进行反向解码
  • Base64 编码具有不可读性

现代浏览器都提供了 Base64 编码、解码方法,btoa() 和 atob()

var enc = window.btoa('Hello World');
// SGVsbG8gV29ybGQ=var str = window.atob(enc);
// Hello World

六、总结

在业务 http 请求中,AES 的密钥在前端随机生成,从服务器获取 RSA 的公钥,对 AES 的密钥进行非对称加密,把加密后的密钥在请求头中传给服务器,用 AES 对 body 进行加密。服务器收到请求头中的加密后的密钥,用 RSA 的密钥进行解密,得到明文的 AES 密钥,即可对 body 进行解密。md5 有校验字符串一致性的特性,为避免请求被拦截后篡改 body,可在发请求时,将 body 字符串进行一个 md5 加密后在请求头传输,服务器收到请求后,解密 body 后再 md5 与请求头的进行校验,可验证是否请求被篡改。

https://segmentfault.com/a/1190000022000598

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

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

相关文章

一时冲动:“通往瓦尔哈拉之路的冒险”

通过所有有关Java 9和Project Jigsaw的讨论,我们不应忽视Java的另一重大变化。 希望在第10版或第11版中, Valhalla项目能够实现并介绍价值类型和专业化。 那么这是怎么回事,项目进展如何,面临什么挑战? 几天前&#x…

小程序分包

一、小程序分包 微信文档写的够清楚了 使用分包 | 微信开放文档 (1)常规分包注意点: 每个分包只能引用主包和自己的资源 (2) 独立分包注意点:特别麻烦 懒得用了吧 独立分包中不能依赖主包和其他分包中的内容 …

解决Sublime Text3莫名的中文乱码问题

有好几回用Sublime Text3写着中英混杂的文字的时候,会突然就弹出警告说什么编码不行,然后点击确定后,原来的中文全都乱码了: 然后即使按ctrlz撤回也没用,重新打开也没用,用记事本的转换ansi、unicode等方式…

try catch finally的用法

1、不使用try...catch出现异常后,后面的代码都不会运行了 login() {console.log(b);console.log(hhhhhhhh);}, 2、使用了try...catch出现异常后,try...catch后的代码还会继续运行 login() {try{console.log(b);}catch (e){console.log(e);}console.log…

网站优化第一次网页加载的速度的办法与思路。

网站重新开发了一次,第一次部署到测试网络,访问速度很慢,差不多第一次加载得需要40秒,太慢了,这里简单总结一下。 当然,还有一些无用的.MAP文件都可以删除,图片可以在线压缩一下,代码…

我的Serverless实战——大前端趋势之Serverless从入门到天黑

导读:大厂都在做Serverless,他到底是什么东东呢?可能很多人都没有听说过,听说这个是大前端的一个趋势,最近两年比较火,如果你还没有听说过,那你就需要注意啦。今天孙叫兽带大家了解一下Serverle…

element ui upload上传文件成功后,清除默认的列表。

问题描述:每次提交之后,这个上传按钮会有默认的列表,其实刷新这个默认列表就没了。 清除标记位置的办法: 清除列表:(上传成功后,清空列表) 效果图:

处理网络请求qs、图片转base64的优劣

一、引入qs这个库,更好的处理网络请求传参。 qs.parse let url http://item.taobao.com/item.htm?a1&b2&c&dxxx&e; let data qs.parse(url.split(?)[1]);// data的结果是 {a: 1, b: 2, c: , d: xxx, e: }qs.stringify 二、图片文件转为base6…

花了一天的时间给粉丝做了一个小米官网(高仿)

身为前端程序员&#xff0c;经常会找几个官网试试手&#xff0c;哈哈&#xff0c;这次拿小米官网试试手吧。 目录 效果图&#xff1a; 项目结构 index.html index.css js 下载地址&#xff1a;点我下载 效果图&#xff1a; 项目结构 index.html <!DOCTYPE html> &l…

uniapp踩坑指南之坑多到写不完

1、sticky:到达指定位置时&#xff0c;就停留在那里不动了。当发现可以走时&#xff0c;立马就走了。 如果走不了就不会动了&#xff0c;就会一直在那里。 https://www.cnblogs.com/byeyear/p/11999334.html 设置了sticky定位的元素相对于第一个定位不为static的父级元素的位置…

小程序引入百度地图与uni.getLocation的使用

一、小程序引入百度地图 1、当你不需要引入整个地图展示&#xff0c;只需要引入某些功能的时候&#xff0c;可以直接调用服务端api。 2、访问百度地图的任何api都需要密钥。 流程&#xff1a; 3、在小程序端配置请求合法域名&#xff1a;https://api.map.baidu.com 4、直接使…

当年上大学时,编程老师让我们用html+CSS实现一个天猫官网

纯用htmlcss实现一个天猫首页还是挺考验基本功的&#xff0c;完全考验自己的CSS功底。 目录 效果图 项目结构 index.html 源码下载&#xff1a;点我下载 效果图 项目结构 主要由htmlcss组成。 index.html <!doctype html> <html lang"en"><head&g…

微服务实战系列之Dubbo(上)

前言 随着一年一度冬至的到来&#xff0c;2023的步伐也将远去。而博主的系列文章&#xff0c;也将从今天起&#xff0c;越来越聚焦如何构建微服务“内核”上。前序系列文章几乎囊括了微服务的方方面面&#xff0c;无论使用什么框架、组件或工具&#xff0c;皆可拿来用之。 那么…

多线程图解

关于多线程一直是我们学习iOS的一个重点&#xff0c;不仅是面试中经常被问到的问题&#xff0c;而且我们开发过程过程中经常会用到的技术&#xff0c;下面是一张关于多线程的图解&#xff0c;希望可以帮助大家学习多线程的开发。 转载于:https://www.cnblogs.com/lyy-5518/p/53…

spring作业_Spring和石英:多作业计划服务

spring作业作业调度对于应用程序来说是如此重要。 尤其是在大型项目中&#xff0c;处理大量工作可能是一个问题。 Spring和Quartz为解决该问题带来了巨大的好处。 本文展示了如何通过使用Spring和Quartz轻松地计划多个作业。 二手技术&#xff1a; JDK 1.6.0_21 春天3.1.1 石…

react常用知识点总结

1、什么是jsx JSX是JavaScript的扩展语法,这种<></>标签的写法就是 JSX。JSX 编写的组件通过预处理器 babel 解析后,再交给 React 库渲染到指定父容器下,形成最终html页面,供浏览器解析和显示。 JSX会被babel编译为&#xff1a;React.createElement()&#xff0c…

前端导入导出文件

一、导出 1、返回值是url&#xff1a;创建个a标签即可 printRecord(params).then((response) > {if (response.success) {let a document.createElement(a);//创建a标签//从新页面打开&#xff0c;下载的话不需要这个&#xff0c;打开一个图片需要从新页面打开a.setAttrib…

vue进阶

1、vue-cli 使用 在开发中&#xff0c;需要打包的东西不止是js、css、html。还有更多的东西要处理&#xff0c;这些插件和加载器如果我们一一去添加就会比较麻烦&#xff0c;vue官方提供了一个快速搭建vue项目的脚手架&#xff0c;使用它能快速的构建一个web工程模板。 官网&…

Diff 算法核心原理

什么是虚拟DOM 讲Diff算法前&#xff0c;我先给大家讲一讲什么是虚拟DOM吧。这有利于后面大家对Diff算法的理解加深。 虚拟DOM是一个对象&#xff0c;一个什么样的对象呢&#xff1f;一个用来表示真实DOM的对象&#xff0c;要记住这句话。我举个例子&#xff0c;请看以下真实…

python 列表 字典 读写文件:pickle模块的基本使用

建议大家使用cPickle&#xff0c;速度更快&#xff01;&#xff01;&#xff01; python数据持久存储&#xff1a;pickle模块的基本使用&#xff08;转载&#xff09; 作者: pzxbc出处: http://pzxbc.cnblogs.com/本文版权归作者和博客园共有&#xff0c;欢迎转载&#xff0c;但…