前端常用的几种加密方法实例demo

更新时间：2024年01月20日 09:28:11 作者：前端初见

这篇文章主要给大家介绍了关于前端常用几种加密方法的相关资料,需要的朋友可以参考下

前言

在信息安全越来越受重视的今天，JS 安全一直是前端工程师们注重的大问题,前端的各种加密也变得更加重要。通常跟服务器的交互中，为保障数据传输的安全性，避免被人抓包篡改数据，除了 https 的应用，还需要对传输数据进行加解密,保证了所有使用者的权益不被侵犯。

常见加密方式:

对称加密算法(对称加密算法是指加密和解密使用相同密钥的加密算法。在前端常用的对称加密算法包括 AES、DES 等。对称加密算法的安全性依赖于密钥，泄露密钥就意味着任何人都可以对他们发送或接收的消息解密，所以密钥的保密性对通信的安全性至关重要。对称加密算法的优点在于算法公开、计算量小、加密速度快、加密效率高，缺点在于在数据传送前，发送方和接收方必须商定好密钥，然后双方保存好密钥。如果一方的密钥被泄露，那么加密信息也就不安全了。对称加密算法适用于本地数据加密、https 通信、网络传输等场景。)
Hash 算法(Hash 算法是一种将任意长度的数据转换成固定长度的哈希值的算法。在前端常用的 Hash 算法包括 MD5、SHA-1 等。Hash 算法是不可逆的，因此常用于验证数据的完整性，例如文件校验和、密码加密等。Hash 算法的优点在于可以将任意长度的数据转换成固定长度的哈希值，且计算速度快、效率高，缺点在于无法通过哈希值恢复原始数据。Hash 算法适用于数据完整性校验等场景。)
非对称加密算法(非对称加密算法是指加密和解密使用不同密钥的加密算法，其中公钥用于加密，私钥用于解密。在前端常用的非对称加密算法包括 RSA 等。非对称加密算法的安全性依赖于公钥和私钥的生成和管理，泄露任何一把密钥都意味着任何人都可以对他们发送或接收的消息解密，所以公钥和私钥的保密性对通信的安全性至关重要。非对称加密算法的优点在于可以保证数据传输的安全性，缺点在于算法复杂、计算量大、加密速度慢、效率低。非对称加密算法适用于数字签名、身份认证等场景。)

md5 加密(不可逆)

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

js-md5 加密方式 MD5 加密后的位数有两种：16 位与 32 位。默认使用 32 位。（16 位实际上是从 32 位字符串中取中间的第 9 位到第 24 位的部分）为提高安全性。根据业务需求，可以对 md5 添加偏移量。如对原有字符拼接指定位数的字符串

npm 安装

npm install --save js-md5

使用

// 然后在页面中 引入
import md5 from 'js-md5'
md5('加密内容') //默认32位
md5('加密内容').substring(8, 24) // 从第8个字符开始截取16位

base64 位加密(可加密可解密)

Base64 是用于网络上传输 8Bit 字节码的最常见的编码方法之一，Base64 不是安全领域的加密算法。实际上，Base64 只能算是一种编码算法，对数据内容进行编码以适应传输。Base64 是一种将二进制数据转换为 ASCII 字符串的编码方法。它将每 3 个字节的数据编码为 4 个可打印的 ASCII 字符，因此 Base64 编码后的数据长度总是原数据长度的约 4/3 倍（不足 4 的倍数时进行补位）。Base64 编码表由 64 个字符组成，其中包含大小写字母、数字和两个特殊字符 “+”, “/”，同时还有一个填充字符 “=”。Base64 编码是一种可逆操作，可以通过解码操作还原原始数据。

npm 安装

   npm install --save js-base64

使用

/**
 * BASE64加密
 * @param str
 * @returns {string}
 */
base64Encode(str) {
  return btoa(unescape(encodeURIComponent(str)))
}
/**
 * BASE64解密
 * @param str
 * @returns {string}
 */
base64Decode(str) {
  return decodeURIComponent(escape(atob(str)))
}

RSA 加密(公钥加密，私钥解密)

