前端开发
扩展知识
登录加密

前端登录信息加密

对于前端的 login.js 登录逻辑,为了安全,这里使用了加密算法,后端会在获取到加密信息,然后进行解密,解密后的信息与数据库中的信息进行比对,如果一致,则登录成功,否则登录失败。

加密算法

采用简单的基于 字符表 方式进行加密。请注意,该加密算法由于 字符表 的原因,仅支持英文字符的加密,用于登录信息加密场景,请勿在包含中文字符信息的场景中使用。

function encrypt(str, key) {
  var charTable = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789{}:<>?[];'";
  var result = "";
  for (var i = 0; i < str.length; i++) {
    var charIndex = charTable.indexOf(str.charAt(i));
    if (charIndex == -1) {
      result += str.charAt(i);
    } else {
      var keyIndex = charTable.indexOf(key.charAt(i % key.length));
      var encryptedIndex = (charIndex + keyIndex) % charTable.length;
      result += charTable.charAt(encryptedIndex);
    }
  }
  return result;
}

前端为了简单,key的取值为 yonyouaud ,后端也是一样,这里就不再赘述了。

解密算法

function decrypt(str, key) {
  var charTable = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789{}:<>?[];'";
  var result = "";
  for (var i = 0; i < str.length; i++) {
    var charIndex = charTable.indexOf(str.charAt(i));
    if (charIndex == -1) {
      result += str.charAt(i);
    } else {
      var keyIndex = charTable.indexOf(key.charAt(i % key.length));
      var decryptedIndex = (charIndex - keyIndex + charTable.length) % charTable.length;
      result += charTable.charAt(decryptedIndex);
    }
  }
  return result;
}

后端解密

后端用 Java 语言进行解密,解密算法如下(完全与前端的 decrypt 一致):

public static String decrypt(String str, String key) {
    String charTable = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789{}:<>?[];'";
    StringBuilder result = new StringBuilder();
    for (int i = 0; i < str.length(); i++) {
        char ch = str.charAt(i);
        int charIndex = charTable.indexOf(ch);
        if (charIndex == -1) {
            result.append(ch);
        } else {
            int keyIndex = charTable.indexOf(key.charAt(i % key.length()));
            int decryptedIndex = (charIndex - keyIndex + charTable.length()) % charTable.length();
            result.append(charTable.charAt(decryptedIndex));
        }
    }
    return result.toString();
}

前端加密算法的混淆

为了不被轻易破解加密算法,前端的 encrypt 函数进行了简单加密混淆,并将混淆后的代码置入 login.js 中。

混淆操作步骤如下:

  • 进入网站:https://www.json.cn/json/jshx.html (opens in a new tab)
  • 将函数 encrypt 的代码复制到左侧的 JavaScript代码 框中,选择 标识符名称生成器-短字符 方式进行加密。
  • 点击 混淆 按钮,将混淆后的代码复制到 login.js 中。