JS使用 cryptojs加密解密(對稱加密庫)的問題

更新時間：2023年11月10日 11:43:43 作者：A黃俊輝A

js 加密解密可以使用 crypto-js,這是一個對稱加密的庫, 可以使用 AES DES 但沒有 rsa 等非對稱加密的方法,本文通過實例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧

js 加密解密可以使用 crypto-js
這是一個對稱加密的庫，可以使用 AES DES 但沒有 rsa 等非對稱加密的方法
安裝方法 npm install crypto-js
它可以進(jìn)行 MD5 SHA-1 SHA-256 Base64 AES DES 等算法和加密

import crypto from "crypto-js"
	let md5binary = crypto.MD5("message");
	let hamcmd5binary =crypto.HmacMD5("message");
	//以上兩個得到的是一個二進(jìn)制的數(shù)據(jù)， 要可打印出業(yè)，就要使用 16進(jìn)制模式或者base64方式
	//crypto 也有應(yīng)的轉(zhuǎn)換方法

通過顯式調(diào)用toString方法并傳遞編碼器，可以將WordArray（二進(jìn)制數(shù)據(jù)）對象轉(zhuǎn)換為其他格式。

import crypto from "crypto-js"
	 let md5message = cryptjs.MD5(str); //這里得到的都是摘要的 二進(jìn)制數(shù)據(jù)
  console.log(md5message);  //打印的二進(jìn)制數(shù)據(jù)
  let hmacmd5message = cryptjs.HmacMD5(str,"haha"); //這里得到的都是摘要的 二進(jìn)制數(shù)據(jù)
  console.log(hmacmd5message); //打印的二進(jìn)制數(shù)據(jù)
  let sha1message = cryptjs.SHA1(str); //這里得到的都是摘要的 二進(jìn)制數(shù)據(jù)
  console.log(sha1message); //打印的二進(jìn)制數(shù)據(jù)
  let hamcsha1message = cryptjs.HmacSHA1(str,"haha");//這里得到的都是摘要的 二進(jìn)制數(shù)據(jù)
  console.log(hamcsha1message); //打印的二進(jìn)制數(shù)據(jù)
  let sha512message = cryptjs.SHA512(str); //這里得到的都是摘要的 二進(jìn)制數(shù)據(jù)
  console.log(sha512message); //打印的二進(jìn)制數(shù)據(jù)
  let hmacsha512message = cryptjs.HmacSHA512(str,"haha");//這里得到的都是摘要的 二進(jìn)制數(shù)據(jù)
  console.log(hmacsha512message);//打印的二進(jìn)制數(shù)據(jù)
  //上面打印的都是二進(jìn)制的數(shù)據(jù)， 不利于傳輸， 所以， 我們要把它們變成 十六進(jìn)制數(shù)據(jù)，或都base64的數(shù)據(jù)來進(jìn)行傳輸
  //通過顯式調(diào)用toString方法并傳遞編碼器，可以將WordArray（二進(jìn)制）對象轉(zhuǎn)換為其他格式。
  //轉(zhuǎn)成 base64 格式的方法
  let strbyhex = md5message.toString(cryptjs.enc.Hex);   //把二進(jìn)制數(shù)據(jù)轉(zhuǎn)成16進(jìn)制
  console.log(strbyhex,"|||||||| js 十六進(jìn)制結(jié)果");
  let strbybase64 = md5message.toString(cryptjs.enc.Base64);    //把二進(jìn)制數(shù)據(jù)轉(zhuǎn)成base64
  console.log(strbybase64,"||||||||js base64 結(jié)果")

我們把最后幾行的二進(jìn)制轉(zhuǎn)16進(jìn)制和二進(jìn)制轉(zhuǎn)base64 的結(jié)果和 php 生成的結(jié)果對比一下看看

    public function testpass(){
        $md5binary =  hash("md5","message",true);  //第三個參數(shù) 為false  輸出的是十六進(jìn)制數(shù)據(jù)   如果是true  輸出的是二進(jìn)制數(shù)據(jù)
        //php 轉(zhuǎn)二進(jìn)制數(shù)據(jù)到 十六進(jìn)制數(shù)據(jù)
        $md5hex = bin2hex($md5binary);
        //php 二進(jìn)制數(shù)據(jù)到base64
        $md5base64 = base64_encode($md5binary);
        echo "php十六進(jìn)制結(jié)果";
        echo $md5hex;
        echo "<br/>";
        echo "php base64結(jié)果";
        echo $md5base64;
        }

分別運(yùn)行代碼看結(jié)果

對比沒有問題

對稱加密

