前端常见的加密算法介绍

一、背景

在信息安全越来越受重视的今天,前端的各种加密也变得更加重要。通常跟服务器的交互中,为保障数据传输的安全性,避免被人抓包篡改数据,除了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与请求头的进行校验,可验证是否请求被篡改。

更多文章:lin-xin/blog

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
用到的技术亮点: 前端用到了easyUI Easyui:jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签。 jQuery EasyUI为提供了大多数UI控件的使用,如:accordion,combobox,menu,dialog,tabs,validatebox,datagrid,window,tree等等。 jQuery EasyUI是基于JQuery的一个前台ui界面的插件,功能相对没extjs强大,但页面也是相当好看的,同时页面支持各种themes以满足使用者对于页面不同风格的喜好。一些功能也足够开发者使用,相对于extjs更轻量。 jQuery EasyUI有以下特点: 1、基于jquery用户界面插件的集合 2、为一些当前用于交互的js应用提供必要的功能 3、EasyUI支持两种渲染方式分别为javascript方式(如:$('#p').panel({...}))和html标记方式(如:class="easyui-panel") 4、支持HTML5(通过data-options属性) 5、开发产品时可节省时间和资源 6、简单,但很强大 7、支持扩展,可根据自己的需求扩展控件 8、目前各项不足正以版本递增的方式不断完善 jQuery EasyUI 提供了用于创建跨浏览器网页的完整的组件集合,包括功能强大的 datagrid(数据网格)、treegrid(树形表格)、 panel(面板)、combo(下拉组合)等等。 用户可以组合使用这些组件,也可以单独使用其中一个。 插件列表如下:(主要用到了以下插件) 系统主要运用在:在系统的关于订单管理和用户管理页面都使用的是此框架。主要用到的是 datagrid(数据网格)这个插件。以上有操作文档 前端用到了jQuery jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。 jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。 系统主要运用在:在系统中一些分页或者样式交互事件处理中使用到了(比如地址选择框) 前端用到了ajax AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。 AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。 AJAX 是一种用于创建快速动态网页的技术。 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。 传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。 系统主要运用在:主要运用于系统的表单验证比如登录注册验证码以及一些需要不刷新页面的异步提交页面(在车票查询,登录注册表单验证页面使用到了,还有是一些删除操作也使用到了) 前端页面使用的jsp(Java服务端网页(一种建立动态网页的技术,Java Server Page)) JSP全名为Java Server Pages,中文名叫java服务器页面,其根本是一个简化的Servlet设计,它 是由Sun Microsystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。JSP技术有点类似ASP技术,它是在传统的网页HTML(标准通用标记语言的子集)文件(*.htm,*.html)中插入Java程序段(Scriptlet)和JSP标记(tag),从而形成JSP文件,后缀名为(*.jsp)。 用JSP开发的Web应用是跨平台的,既能在Linux下运行,也能在其他操作系统上运行。 系统主要运用在:本系统前端页面关于与后台交互的全部使用的jsp 后端使用的MVC三层架构模式 三层架构(3-tier ar
前端常用加密算法包括: 1. 对称加密算法:如AES(Advanced Encryption Standard)、DES(Data Encryption Standard)和3DES(Triple Data Encryption Standard),特点是加密解密速度快,但密钥安全性较低。 2. 非对称加密算法:如RSA(Rivest-Shamir-Adleman)和ECC(Elliptic Curve Cryptography),特点是加密解密速度较慢,但密钥安全性较高。 3. 哈希算法:如MD5(Message-Digest Algorithm 5)和SHA(Secure Hash Algorithm),特点是不可逆且不同的明文生成的哈希值相同的概率极小。 4. 对称加密算法与非对称加密算法结合使用:如SSL(Secure Socket Layer)和TLS(Transport Layer Security),通过使用对称加密算法加密通信过程中的数据,使用非对称加密算法加密密钥,从而兼顾了加密速度和密钥安全性。 常用加密算法的特点主要包括: 1. 加密强度:指加密算法对攻击者破解的难度,一般用密钥长度来衡量,密钥长度越长,加密强度越高。 2. 加密速度:指加密算法对数据加密、解密的速度,一般对称加密算法速度较快,非对称加密算法速度较慢。 3. 密钥管理:指加密算法对密钥生成、存储、分发和更新的支持程度,一般非对称加密算法需要密钥管理较为复杂。 4. 可逆性:指加密算法是否支持加密后数据可逆解密,对称加密算法和非对称加密算法的可逆性不同。 5. 安全性:指加密算法安全性是否被攻击者破解,一般安全性高的加密算法需要较高的加密强度和密钥管理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

方班网络安全

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值