フロントエンドデータ暗号化方式

1.Base64暗号化

Base64 は、バイナリ データを読み取り可能なテキスト形式にエンコードするために使用されるエンコード仕様です。このページで、ユーザーが「base64 暗号化」ボタンをクリックすると、JavaScript 関数 fn1() が呼び出されます。この関数は、Base64 暗号化に window.btoa() メソッドを使用し、復号化に window.atob() メソッドを使用します。具体的な実装は以下の通りです。

// base64加密
var fn1=()=>{
  // 加密
  var str = window.btoa('123564896514')
  console.log('加密后',str);
  // 解密
  var str2 = window.atob(str);
  console.log('解密后',str2);
}

window.btoa() メソッドは、文字列をパラメータとして受け取り、その文字列を Base64 でエンコードした結果を返します。window.atob() メソッドは、Base64 でエンコードされた文字列をパラメーターとして受け取り、エンコードされた元の文字列を返します。

2. MD5暗号化

MD5 は一般的に使用される暗号化ハッシュ関数であり、通常、データの完全性と一貫性を検証するために、データの一部分に対して一意の「フィンガープリント」を生成するために使用されます。このページで、ユーザーが「MD5 暗号化」ボタンをクリックすると、JavaScript 関数 fn2() が呼び出されます。この関数は、md5.js ライブラリ ファイルで提供される md5() メソッドを使用して MD5 暗号化操作を実行します。具体的な実装は以下の通りです。

// MD5加密(不可逆的) 密码散列函数  需要引入https://cdn.bootcss.com/blueimp-md5/2.12.0/js/md5.min.js 这个js文件
var fn2=()=>{
  // 加密
  var str = '123'
  var str2 = md5(str)
  console.log('加密后',str2);

}

md5() メソッドは文字列をパラメータとして受け取り、その文字列を MD5 でエンコードした結果を返します。

3. SHA-1暗号化

SHA-1 は、MD5 に似た一般的に使用される暗号化ハッシュ関数ですが、セキュリティが強化されています。このページで、ユーザーが「sha-1.js 暗号化」ボタンをクリックすると、JavaScript 関数 fn3() が呼び出されます。この関数は、sha1.js ライブラリ ファイルで提供される sha1() メソッドを使用して SHA-1 暗号化を実行します。操作。具体的な実装は以下の通りです。

// sha-1加密(不可逆) 是一种数加密算法  需要引入https://cdn.bootcss.com/js-sha1/0.6.0/sha1.js  
var fn3=()=>{
  // 加密
  var str = '123'
  var str2 = sha1(str)
  console.log('加密后',str2);

}

sha1() メソッドは文字列をパラメータとして受け取り、その文字列を SHA-1 でエンコードした結果を返します。

4. 暗号化のエンコードとデコード

Web 開発では、送信や保存を容易にするために、URL や Cookie などのデータをエンコードおよびデコードする必要があることがよくあります。このページで、ユーザーが「エンコード、デコード、暗号化」ボタンをクリックすると、JavaScript 関数 fn4() が呼び出されます。この関数は、エンコードおよびデコード操作にエスケープ() メソッドと unescape() メソッドを使用します。具体的な実装は以下の通りです。

//编码解码  使用JS函数的escape()和unescape()
var fn4=()=>{
  // 加密
  var str = '中国123abc'
  let str1 = escape(str);
  console.log('加密后',str1);
  // 解密
  let str2 = unescape(str);
  console.log('解密后',str2);
}

escape() メソッドは文字列を引数として受け取り、その文字列を URL エンコードした結果を返します。unescape() メソッドは、URL エンコードされた文字列を引数として受け取り、エンコードされた元の文字列を返します。

フロントエンド暗号化には次の方法があります。

  1. 対称暗号化: 暗号化と復号化に同じキーを使用します。一般的なアルゴリズムには DES、3DES、AES などが含まれます。実装は次のとおりです。
// 加密
function encryptByAES(message, secretKey) {
  const key = CryptoJS.enc.Utf8.parse(secretKey);
  const encrypted = CryptoJS.AES.encrypt(message, key, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
  });
  return encrypted.toString();
}

// 解密
function decryptByAES(ciphertext, secretKey) {
  const key = CryptoJS.enc.Utf8.parse(secretKey);
  const decrypted = CryptoJS.AES.decrypt(ciphertext, key, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
  });
  return decrypted.toString(CryptoJS.enc.Utf8);
}
  1. 非対称暗号化: 公開キーと秘密キーを使用した暗号化と復号化。一般的なアルゴリズムには RSA、DSA などが含まれます。実装は次のとおりです。
// 生成公钥和私钥
const keyPair = window.crypto.subtle.generateKey(
  {
    name: "RSA-OAEP",
    modulusLength: 2048,
    publicExponent: new Uint8Array([1, 0, 1]), // 65537
    hash: "SHA-256"
  },
  true,
  ["encrypt", "decrypt"]
);

// 加密
async function encryptByRSA(message, publicKey) {
  const encodedMessage = new TextEncoder().encode(message);
  const encrypted = await window.crypto.subtle.encrypt(
    {
      name: "RSA-OAEP"
    },
    publicKey,
    encodedMessage
  );
  return window.btoa(String.fromCharCode(...new Uint8Array(encrypted)));
}

// 解密
async function decryptByRSA(ciphertext, privateKey) {
  const decodedCiphertext = Uint8Array.from(
    atob(ciphertext),
    c => c.charCodeAt(0)
  );
  const decrypted = await window.crypto.subtle.decrypt(
    {
      name: "RSA-OAEP"
    },
    privateKey,
    decodedCiphertext
  );
  return new TextDecoder().decode(decrypted);
}
  1. ハッシュ暗号化: データを固定長のハッシュ値に変換します。一般的なアルゴリズムには、MD5、SHA-1、SHA-256 などが含まれます。実装は次のとおりです。
// 计算MD5散列值
function hashByMD5(message) {
  return CryptoJS.MD5(message).toString();
}

// 计算SHA-256散列值
function hashBySHA256(message) {
  return CryptoJS.SHA256(message).toString();
}
  1. 難読化された暗号化: コードを難読化するかノイズを追加することでセキュリティを強化します。一般的な方法には、コードの難読化や文字の置換が含まれます。実装は次のとおりです。
// 字符串替换
function replaceChars(str) {
  return str.replace(/a/g, "@").replace(/e/g, "3").replace(/i/g, "1");
}

// 代码混淆
function obfuscateCode(code) {
  // 实现方式可以使用自己的加密算法,这里只是示例
  return code.split("").reverse().join("");
}

おすすめ

転載: blog.csdn.net/w418856/article/details/130964706