cryptojs 也可以用來做對稱加密，就拿 AES 對稱加密來說
AES 對稱加密是需要有密鑰key 向量 iv
CryptoJS支持AES-128、AES-192和AES-256。它會根據(jù)你傳入的密鑰的大小來選擇變體。如果你使用密碼短語，它會生成一個256位的密鑰。
當(dāng)然，我們也可以自己來定義密鑰key 和 iv向量
在這之前我們要先了解一下， js base64 16進(jìn)制 utf8 之前的轉(zhuǎn)換

js php utf8字符串轉(zhuǎn)base64

let str = "這是一個測式";
  let words = cryptjs.enc.Utf8.parse(str);  //先把字符串轉(zhuǎn)成words數(shù)型的二進(jìn)制數(shù)組
  let base64words = cryptjs.enc.Base64.stringify(words);  //把二進(jìn)制數(shù)組轉(zhuǎn)成 base64字符串
  console.log(base64words);  //輸出  6L+Z5piv5LiA5Liq5rWL5byP

我們可以用 php base64_encode 來驗證一下

 $a = "這是一個測式";
 echo base64_encode($a);   //輸出的結(jié)果  6L+Z5piv5LiA5Liq5rWL5byP

js php 把base64字符轉(zhuǎn)成 utf8

let baseStr = "6L+Z5piv5LiA5Liq5rWL5byP";
  let wordsbyBase64 = cryptjs.enc.Base64.parse(baseStr);  //把base64字符串轉(zhuǎn)成 words數(shù)組(二進(jìn)制數(shù)組)
  let res = cryptjs.enc.Utf8.stringify(wordsbyBase64);
  console.log(res);   //結(jié)果 這是一個測式

php base64_decode 來驗證

 		$a = "6L+Z5piv5LiA5Liq5rWL5byP";
        echo base64_decode($a);  // 結(jié)果 這是一個測式

js php 把utf8 字符串，轉(zhuǎn)成16進(jìn)制

  let str1 = "這是一個字符串轉(zhuǎn)成十六進(jìn)制的測試";
  let words16bystr = cryptjs.enc.Utf8.parse(str1);
  let hexstr = cryptjs.enc.Hex.stringify(words16bystr);
  console.log(hexstr);  //得到結(jié)果 e8bf99e698afe4b880e4b8aae5ad97e7aca6e4b8b2e8bdace68890e58d81e585ade8bf9be588b6e79a84e6b58be8af95

用 php 來進(jìn)行驗證

        $str = "這是一個字符串轉(zhuǎn)成十六進(jìn)制的測試";
        $strto16 = bin2hex($str);
        echo $strto16; //結(jié)果 e8bf99e698afe4b880e4b8aae5ad97e7aca6e4b8b2e8bdace68890e58d81e585ade8bf9be588b6e79a84e6b58be8af95

此處有點(diǎn)疑問：明明是一個字符串，為什么php 轉(zhuǎn)換時用的 bin2hex 函數(shù)呢，這不應(yīng)該是二進(jìn)制數(shù)據(jù)轉(zhuǎn)hex 才用的函數(shù)嗎？
后來，我使用 php 的gettype 函數(shù) 看了一下，不管是字符串，還是二進(jìn)制數(shù)據(jù)，在php 這里都是string 類型，也就是說 php 底層是把字符串當(dāng)做二進(jìn)制的數(shù)據(jù)在處理（這里不知道對不對，感覺是這樣的）

   $str = "這是一個字符串轉(zhuǎn)成十六進(jìn)制的測試";
        echo gettype($str);     // 顯示 string
        echo "<br/>";
        //為了得到一個二進(jìn)制的亂碼一樣的數(shù)據(jù)， 我們可以使用 hash函數(shù)得到
        //hash 第三個參數(shù)如果設(shè)為 true ,就可以得到一個二進(jìn)制數(shù)據(jù)
        $binary = hash("md5","123456",true);
        echo $binary;  // 顯示  ? ?9I?Y??V?W??>
        echo gettype($binary);  // 顯示 string 但這個明顯是一些亂碼

從上面的例子中，我們看到其實 $str 和 $binary 都是一個類型的（string，底層看他們都是二進(jìn)制數(shù)據(jù)），那么為什么一個可以顯示正常，一個顯示亂碼呢，
因為 $str 是我們輸入的中文字符，在字符碼表中一定是有想應(yīng)的編碼的，但是 $binary 就是一串無序的二進(jìn)制數(shù)，有的可能中文碼表中根本就沒有對應(yīng)的字符，所以就顯示成亂碼了
因為有的會顯示成亂碼，所以我們在傳輸?shù)臅r候，可以使用 base64來傳輸，把二進(jìn)制數(shù)據(jù)轉(zhuǎn)成 base64，傳輸，不會丟失數(shù)據(jù)

