Web开发中几种常见加密方式的使用

随着信息和数据安全重要性的日益凸显，如何保证信息数据在传输的过程中的安全成为开发者重点关注的内容。前端加密通常是指在浏览器中对各种传输的数据进行各种加密操作。然而前端加密更多的是用来对传输的数据进行简单的混淆，为了确保数据在传输过程中不被轻易的篡改和读取。可供我们选择的加密方式有很多种，需要我们在开发过程中根据实际的场景选择适合自己的加密解决方案。

类型	描述	是否可逆	是否能解密	安全性	用途	三方库
base64	不是加密，是一种加密方案	是	可解码，不是解密	低（非加密），0分	图片、文件base64编码，以便在文本流（如JSON/XML）中安全地传输	原生方法btoa()、atob()
MD5	不是加密，是一种哈希算法	否	否	中（存在碰撞），3分	数据完整性校验（不推荐用于密码存储）	blueimp-md5、js-md5
SHA系列（如SHA-256）	不是加密，是一种哈希算法，比MD5安全	否	否	高，8分	在数字证书和SSL/TLS协议中、校验数据完整性	sha.js
AES	对称加密算法，使用相同的密钥进行加密和解密	是	是	高，10分	数据加密、安全通信	CryptoJS
RSA	非对称加密算法，使用一对密钥（公钥和私钥）进行加密和解密	是	是	高，9分	数字签名、密钥交换、数据加密	CryptoJS
HMAC	基于哈希算法，引入密钥	否	否	高，7分	验证完整性、防止篡改	CryptoJS

• 只有 AES(称加密) 和 RSA(非称加密) 属于加密算法，可逆，可加密可解密
• Base64是编码，可逆，可编码可解码
• MD5 和 SHA 属于哈希算法，HMAC是特定的认证算法(哈希算法+密钥)，不可逆，不可解密

1. Base64编码

Base64是一种将二进制数据编码为可读的ASCII文本的方法。常用于将图片或文件内容转换为字符串形式以便于网络传输。

Base64顾名思义，就是基于64个可打印字符来表示二进制数据的一种方法，「注意它并不是一种加密算法」。对于64个打印字符，我们只需要6个二进制位就可以完全表示了。由于2的6次方等于64，所以我们可以将每6个位元为一个单元，对应某个可打印字符。三个字节有24个位元，对应于4个Base64单元，即3个字节需要用4个可打印字符来表示。

使用方法：

• btoa() 方法进行编码
• atob() 方法进行解码

优势：

• base64 适合不同平台、不同语言的传输；
• 页面中内嵌使用 base64 格式的小图片，可减少了服务器访问次数；
• 二进制位转换 base64 算法简单，对性能影响不大；

缺点：

• 二进制文件转换为 base64 后，体积大概增加 1/3；
• base64 无法缓存，要缓存只能缓存包含 base64 的文件，比如 js 或者 css；
• 面对大文件时，会消耗一定的 CPU 进行编解码。

Base64不是一种加密算法，而是一种编码方案。它不提供任何安全性，因为任何人都可以将Base64编码的数据解码回原始数据。因此，在安全性方面，Base64得分最低。

2. MD5算法

MD5（Message-Digest Algorithm 5）是一种广泛使用的加密哈希函数，可以生成一个128位（16字节）的哈希值，通常用32位十六进制数表示。MD5广泛用于确保信息传输的完整性验证。

MD5不可逆，但由于算法较老，已被证实存在安全漏洞，不推荐用于敏感信息的加密。

import md5 from 'js-md5';
console.log(md5('message')); // 输出： d41d8cd98f00b204e9800998ecf8427e

• 优点：算法成熟，使用广泛，有现成的库支持。
• 缺点：MD5被认为是不够安全的，因为它容易受到碰撞攻击（两个不同的输入产生相同的哈希值），MD5不再适用于需要高安全性的场景，如密码存储。

使用技巧：

加盐

为了增强加密的安全性，我们可以在原始字符串的基础上再加上一段随机的字符串，这个字符串就是“盐”。

比如如下加盐加密：

<script lang="ts">
import { defineComponent } from 'vue';
import { md5 } from 'js-md5'; // 引入
export default defineComponent({
  name: 'Test',
  setup() {
    console.log('md5加密', md5('thc'));
    const salt = 'AbC$123'; // 定义一个随机的盐值
    console.log('加盐后md5加密', md5('thc' + salt));
  }
});
</script>

通过加盐可以降低被破解的风险，增强应用的安全性。

多次加密

为了提高加密的强度，我们可以将加密结果再次进行md5加密，多次加密后的结果更加难以破解。

<script lang="ts">
import { defineComponent } from 'vue';
import { md5 } from 'js-md5'; // 引入
export default defineComponent({
  name: 'Test',
  setup() {
    // MD5普通加密
    console.log('md5加密', md5('thc'));
    // MD5加盐加密
    const salt = 'AbC$123'; // 定义一个随机的盐值
    console.log('加盐后md5加密', md5('thc' + salt));
    // MD5多次加密
    console.log('md5多次加密', md5(md5('thc')));
  }
});
</script>

使用场景：

最常见的网站页面登录password加密，版权验证，文件上传比较。

3. SHA系列（哈希算法）

SHA（Secure Hash Algorithm）是一个加密哈希函数家族，包括 SHA-1、SHA-2 、SHA-3 等。它们用于将数据转换为固定长度的哈希值，广泛用于验证数据的完整性。

SHA256是SHA-2下细分出的一种算法SHA-2，名称来自于安全散列算法2（英语：Secure Hash Algorithm 2）的缩写，一种密码散列函数算法标准（哈希算法），由美国国家安全局研发，属于SHA算法之一，是SHA-1的后继者。