RSA 加密：RSA 是一种非对称加密算法，它使用公钥和私钥进行加密和解密。在前端使用 RSA 加密时，需要使用第三方库进行加密和解密操作，例如 jsencrypt。RSA 加密适用于加密大量数据或进行数字签名等场景。

// 使用公钥加密
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)

AES 加密(需要密钥才能解密)

AES 加密：AES 是一种对称加密算法，它使用相同的密钥进行加密和解密。在前端使用 AES 加密时，需要使用第三方库进行加密和解密操作，例如 crypto-js。AES 加密适用于加密大量数据或进行对称加密等场景。

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))

CryptoJS

CryptoJS 是一个 JavaScript 的加解密的工具包。它支持多种算法：MD5、SHA1、SHA2、SHA3、RIPEMD-160 的哈希散列，以及进行 AES、DES、Rabbit、RC4、Triple DES 加解密。

npm 安装

npm install crypto-js

封装加密文件 asc.js

// 1.引入CryptoJS加密插件
import CryptoJS from 'crypto-js'

// 2.设置秘钥和偏移量需要和后端一致

// 十六位十六进制数作为密钥
const KEY = CryptoJS.enc.Utf8.parse('wtkjtobacco12345')
// 十六位十六进制数作为密钥偏移量
const IV = CryptoJS.enc.Utf8.parse('123456wtkj654321')

export default {
  /**
   * 加密方法
   * @param {*} word
   * @param {*} keyStr
   * @param {*} ivStr
   */
  encrypt(word, keyStr, ivStr) {
    let key = KEY
    let iv = IV
    if (keyStr) {
      key = CryptoJS.enc.Utf8.parse(keyStr)
      iv = CryptoJS.enc.Utf8.parse(ivStr)
    }
    let srcs = CryptoJS.enc.Utf8.parse(word)
    var encrypted = CryptoJS.AES.encrypt(srcs, key, {
      iv: iv,
      mode: CryptoJS.mode.CBC,
      padding: CryptoJS.pad.ZeroPadding,
    })
    return CryptoJS.enc.Base64.stringify(encrypted.ciphertext)
  },

  /**
   * 解密方法
   * @param {*} word
   * @param {*} keyStr
   * @param {*} ivStr
   */
  decrypt(word, keyStr, ivStr) {
    let key = KEY
    let iv = IV

    if (keyStr) {
      key = CryptoJS.enc.Utf8.parse(keyStr)
      iv = CryptoJS.enc.Utf8.parse(ivStr)
    }

    let base64 = CryptoJS.enc.Base64.parse(word)
    let src = CryptoJS.enc.Base64.stringify(base64)

    let decrypt = CryptoJS.AES.decrypt(src, key, {
      iv: iv,
      mode: CryptoJS.mode.CBC,
      padding: CryptoJS.pad.ZeroPadding,
    })

    let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8)
    return decryptedStr.toString()
  },
}

在登录组件 login.vue 使用

<template>
  <div class="home">
    <el-form
      :model="userForm"
      status-icon
      :rules="rules"
      ref="userForm"
      label-width="100px"
      class="demo-userForm"
      label-position="top"
    >
      <el-form-item prop="phone">
        <el-input
          type="text"
          v-model="userForm.phone"
          prefix-icon="el-icon-user"
          placeholder="请输入用户名"
        >
        </el-input>
      </el-form-item>
      <el-form-item prop="password" style="margin-top: 20px !important">
        <el-input
          type="password"
          v-model="userForm.password"
          show-password
          prefix-icon="el-icon-goods"
          placeholder="请输入密码"
        >
        </el-input>
      </el-form-item>
    </el-form>
    <el-button @click="submitForm('userForm')">登录</el-button>
  </div>