js php 把16進(jìn)制數(shù)據(jù)轉(zhuǎn)成 utf8 字符串

let str2 = "e8bf99e698afe4b880e4b8aae5ad97e7aca6e4b8b2e8bdace68890e58d81e585ade8bf9be588b6e79a84e6b58be8af95";
  let hextowords = cryptjs.enc.Hex.parse(str2);  //把十六進(jìn)制轉(zhuǎn)成 words (二進(jìn)制數(shù)組)
  let str2back = cryptjs.enc.Utf8.stringify(hextowords);  //把二進(jìn)制轉(zhuǎn)成utf8
  console.log(str2back);

php 驗證

       $hexstr = 'e8bf99e698afe4b880e4b8aae5ad97e7aca6e4b8b2e8bdace68890e58d81e585ade8bf9be588b6e79a84e6b58be8af95';
       $str = hex2bin($hexstr);
       echo $str;

有了上面的基礎(chǔ)，我們下面來做一個例子

由后端php 使用對稱加密，加密一段文字，然后返回給前端js , 同時要返回加密的 iv, 然后前端 js 使用 cryptojs 來進(jìn)行解密，看是否正確 js AES 加解密

cryptjs.AES.encrypt 參數(shù)中的 key 和 iv 都是以 wordsArray (二進(jìn)制) 傳入的，所以要明白 Utf8.parse 的方法
CryptoJS支持AES-128、AES-192和AES-256。它會根據(jù)你傳入的密鑰的大小來選擇變體。
所以下例中，我們的 key1 只有16位，所以會自動選用 aes-128

   //加密
  let secretStr = "這是一個測試AES";
  let key1 = cryptjs.enc.Utf8.parse("1234567812345678");  //十六位的
  let encrypted1 = cryptjs.AES.encrypt(secretStr,key1,{
    iv:cryptjs.enc.Utf8.parse("abcdefghijklmnop"),
    mode:cryptjs.mode.CBC,   //aes加密模式cbc  這個參數(shù)要前后端一至使用統(tǒng)一的加密模式
    padding:cryptjs.pad.Pkcs7  //使用 Pkcs7的方式填充   //這個php 加密時默認(rèn)就是這種方式
  });
  console.log(encrypted1);  //加密的結(jié)果是一個對象
  console.log(encrypted1.key);  //對象中有 key , iv 等信息
  console.log(cryptjs.enc.Utf8.stringify(encrypted1.key))  //打印出key 的utf8字符串
  console.log(encrypted1.toString())    //使用toString 方法可以得到加密后的字符串
//加密的結(jié)果是：  YzXNRYB6/mmevnBiZPLRPu4Knk+qUVNyhUKonAB2Wjg=  這明顯是一個base64格式的 
  //解密
  let result = cryptjs.AES.decrypt(encrypted1.toString(),key1,{
    iv:cryptjs.enc.Utf8.parse("abcdefghijklmnop"),
    mode:cryptjs.mode.CBC,
    padding:cryptjs.pad.Pkcs7
  })
  console.log(result);  //解密后得到的是一個 wordArray 二進(jìn)制的對象
  console.log(cryptjs.enc.Utf8.stringify(result));    //把二進(jìn)制對象轉(zhuǎn)成 utf8的字符
  //解密的結(jié)果是 這是一個測試AES

php AES 加解密

        $str =  "這是一個測試AES";
        $algo = "AES-128-CBC";
        dump(openssl_cipher_iv_length($algo));  //這里我們可以先看一下 AES-128-CBC 的所需要的  iv 長度 結(jié)果是16，所以我們自定義了一個iv 是16個字符
        $key = "1234567812345678";
        $iv = "abcdefghijklmnop";
        $encrypt = openssl_encrypt($str,$algo,$key,OPENSSL_RAW_DATA,$iv);
        echo $encrypt;  //顯示結(jié)果 YzXNRYB6/mmevnBiZPLRPu4Knk+qUVNyhUKonAB2Wjg=
        echo "<br/>";
        $decrypt = openssl_decrypt($encrypt,$algo,$key,OPENSSL_RAW_DATA,$iv);
        echo $decrypt;

從上面可以看到 js 和 php 加密的結(jié)果是一樣的，那么就說明前端js 和后端php也是可以互通加解密的

到此這篇關(guān)于js 加密解密 cryptojs（對稱加密庫）的文章就介紹到這了,更多相關(guān)js 加密解密 cryptojs內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: