前端加密JS庫--CryptoJS 使用指南

CryptoJS - GitHub文檔
CryptoJS - Bootcdn 在線地址

Base64 編碼

window.btoa 對字符串進(jìn)行 base64編碼(注意不能編碼中文);
winodw.atob 對 base64字符串 進(jìn)行解碼(對于包含中文的 base64編碼,不能正確解碼);

通常的方法是通過 window.btoa() 方法對源數(shù)據(jù)進(jìn)行編碼, 然后接收方使用 window.atob() 方法對其進(jìn)行解碼, 從而得到原數(shù)據(jù)掸茅。但是這種方法存在的問題是:window.btoa() 不支持中文, window.atob() 轉(zhuǎn)換含有中文的 base64編碼 的時候中文部分會變?yōu)閬y碼椅邓。另一個存在的問題是解碼github的readme數(shù)據(jù)的時候也是亂碼。經(jīng)過查找相關(guān)資料發(fā)現(xiàn)了 Base64的編碼與解碼轉(zhuǎn)的最優(yōu)方案:

// 編碼
function utf8_to_b64(str) {
    return window.btoa(unescape(encodeURIComponent(str)));
}

// 解碼
function b64_to_utf8(str) {
    return decodeURIComponent(escape(window.atob(str)));
}

// Usage:
utf8_to_b64('? à la mode'); // 4pyTIMOgIGxhIG1vZGU=
b64_to_utf8('4pyTIMOgIGxhIG1vZGU='); // "? à la mode"

utf8_to_b64('I \u2661 Unicode!'); // SSDimaEgVW5pY29kZSE=
b64_to_utf8('SSDimaEgVW5pY29kZSE='); // "I ? Unicode!"

utf8_to_b64('我愛中國'); // 5oiR54ix5Lit5Zu9
b64_to_utf8('SSDimaEgVW5pY29kZSE='); // "我愛中國"

utf8_to_b64(123456); // MTIzNDU2
b64_to_utf8("MTIzNDU2"); // 123456
使用CryptoJS處理base64加密解密(常用)
//base64加密
function base64_encode(code){
    var str = CryptoJS.enc.Utf8.parse(code);
    return CryptoJS.enc.Base64.stringify(str);
}
//base64解密
function base64_decode(code){
    var words = CryptoJS.enc.Base64.parse(code);
    return words.toString(CryptoJS.enc.Utf8)
}
AES 加密

安裝

$ npm install crypto-js

aes加密: crypto.js

import CryptoJS from "crypto-js";

const key = CryptoJS.enc.Utf8.parse("1234567890000000"); //16位
const iv = CryptoJS.enc.Utf8.parse("1234567890000000");

export default {
  //aes加密
  encrypt(word) {
    let encrypted = "";
    if (typeof word == "string") {
      const srcs = CryptoJS.enc.Utf8.parse(word);
      encrypted = CryptoJS.AES.encrypt(srcs, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
      });
    } else if (typeof word == "object") {
      //對象格式的轉(zhuǎn)成json字符串
      const data = JSON.stringify(word);
      const srcs = CryptoJS.enc.Utf8.parse(data);
      encrypted = CryptoJS.AES.encrypt(srcs, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
      });
    }
    return encrypted.ciphertext.toString();
  },
  // aes解密
  decrypt(word) {
    const encryptedHexStr = CryptoJS.enc.Hex.parse(word);
    const srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
    const decrypt = CryptoJS.AES.decrypt(srcs, key, {
      iv: iv,
      mode: CryptoJS.mode.CBC,
      padding: CryptoJS.pad.Pkcs7
    });
    const decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
    return decryptedStr.toString();
  }
};

使用

import Crypto from "@/utils/crypto";

Crypto.encrypt("? à la mode"); // b915bf40c4795227488da86978f55fce
Crypto.decrypt(userPwd); // "? à la mode"

Crypto.encrypt("? à la mode"); // 6317313288b32bf1909f165ec530d60a
Crypto.decrypt(userPwd); // "I ? Unicode!"

Crypto.encrypt("我愛中國"); // 1898a34273855f55255437aa22f87504
Crypto.decrypt(userPwd); // "我愛中國"

Crypto.encrypt("123456"); // dd7a6c4edc68e683b700a7a2846a2bc6
Crypto.decrypt(userPwd); // "123456"
前后端數(shù)據(jù)通信參數(shù)加密

加密代碼實現(xiàn):

項目中需要將所有傳到后臺的參數(shù)分5個步驟處理:

第一步:排序

第二步:將排序好的參數(shù)進(jìn)行MD5加密作為接口的簽名

第三步:將排序好的參數(shù)和接口簽名拼接上進(jìn)行AES加密

第四部:將AES加密后的密文Base64加密

第五步:將最終的密文encodeURIComponent昧狮;

代碼如下:

function encryption(data) {
    let strs=[];
    for(let i in data){
        strs.push(i+'='+data[i]);
    }
    strs.sort();  // 數(shù)組排序
    strs=strs.join('&'); // 數(shù)組變字符串
    let endData=strs+'&sign='+CryptoJS.MD5(strs+'ADfj3kcadc2349akvm1CPFFCD84f').toString(); // MD5加密
    let key = CryptoJS.enc.Utf8.parse("0880076B18D7EE81"); // 加密秘鑰
    let iv = CryptoJS.enc.Utf8.parse("CB3EC842D7C69578");  //  矢量
    let encryptResult = CryptoJS.AES.encrypt(endData,key, {   //  AES加密
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7  // 后臺用的是pad.Pkcs5,前臺對應(yīng)為Pkcs7
    });
    return encodeURIComponent(CryptoJS.enc.Base64.stringify(encryptResult.ciphertext));  // Base64加密encode;
}

