一、前言

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

前端常见的加密算法介绍相关推荐

  1. js逆向之加密算法介绍

    目录 前言 一.js常见的加密方式 Md5加密 对称加密DES/AES 非对称加密RSA base64伪加密 前言 何为逆向:与逆向相对的是正向,正向即采用某种加密方式对数据进行加密,或对加密代码进行 ...

  2. 前端单元测试及其工具介绍(一)

    文章目录 前端单元测试及其工具介绍 为什么需要单元测试 单元测试的一些要素 工具 mocha 介绍 API 钩子函数 chai 介绍 使用 mochawesome nyc/Istanbul 介绍 Si ...

  3. 前端常见配置文件格式及选择

    背景 自己撸一个脚手架的时候,需要为脚手架提供一个配置文件,然后发现有好多种配置文件的格式可以选择,比如.json .js或.yml等,一时有点迷茫应该选择哪个格式,查阅一些资料总结此文,以供查阅. ...

  4. 前端常见的8种设计模式

    在前端开发中,设计模式是一种被广泛应用的思想.设计模式可以帮助开发者解决常见的问题,并提供可重用的解决方案.本文将会介绍前端常见的设计模式,并通过代码详解它们的实现. 一.单例模式 单例模式是指一个类 ...

  5. 【转载】四种常见系统架构介绍

    转自于 四种常见系统架构介绍 - 宇大..大 - 博客园软件架构(software architecture)就是软件的基本结构. 合适的架构是软件成功的最重要因素之一.大型软件公司通常有专门的架构师 ...

  6. 二、前端技术-es6的介绍

    二.前端技术-es6的介绍 一.ECMAScript 6 简介 1.ECMAScript 和 JavaScript 的关系 2.ES6 与 ECMAScript 2015 的关系 二.基本语法 1.l ...

  7. web前端开发常用浏览器介绍及运行配置

    1.web前端开发常用浏览器介绍 浏览器是用来检索展示以及传递web信息的应用程序,市面上比较常见的浏览器有IE浏览器.火狐浏览器.谷歌浏览器.Safari浏览器和欧朋浏览器等,其中IE.火狐和谷歌是 ...

  8. 我所碰到的面试题之------前端常见浏览器兼容性问题解决方案---

    我所碰到的面试题之------前端常见浏览器兼容性问题解决方案--- 参考文章: (1)我所碰到的面试题之------前端常见浏览器兼容性问题解决方案--- (2)https://www.cnblog ...

  9. Angular 中后台前端解决方案 - Ng Alain 介绍

    Angular 中后台前端解决方案 - Ng Alain 介绍 参考文章: (1)Angular 中后台前端解决方案 - Ng Alain 介绍 (2)https://www.cnblogs.com/ ...

最新文章

  1. python_104_面向对象总结
  2. SAP新总账 凭证分割
  3. 基于KD树的K近邻算法(KNN)算法
  4. HP服务器ile进系统,HP GEN10服务器UEFI安装Windows Sverver 2012 R2教程
  5. 关闭Wordpress修订功能,清除“Revision”的方法
  6. redis+lua实现分布式限流
  7. java dom4j读写xml_Java:简单的读写XML文件之使用DOM4J读写
  8. 如何收集常见的前端性能信息
  9. web javascript开发 之Response.Write 与document.writ...
  10. esp8266 扫描wifi_wifi气象站
  11. 动态路由之RIP协议、Bellman-Ford算法
  12. 公专网集群对讲系统在城市执法过程中的应用
  13. Windows10下python pip卸载并重新安装
  14. MongoDBCompass使用教程
  15. 隐藏百度地图logo
  16. 多线程开发之AsyncTask
  17. 系统安全性之认证技术
  18. 用户商家对刷脸支付好评不断普及指日可待
  19. js实现金额的大写转小写
  20. 磁盘调度策略 c语言实现(操作系统课程设计,书p320)

热门文章

  1. android过滤html标签,Android中处理TextView带超链接HTML标签的点击事件处理方法
  2. 计算机发送到桌面快捷方式,windows7添加到桌面快捷方式无故消失!
  3. matlab 里try用法,matlab在整个程序(全局)中使用try-catch来报告错误
  4. php 有 stringbuffer,String、StringBuffer、StringBulider三者介绍
  5. 根据id获取多维数组路径_程序员的进阶课-架构师之路(2)-数组
  6. ajax处理返回的xml数据,使用AJAX调用WebService返回xml不返回json原因以及解决办法...
  7. 主板螺丝是机箱配还是主板配_要配新电脑,A520主板和B450主板哪一个更加值得购买?...
  8. 港航环境变化引起的错误解决方法
  9. mysql快速上手3
  10. Windows与Linux下进程间通信技术比较