SHA-2下又可再分为六个不同的算法标准，包括了：SHA-224、SHA-256、SHA-384、SHA-512、SHA-512/224、SHA-512/256。这些变体除了生成摘要的长度 、循环运行的次数等一些微小差异外，算法的基本结构是一致的。对于任意长度的消息，SHA256都会产生一个256bit长的哈希值，称作消息摘要。这个摘要相当于是个长度为32个字节的数组，通常用一个长度为64的十六进制字符串来表示。

SHA-256 可以通过引入 sha.js 等库来实现。例如：

import { sha256 } from 'sha.js';
console.log(sha256('message')); // 输出： e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855

单向加密，不可解密，同明文，同密文。

• 优点：安全性高，尤其是SHA-256，比SHA-1更安全。
• 缺点：计算速度相对较慢。

SHA-1： SHA-1是SHA系列中的早期版本，与 MD5 类似，虽然被广泛使用，但近年来已被发现存在碰撞攻击的风险，因此其安全性已受到质疑。

SHA-2： SHA-2是SHA系列的更新版本，包括SHA-224、SHA-256、SHA-384和SHA-512等变体。相比SHA-1，SHA-2提供了更高的安全性，并被认为是目前较为安全的哈希函数之一。

SHA-3： SHA-3是SHA系列的最新版本，是NIST（美国国家标准与技术研究院）在SHA-2之后选择的新的哈希函数标准。SHA-3在设计上更加复杂，并且旨在抵御已知的攻击方法，因此其安全性被认为是非常高的。

4. AES加密（对称加密）

AES（Advanced Encryption Standard）是一种对称加密标准，即加密和解密使用相同的密钥。

AES具有多个不同的密钥长度选项，如128位、192位和256位。

AES以其强大的安全性和效率成为全球加密数据传输的标准。AES被广泛应用于各种需要加密的场景，如网络通信、文件加密等。

通过 CryptoJS库 ，可以方便地实现AES加密和解密。例如：

const CryptoJS = require("crypto-js");
let message = "Don't tell anybody.";// 加密信息
const secretKey = "12345678901234567890123456789012"; // 密钥
​
// 使用 CryptoJS 库中的 AES 加密方法对 message 进行加密
var encrypted = CryptoJS.AES.encrypt(message, secretKey);
console.log(encrypted.toString()); // 输出加密结果
​
// 使用相同的密钥进行解密
let decrypted = CryptoJS.AES.decrypt(encrypted, secretKey);
// 将解密后的结果转换为字符串
let decryptedMessage = decrypted.toString(CryptoJS.enc.Utf8);
console.log(decryptedMessage); // 输出解密后的消息

• 优点：安全性高，被广泛应用于政府和商业领域。
• 缺点：需要妥善管理密钥，一旦密钥泄露，加密数据就会被破解。

5. RSA加密（非对称加密）

RSA是一种非对称加密算法，它使用一对密钥（公钥和私钥）进行加密和解密。公钥用于加密数据，私钥用于解密数据。RSA常用于数字签名和密钥交换等场景。

• 公钥加密，私钥解密。
• 公钥可公开，私钥需要保密。
• 加密速度相对较慢，适用于小量数据的加密。

使用 CryptoJS库 进行RSA加密的代码示例：

var CryptoJS = require("crypto-js");
var message = "Don't tell anybody.";
var publicKey = // 这里是RSA公钥；
​
// 使用公钥进行加密
var encrypted = CryptoJS.RSAEncrypt(message, publicKey);
console.log(encrypted.toString()); // 输出加密结果
​
// 使用私钥进行解密
var decrypted = CryptoJS.RSADecrypt(encrypted, privateKey);
// 将解密后的结果转换为字符串
var decryptedMessage = decrypted.toString(CryptoJS.enc.Utf8);
console.log(decryptedMessage); // 输出解密后的消息

• 优点：提供了强大的安全性，基于大数分解问题的困难性，确保了数据在传输过程中的机密性和身份验证。
• 缺点：加密和解密操作相对较慢，不适合处理大量数据，同时在密钥管理方面也可能存在复杂性。

6. HMAC认证（哈希+密钥）

• HMAC是一种基于密钥的哈希算法，同时结合了密钥和哈希函数的优点。
• HMAC本身并不涉及解密过程，因为它不是一种加密算法，而是一种消息认证码算法。用于验证数据的完整性和真实性，而不是加密数据
• HMAC结合了哈希函数的不可逆性和密钥的安全性，用于验证消息的完整性和真实性，防止消息被篡改或伪造。

HMAC加密的主要步骤和特点：

• 选择哈希函数：从常用的哈希函数如SHA-256、SHA-384、SHA-512等中选择一个作为基础。
• 确定密钥：密钥可以是任意长度，如果小于输入块的长度，则需要进行填充处理。
• 填充消息：对消息进行填充，确保其长度满足所选哈希函数的要求。
• 计算哈希值：将处理后的密钥和填充后的消息输入到HMAC算法中，生成最终的哈希值。

在实际应用中，HMAC常用于身份验证、数据完整性校验、防止重放攻击和加密通信等场景。使用HMAC时，发送方和接收方需要共享相同的密钥，并且双方都使用相同的哈希函数来生成和验证HMAC值。

var CryptoJS = require("crypto-js");
var message = "Don't tell anybody.";
var secretKey = "12345678901234567890123456789012"; // 密钥必须与加密时使用的相同
​
// 使用HMAC进行加密
var hmac = CryptoJS.HmacSHA256(message, secretKey);
console.log(hmac.toString()); // 输出加密结果

HMAC提供了比单独的哈希函数更强的安全性，因为它使用了密钥，使得攻击者无法伪造有效的HMAC值。 然而，HMAC本身并不提供数据的加密功能。