加密最終的密文拼接在接口地址后面景馁,請求接口。后臺返回的數(shù)據(jù)也是密文陵且;解密方法如下:

function decryption(data) {
    let key = CryptoJS.enc.Utf8.parse("0880076B18D7EE81");  // 加密秘鑰
    let iv = CryptoJS.enc.Utf8.parse("CB3EC842D7C69578");   //  矢量
    let baseResult=CryptoJS.enc.Base64.parse(data);   // Base64解密
    let ciphertext=CryptoJS.enc.Base64.stringify(baseResult);     // Base64解密
    let decryptResult = CryptoJS.AES.decrypt(ciphertext,key, {    //  AES解密
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
    });
    let resData=decryptResult.toString(CryptoJS.enc.Utf8).toString();

    return JSON.parse(resData);
}

備注:因為后臺返回的數(shù)據(jù)是json格式裁僧;所以做種return的時候使用JSON.parse();如果解密的目標(biāo)為字符串,比如說需要解密的是一個加密的token值慕购。那就要做相應(yīng)的改動:

function decryption(data) {
    let key = CryptoJS.enc.Utf8.parse("0880076B18D7EE81");  // 加密秘鑰
    let iv = CryptoJS.enc.Utf8.parse("CB3EC842D7C69578");   //  矢量
    let baseResult=CryptoJS.enc.Base64.parse(data);   // Base64解密
    let ciphertext=CryptoJS.enc.Base64.stringify(baseResult);     // Base64解密
    let decryptResult = CryptoJS.AES.decrypt(ciphertext,key, {    //  AES解密
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
    });
    return CryptoJS.enc.Utf8.stringify(decryptResult);
}

原文出處:http://www.sosout.com/2018/09/05/cryptojs-tutorial.html

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市茬底,隨后出現(xiàn)的幾起案子沪悲,更是在濱河造成了極大的恐慌,老刑警劉巖阱表,帶你破解...
    沈念sama閱讀 218,546評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件殿如,死亡現(xiàn)場離奇詭異,居然都是意外死亡最爬,警方通過查閱死者的電腦和手機(jī)涉馁,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,224評論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來爱致,“玉大人烤送,你說我怎么就攤上這事】访酰” “怎么了帮坚?”我有些...
    開封第一講書人閱讀 164,911評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長互艾。 經(jīng)常有香客問我试和,道長,這世上最難降的妖魔是什么纫普? 我笑而不...
    開封第一講書人閱讀 58,737評論 1 294
  • 正文 為了忘掉前任阅悍,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘节视。我一直安慰自己晦墙,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,753評論 6 392
  • 文/花漫 我一把揭開白布肴茄。 她就那樣靜靜地躺著晌畅,像睡著了一般。 火紅的嫁衣襯著肌膚如雪寡痰。 梳的紋絲不亂的頭發(fā)上抗楔,一...
    開封第一講書人閱讀 51,598評論 1 305
  • 那天拦坠,我揣著相機(jī)與錄音连躏,去河邊找鬼。 笑死贞滨,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的勺良。 我是一名探鬼主播骄噪,決...
    沈念sama閱讀 40,338評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼事甜,長吁一口氣:“原來是場噩夢啊……” “哼逻谦!你這毒婦竟也來了陪蜻?” 一聲冷哼從身側(cè)響起邦马,我...
    開封第一講書人閱讀 39,249評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎囱皿,沒想到半個月后勇婴,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,696評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡嘱腥,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,888評論 3 336
  • 正文 我和宋清朗相戀三年耕渴,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片齿兔。...
    茶點(diǎn)故事閱讀 40,013評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡橱脸,死狀恐怖础米,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情添诉,我是刑警寧澤屁桑,帶...
    沈念sama閱讀 35,731評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站栏赴,受9級特大地震影響蘑斧,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜须眷,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,348評論 3 330
  • 文/蒙蒙 一竖瘾、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧花颗,春花似錦捕传、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,929評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至棒呛,卻和暖如春聂示,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背条霜。 一陣腳步聲響...
    開封第一講書人閱讀 33,048評論 1 270
  • 我被黑心中介騙來泰國打工催什, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人宰睡。 一個月前我還...
    沈念sama閱讀 48,203評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像气筋,于是被迫代替她去往敵國和親拆内。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,960評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 之前的項目中接觸過一些加密的方法宠默,也沒有太仔細(xì)的進(jìn)行記錄和研究麸恍。最近在寫SDK時,加密模塊的占比相當(dāng)之大搀矫;借此時機(jī)...
    過半_e764閱讀 575評論 0 0
  • Swift1> Swift和OC的區(qū)別1.1> Swift沒有地址/指針的概念1.2> 泛型1.3> 類型嚴(yán)謹(jǐn) 對...
    cosWriter閱讀 11,103評論 1 32
  • 首先羅列一些知識點(diǎn): 1.加密算法通常分為對稱性加密算法和非對稱性加密算法:對于對稱性加密算法抹沪,信息接收雙方都需事...
    JonesCxy閱讀 1,386評論 2 4
  • 為了防止我們的數(shù)據(jù)泄露麦到,我們往往會對數(shù)據(jù)進(jìn)行加密,特別是敏感數(shù)據(jù)欠肾,我們要求的安全性更高瓶颠。下面將介紹幾種常用的加密算...
    Chauncey_Chen閱讀 2,919評論 0 20
  • 1.數(shù)據(jù)安全 01 攻城利器:Charles(公司中一般都使用該工具來抓包,并做網(wǎng)絡(luò)測試) 注意:Charles在...
    Lucky丶晴閱讀 1,403評論 0 9