</template>
<script>
  import asc from "@/plugins/asc"; //引入封装好的加密
  export default{
    name:'login',
    data(){
      return{
        // 表单绑定数据
        userForm: {
          phone: "",
          password: "",
        },
        encryptionFrom: {}, //加密表单
        // 校验规则
        rules: {
          phone: [{ required: true, message: "账号不能为空!" }],
          password: [{ required: true, message: "密码不能为空!" }],
        },

      }
    }
    methods:{
      // 登录按钮事件
        submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          // this.$router.push({ name: "tobaccoBureau" });
          if (valid) {
            this.loading = true;
            this.encryptionFrom = JSON.parse(JSON.stringify(this.userForm));
            // 加密
            this.encryptionFrom.password = asc.encrypt(this.userForm.password);
            this.$axios({
              url: `auth/login`,
              method: "POST",
              params: this.encryptionFrom,
            })
              .then(async (res) => {
                if (res.success) {

                  if (this.isRemenberPassword) {
                    // 判断是否勾选了记住密码
                    this.saveLocalPassword();
                  } else {
                    localStorage.removeItem("localPassword");
                  }
                  console.log("res", res);
                  sessionStorage.setItem("token", res.data.token);//存储token
                  await this.$store.dispatch("getUserInfo");
                  // this.$router.push({ name: "case" });
                  // this.$message.success("登录成功");
                }
              })
              .catch((err) => {})
              .finally(() => {
                this.loading = false;
              });
          }
        });
      },
    //保存缓存密码
    saveLocalPassword() {
      console.log("保存", this.form);
      localStorage.setItem("localPassword", JSON.stringify(this.form));
    },
    // 获取缓存密码
    getLocalPassword() {
      this.isRemenberPassword = false;
      let form = JSON.parse(localStorage.getItem("localPassword"));
      if (form) {
        this.isRemenberPassword = true;
        this.form = form;
      }
    },
    }
  }
</script>

常用的加密方式–demo

<template>
  <div class="main">
    <el-form :model="form" :rules="rules" ref="dialog_form" label-width="80px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="密码:">
            <el-input
              placeholder="请输入"
              size="small"
              v-model="form.password"
              @change="passwordChange"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row
        >----------------------------------------------------------------------------------------------------------------</el-row
      >

      <el-row>
        <h1 class="title">md5加密（默认32位）</h1>
        <span>{{ md5Encode(form.password) }}</span>
      </el-row>
      <el-row>
        <h1 class="title">md5加密（16位）</h1>
        <span>{{ md5Encode2(form.password) }}</span>
      </el-row>
      <el-row>
        <span class="detail"
          >js-md5加密方式 MD5 加密后的位数有两种：16 位与 32 位。默认使用 32
          位。 （16 位实际上是从 32 位字符串中取中间的第 9 位到第 24
          位的部分）为提高安全性。根据业务需求，可以对 md5
          添加偏移量。如对原有字符拼接指定位数的字符串。</span
        >
      </el-row>
      <el-row>
        <h1 class="title">base64加密（方法1 window.btoa）</h1>
        <span>{{ base64Encode1(form.password) }}</span>
      </el-row>

      <el-row>
        <h1 class="title">base64加密（方法3 Base64.encode使用插件）</h1>
        <span>{{ base64Encode2(form.password) }}</span>
      </el-row>
      <el-row>
        <h1 class="title">
          base64加密（方法3 btoa(unescape(encodeURIComponent))）
        </h1>
        <span>{{ base64Encode3(form.password) }}</span>
      </el-row>
      <el-row>
        <h1 class="title">
          base64解密（方法3 decodeURIComponent(escape())使用插件）
        </h1>
        <span>{{ base64Decode(base64Encode3(form.password)) }}</span>
      </el-row>
      <el-row>
        <h1 class="title">asc加密（使用CryptoJS插件）</h1>
        <span>{{ encrypt(form.password) }}</span>
      </el-row>
      <el-row>
        <h1 class="title">asc解密（使用CryptoJS插件）</h1>
        <span>{{ decrypt(encrypt(form.password)) }}</span>
      </el-row>
      <el-row>
        <span class="detail">
          CryptoJS 是一个 JavaScript
          的加解密的工具包。它支持多种算法：MD5、SHA1、SHA2、SHA3、RIPEMD-160
          的哈希散列，以及进行 AES、DES、Rabbit、RC4、Triple DES 加解密。</span
        >
      </el-row>
      <el-row>
        <h1 class="title">对称（RSA）加密：jsencrypt</h1>
        <span>{{ RSAEncode(form.password) }}</span>
      </el-row>
      <el-row>
        <el-col :span="14">
          <span class="detail">
            关于该加密模块，出现在自己做的一个后台管理系统项目中，前端是vue，后端是Java。应用的场景是需要前端通过公钥对需要加密的密文进行加密，后端通过私钥对前端加密的密文进行解密。这样能比之前三个能极大的提高密文安全性。相关的使用方式可以参照下面
            关于前端的其他加密解密好文中的第二个。
            这里把关于前端方面简化后的代码贴在下方，可供参考，后端方面的参考下方链接的第二个博文
          </span>
        </el-col>
      </el-row>
      <div></div>
    </el-form>
  </div>
</template>
<script>
  import md5 from 'js-md5' //引入md5加密插件
  import { Base64 } from 'js-base64' //base64加密插件
  import CryptoJS from 'crypto-js' //引入CryptoJS加密插件
  import JSEncrypt from 'jsencrypt' //引入JSEncrypt加密插件
  export default {
    data() {
      return {
        form: {
          password: '123', //密码
        },
        rules: {}, //校验
      }
    },
    methods: {
      passwordChange() {},
      // md5加密(默认32位)
      md5Encode(str) {
        return md5(str)
      },
      // 使用 MD5 加密算法进行16位加密
      md5Encode2(str) {
        return md5(str).substring(8, 24) // 从第8个字符开始截取16位
      },

      // base64加密(方法1--window.btoa)
      base64Encode1(str) {
        return window.btoa(str)
      },
      // base64加密(方法2-- Base64.encode) 使用插件
      base64Encode2(str) {
        return Base64.encode(str)
      },
      // base64加密(方法3--window.btoa)
      /**
       * BASE64加密
       * @param str
       * @returns {string}
       */
      base64Encode3(str) {
        return btoa(unescape(encodeURIComponent(str)))
      },

      /**
       * BASE64解密
       * @param str
       * @returns {string}
       */
      base64Decode(str) {
        return decodeURIComponent(escape(atob(str)))
      },
      // asc加密
      /**
       * 加密方法
       * @param {*} word
       * @param {*} keyStr
       * @param {*} ivStr
       */
      encrypt(word, keyStr, ivStr) {
        // 设置秘钥和偏移量需要和后端一致
        // 十六位十六进制数作为密钥
        const KEY = CryptoJS.enc.Utf8.parse('123456jmff654321')
        // 十六位十六进制数作为密钥偏移量
        const IV = CryptoJS.enc.Utf8.parse('654321jmff123456')
        let key = KEY
        let iv = IV
        if (keyStr) {
          key = CryptoJS.enc.Utf8.parse(keyStr)
          iv = CryptoJS.enc.Utf8.parse(ivStr)
        }
        let srcs = CryptoJS.enc.Utf8.parse(word)
        var encrypted = CryptoJS.AES.encrypt(srcs, key, {
          iv: iv,
          mode: CryptoJS.mode.CBC,
          padding: CryptoJS.pad.ZeroPadding,
        })
        return CryptoJS.enc.Base64.stringify(encrypted.ciphertext)
      },
      //  asc解密
      /**
       * 解密方法
       * @param {*} word
       * @param {*} keyStr
       * @param {*} ivStr
       */
      decrypt(word, keyStr, ivStr) {
        // 设置秘钥和偏移量需要和后端一致
        // 十六位十六进制数作为密钥
        const KEY = CryptoJS.enc.Utf8.parse('123456jmff654321')
        // 十六位十六进制数作为密钥偏移量
        const IV = CryptoJS.enc.Utf8.parse('654321jmff123456')
        let key = KEY
        let iv = IV

        if (keyStr) {
          key = CryptoJS.enc.Utf8.parse(keyStr)
          iv = CryptoJS.enc.Utf8.parse(ivStr)
        }

        let base64 = CryptoJS.enc.Base64.parse(word)
        let src = CryptoJS.enc.Base64.stringify(base64)

        let decrypt = CryptoJS.AES.decrypt(src, key, {
          iv: iv,
          mode: CryptoJS.mode.CBC,
          padding: CryptoJS.pad.ZeroPadding,
        })

        let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8)
        return decryptedStr.toString()
      },
      // 非对称加密密钥生成网站：http://web.chacuo.net/netrsakeypair
      // RSA非对称加密是一种广泛使用的加密算法，它使用两个密钥：一个公钥用于加密数据，一个私钥用于解密数据。在JavaScript中，可以使用CryptoJS库来实现RSA非对称加密。
      // 非对称（RSA）加密：jsencrypt
      RSAEncode(str) {
        let encryptor = new JSEncrypt() // 新建JSEncrypt对象
        let publicKey = `MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAuY3BqJVVeLwYF/qk6VeM
ZNKruSQUfAsrz3Hv0ExmK7FdlsgtEBRMpFNylCFw2pbhdFtC0iedr5+DDKqqasUh
boXMRR5KV27Zan96RbyQaqT9oXP6n9d6JBPNxuTglLtnK+FielB8oXmlz8YmOvs6
mH2n6GNoYAFwaNMXPAtiNFk+BbyTeN7t6aejQiidqq8OW87c/B6KD1ffbQBC56u2
CGYHPHjvL4G7QtR3vheXFNXjz2e0iVvHZ5hv/rBXRk9XNnV0eID3/TXlGiCFcyqd
wm6tMV54H9tv9XX00NqhBnKtPIxLTCe5Ys/83K+KuniOYYtLQmy5NLgNaNTm6hCD
ZwIDAQAB` //设置公钥，可以从上面的非对称加密密钥生成网站中得到
        encryptor.setPublicKey(publicKey) // 将得到的公钥通过setPbulicKey方法设置到JSEncrypt对象中
        return encryptor.encrypt(str) // 对需要加密的数据进行加密，rspPassWord就是加密密文
      },
    },
  }
