前端实现加密算法

在前端对密码进行加密的过程中，常见的方法是使用哈希函数对密码进行单向散列加密。单向散列加密是一种不可逆的加密方式，即无法通过密文还原出原始的明文密码。

常见的前端密码加密算法包括MD5、SHA-1、SHA-256等。其中，MD5是最常见的一种加密算法，但由于其存在碰撞攻击的安全漏洞，不再推荐使用。SHA-1和SHA-256是更加安全的哈希函数算法，可以更好地保护密码的安全性。

在vue2+vue-cli项目中可以正常使用crypto-browserify和crypto-js进行加密操作，但是在vue3+vite项目中无法使用crypto-browserify这个库。Vite 是一个快速、简单的前端构建工具，它通过 ES 模块导入来进行构建，并不支持 CommonJS 规范的模块导入方式。而 crypto-browserify 是一个基于 CommonJS 规范的库，因此在 Vite 中使用 crypto-browserify 可能会遇到一些兼容性问题。

网页crypto-js使用文档 cryptojs.gitbook.io/docs/#encod…

在vue2中使用crypto-browserify对登录密码进行加密的写法 ` const password = loginForm.password; const salt = fromHexString(data); // 生成一个随机的盐值 const iterations = 10000; // 迭代次数，用于增加派生密钥的复杂性 const keylen = 64 / 32; // 生成一个32字节的密钥 const digest = 'sha256'; // 使用SHA-512哈希算法

const key = CryptoJS.PBKDF2(password, data, {
  keySize: keylen,
  iterations: iterations
});
console.log(key, 'key');

 CryptoJS.PBKDF2(
   password,
   salt,
   iterations,
   keylen,
   digest,
   async (err, derivedKey) => {
     console.log(err, 'err');

     if (err) throw err;
     console.log(derivedKey.toString('hex')); // 输出派生的密钥
   }
 );`

在vue3+vite+ts中使用cypto-js的PBKDF2进行加密的写法

` const password = loginForm.password; const salt = fromHexString(data); // 生成一个随机的盐值 const iterations = 10000; // 迭代次数，用于增加派生密钥的复杂性 const keylen = 64 / 32; // 生成一个32字节的密钥 const digest = 'sha256'; // 使用SHA-512哈希算法

const key = CryptoJS.PBKDF2(password, data, {
  keySize: keylen,
  iterations: iterations
});`

使用crypto-js的AES进行加密写法

        const details = await getCenterDetails(id);
        const type = await getVirtType();
        this.centerFormrShow = true;
        const keyString = getKeyString(details.username);
        details.password = CryptoJS.AES.decrypt(
          details.password,
          CryptoJS.enc.Utf8.parse(keyString),
          {
            iv: CryptoJS.enc.Utf8.parse(keyString),
            mode: CryptoJS.mode.CBC,
            padding: CryptoJS.pad.Pkcs7,
          }
        ).toString(CryptoJS.enc.Utf8);

以上就是全部内容 此文章为9月Day025学习笔记，内容来源于极客时间《重学前端》，强烈推荐该课程