</script>
<style lang="scss" scoped>
  .main {
    width: 100%;
    height: 100%;
    padding: 10px;
    .banner {
      width: 800px;
      height: 600px;
      margin: 0 auto;
      box-sizing: border-box;
      border: 1px solid #ccc;
    }
    .title {
      font-size: 16px;
      // color: rgb(150, 15, 212);
      display: inline-block;
    }
    .detail {
      color: darkgray;
    }
  }
</style>

需要注意的是，前端加密并不能保证绝对的安全性，应该结合其他安全措施来提高系统的安全性。同时，在选择加密算法时应该根据具体的需求和场景进行选择，综合考虑安全性和性能等因素。

总结

到此这篇关于前端常用的几种加密方法的文章就介绍到这了,更多相关前端加密方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

mpvue微信小程序的接口请求fly全局拦截代码实例
这篇文章主要介绍了mpvue微信小程序的接口请求fly全局拦截代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-11-11
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
这篇文章主要介绍了jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法,结合实例形式分析了jQuery结合bootstrap插件实现的鼠标响应式提示框相关操作技巧,需要的朋友可以参考下
2020-04-04
使用ionic切换页面卡顿的解决方法
使用ionic开发app的时候，会发现切换页面的动画会卡顿，并不流畅，为了保证用户体验，大家采用cordova提供的native transitions可以让页面切换近乎原型的体验，一起通过本文学习下具体实现思路
2016-12-12
javascript表达式和运算符详解
本文主要对js表达式与js运算符进行详细介绍。具有很好的参考价值。下面跟着小编一起来看下吧
2017-02-02
js判断移动端是否安装某款app的多种方法
这篇文章主要介绍了js判断移动端是否安装某款app的多种方法，感兴趣的小伙伴们可以参考一下
2015-12-12
JSON 数字排序多字段排序介绍
JSON 数字排序在使用中比较常见，在本文将为大家详细介绍下具体是如何排序的，感兴趣的朋友可以参考下
2013-09-09
JavaScript模拟文件拖选框样式v1.0的实例
下面小编就为大家带来一篇JavaScript模拟文件拖选框样式v1.0的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
JavaScript选择排序算法原理与实现方法示例
这篇文章主要介绍了JavaScript选择排序算法原理与实现方法,简单分析了选择排序算法的概念、原理并结合实例形式分析了JavaScript选择排序算法的相关实现技巧与操作注意事项,需要的朋友可以参考下
2018-08-08
微信小程序实现form表单本地储存数据
这篇文章主要为大家详细介绍了微信小程序实现form表单本地储存数据，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-06-06
简单实用的网页表格特效
简单实用的网页表格特效...
2006-07-07