前言
上篇文章我們介紹了國產SM4加密演算法的後端java實現方案。沒有看過的小夥伴可以看一下這篇文章。
https://www.cnblogs.com/jichi/p/12907453.html
本篇文章將介紹前端vue的解決方案,和java後端互相輝映。
說起前端的vue,真的是一個非常好用的框架,vue也是現在web專案的主流前端開發方案。所以基於vue的sm4加密實現方案是十分有必要掌握的。
國產SM4加密解密演算法概念介紹
SMS4演算法是在國內廣泛使用的WAPI無線網路標準中使用的加密演算法,是一種32輪的迭代非平衡Feistel結構的分組加密演算法,其金鑰長度和分組長度均為128。SMS4演算法的加解密過程中使用的演算法是完全相同的,唯一不同點在於該演算法的解密金鑰是由它的加密金鑰進行逆序變換後得到的。
SMS4分組加密演算法是中國無線標準中使用的分組加密演算法,在2012年已經被國家商用密碼管理局確定為國家密碼行業標準,標準編號GM/T 0002-2012並且改名為SM4演算法,與SM2橢圓曲線公鑰密碼演算法,SM3密碼雜湊演算法共同作為國家密碼的行業標準,在我國密碼行業中有著極其重要的位置。
SMS4演算法的分組長度為128bit,金鑰長度也是128bit。加解密演算法均採用32輪非平衡Feistel迭代結構,該結構最先出現在分組密碼LOKI的金鑰擴充套件演算法中。SMS4通過32輪非線性迭代後加上一個反序變換,這樣只需要解密金鑰是加密金鑰的逆序,就能使得解密演算法與加密演算法保持一致。SMS4加解密演算法的結構完全相同,只是在使用輪金鑰時解密金鑰是加密金鑰的逆序。
S盒是一種利用非線性變換構造的分組密碼的一個元件,主要是為了實現分組密碼過程中的混淆的特性和設計的。SMS4演算法中的S盒在設計之初完全按照歐美分組密碼的設計標準進行,它採用的方法是能夠很好抵抗差值攻擊的仿射函式逆對映覆合法。
SM4加密演算法應用場景
SM4常用於政府系統的資料傳輸加密,比如當我們前端向後臺傳引數的時候,可以使用此演算法。對引數的資料進行加密,然後後臺對加密的資料進行解密再儲存到資料庫中,保證資料傳輸過程中,不受洩露。
本次提供的方案不僅提供sm4的加密解密,還提供了md5演算法的完整性防篡改校驗。
vue的加密方案實現流程
針對於我們的前端vue來說,我們通過axios來進行請求和響應,在我們vue的專案中,必然有一個request.js檔案,用於封裝request和respone。那麼我們通過sm4的工具類。攔截所有的request請求進行加密,使用md5對引數進行加密,作為引數的一種防篡改表示,放在request的請求頭中,供後臺進行校驗。在我們response的時候,同樣進行攔截回應,將回應的資料的加密值進行解析。並使用md5重新加密,使我們獲得的資料防篡改。
基於vue的sm4加密解密工具
我們先介紹一下vue的加密解密工具類。通過呼叫工具類的方法可以直接對資料進行加密解密,配合request和response即可實現。我們貼出下面的工具類程式碼,大家可以直接使用。
const SboxTable = [
[0xd6, 0x90, 0xe9, 0xfe, 0xcc, 0xe1, 0x3d, 0xb7, 0x16, 0xb6, 0x14, 0xc2, 0x28, 0xfb, 0x2c, 0x05],
[0x2b, 0x67, 0x9a, 0x76, 0x2a, 0xbe, 0x04, 0xc3, 0xaa, 0x44, 0x13, 0x26, 0x49, 0x86, 0x06, 0x99],
[0x9c, 0x42, 0x50, 0xf4, 0x91, 0xef, 0x98, 0x7a, 0x33, 0x54, 0x0b, 0x43, 0xed, 0xcf, 0xac, 0x62],
[0xe4, 0xb3, 0x1c, 0xa9, 0xc9, 0x08, 0xe8, 0x95, 0x80, 0xdf, 0x94, 0xfa, 0x75, 0x8f, 0x3f, 0xa6],
[0x47, 0x07, 0xa7, 0xfc, 0xf3, 0x73, 0x17, 0xba, 0x83, 0x59, 0x3c, 0x19, 0xe6, 0x85, 0x4f, 0xa8],
[0x68, 0x6b, 0x81, 0xb2, 0x71, 0x64, 0xda, 0x8b, 0xf8, 0xeb, 0x0f, 0x4b, 0x70, 0x56, 0x9d, 0x35],
[0x1e, 0x24, 0x0e, 0x5e, 0x63, 0x58, 0xd1, 0xa2, 0x25, 0x22, 0x7c, 0x3b, 0x01, 0x21, 0x78, 0x87],
[0xd4, 0x00, 0x46, 0x57, 0x9f, 0xd3, 0x27, 0x52, 0x4c, 0x36, 0x02, 0xe7, 0xa0, 0xc4, 0xc8, 0x9e],
[0xea, 0xbf, 0x8a, 0xd2, 0x40, 0xc7, 0x38, 0xb5, 0xa3, 0xf7, 0xf2, 0xce, 0xf9, 0x61, 0x15, 0xa1],
[0xe0, 0xae, 0x5d, 0xa4, 0x9b, 0x34, 0x1a, 0x55, 0xad, 0x93, 0x32, 0x30, 0xf5, 0x8c, 0xb1, 0xe3],
[0x1d, 0xf6, 0xe2, 0x2e, 0x82, 0x66, 0xca, 0x60, 0xc0, 0x29, 0x23, 0xab, 0x0d, 0x53, 0x4e, 0x6f],
[0xd5, 0xdb, 0x37, 0x45, 0xde, 0xfd, 0x8e, 0x2f, 0x03, 0xff, 0x6a, 0x72, 0x6d, 0x6c, 0x5b, 0x51],
[0x8d, 0x1b, 0xaf, 0x92, 0xbb, 0xdd, 0xbc, 0x7f, 0x11, 0xd9, 0x5c, 0x41, 0x1f, 0x10, 0x5a, 0xd8],
[0x0a, 0xc1, 0x31, 0x88, 0xa5, 0xcd, 0x7b, 0xbd, 0x2d, 0x74, 0xd0, 0x12, 0xb8, 0xe5, 0xb4, 0xb0],
[0x89, 0x69, 0x97, 0x4a, 0x0c, 0x96, 0x77, 0x7e, 0x65, 0xb9, 0xf1, 0x09, 0xc5, 0x6e, 0xc6, 0x84],
[0x18, 0xf0, 0x7d, 0xec, 0x3a, 0xdc, 0x4d, 0x20, 0x79, 0xee, 0x5f, 0x3e, 0xd7, 0xcb, 0x39, 0x48],
];
const FK = [0xa3b1bac6, 0x56aa3350, 0x677d9197, 0xb27022dc];
const CK = [
0x00070e15, 0x1c232a31, 0x383f464d, 0x545b6269,
0x70777e85, 0x8c939aa1, 0xa8afb6bd, 0xc4cbd2d9,
0xe0e7eef5, 0xfc030a11, 0x181f262d, 0x343b4249,
0x50575e65, 0x6c737a81, 0x888f969d, 0xa4abb2b9,
0xc0c7ced5, 0xdce3eaf1, 0xf8ff060d, 0x141b2229,
0x30373e45, 0x4c535a61, 0x686f767d, 0x848b9299,
0xa0a7aeb5, 0xbcc3cad1, 0xd8dfe6ed, 0xf4fb0209,
0x10171e25, 0x2c333a41, 0x484f565d, 0x646b7279,
];
const SM4_ENCRYPT = 1;
const SM4_DECRYPT = 0;
function sm4_context() {
this.mode = 0;
this.sk = [];
}
function GET_ULONG_BE(n, b, i) {
return (b[i] << 24) | (b[i + 1] << 16) | (b[i + 2]) << 8 | (b[i + 3]);
}
function PUT_ULONG_BE(n, b, i) {
b[i] = n >>> 24;
b[i + 1] = n >>> 16;
b[i + 2] = n >>> 8;
b[i + 3] = n;
}
function ROTL(x, n) {
const a = (x & 0xFFFFFFFF) << n;
const b = x >>> (32 - n);
return a | b;
}
function sm4Sbox(n) {
const l = n >>> 4;
const r = n % 16;
return SboxTable[l][r];
}
function sm4Lt(ka) {
let bb = 0;
let c = 0;
const a = new Uint8Array(4);
const b = new Array(4);
PUT_ULONG_BE(ka, a, 0);
b[0] = sm4Sbox(a[0]);
b[1] = sm4Sbox(a[1]);
b[2] = sm4Sbox(a[2]);
b[3] = sm4Sbox(a[3]);
bb = GET_ULONG_BE(bb, b, 0);
c = bb ^ (ROTL(bb, 2)) ^ (ROTL(bb, 10)) ^ (ROTL(bb, 18)) ^ (ROTL(bb, 24));
return c;
}
function sm4F(x0, x1, x2, x3, rk) {
return (x0 ^ sm4Lt(x1 ^ x2 ^ x3 ^ rk));
}
function sm4CalciRK(ka) {
let bb = 0;
let rk = 0;
const a = new Uint8Array(4);
const b = new Array(4);
PUT_ULONG_BE(ka, a, 0);
b[0] = sm4Sbox(a[0]);
b[1] = sm4Sbox(a[1]);
b[2] = sm4Sbox(a[2]);
b[3] = sm4Sbox(a[3]);
bb = GET_ULONG_BE(bb, b, 0);
rk = bb ^ (ROTL(bb, 13)) ^ (ROTL(bb, 23));
return rk;
}
function sm4_setkey(SK, key) {
const MK = new Array(4);
const k = new Array(36);
let i = 0;
MK[0] = GET_ULONG_BE(MK[0], key, 0);
MK[1] = GET_ULONG_BE(MK[1], key, 4);
MK[2] = GET_ULONG_BE(MK[2], key, 8);
MK[3] = GET_ULONG_BE(MK[3], key, 12);
k[0] = MK[0] ^ FK[0];
k[1] = MK[1] ^ FK[1];
k[2] = MK[2] ^ FK[2];
k[3] = MK[3] ^ FK[3];
for (; i < 32; i++) {
k[i + 4] = k[i] ^ (sm4CalciRK(k[i + 1] ^ k[i + 2] ^ k[i + 3] ^ CK[i]));
SK[i] = k[i + 4];
}
}
function sm4_one_round(sk, input, output) {
let i = 0;
const ulbuf = new Array(36);
ulbuf[0] = GET_ULONG_BE(ulbuf[0], input, 0);
ulbuf[1] = GET_ULONG_BE(ulbuf[1], input, 4);
ulbuf[2] = GET_ULONG_BE(ulbuf[2], input, 8);
ulbuf[3] = GET_ULONG_BE(ulbuf[3], input, 12);
while (i < 32) {
ulbuf[i + 4] = sm4F(ulbuf[i], ulbuf[i + 1], ulbuf[i + 2], ulbuf[i + 3], sk[i]);
i++;
}
PUT_ULONG_BE(ulbuf[35], output, 0);
PUT_ULONG_BE(ulbuf[34], output, 4);
PUT_ULONG_BE(ulbuf[33], output, 8);
PUT_ULONG_BE(ulbuf[32], output, 12);
}
function sm4_setkey_enc(ctx, key) {
ctx.mode = SM4_ENCRYPT;
sm4_setkey(ctx.sk, key);
}
function sm4_setkey_dec(ctx, key) {
let i; let j;
ctx.mode = SM4_ENCRYPT;
sm4_setkey(ctx.sk, key);
for (i = 0; i < 16; i++) {
j = ctx.sk[31 - i];
ctx.sk[31 - i] = ctx.sk[i];
ctx.sk[i] = j;
}
}
function sm4_crypt_ecb(ctx, mode, length, input, output) {
let index = 0;
while (length > 0) {
const oneInput = input.slice(index, index + 16);
const oneOutput = new Uint8Array(16);
sm4_one_round(ctx.sk, oneInput, oneOutput);
for (let i = 0; i < 16; i++) {
output[index + i] = oneOutput[i];
}
index += 16;
length -= 16;
}
}
function sm4_crypt_cbc(ctx, mode, length, iv, input, output) {
let i;
const temp = new Array(16);
let index = 0;
if (mode == SM4_ENCRYPT) {
while (length > 0) {
const oneInput = input.slice(index, index + 16);
const oneOutput = new Array(16);
for (i = 0; i < 16; i++) {
oneOutput[i] = oneInput[i] ^ iv[i];
}
sm4_one_round(ctx.sk, oneOutput, oneOutput);
for (i = 0; i < 16; i++) {
iv[i] = oneOutput[i];
output[index + i] = oneOutput[i];
}
index += 16;
length -= 16;
}
} else /* SM4_DECRYPT */ {
while (length > 0) {
const oneInput = input.slice(index, index + 16);
const oneOutput = new Array(16);
index += 16;
for (i = 0; i < 16; i++) {
temp[i] = oneInput[i];
}
sm4_one_round(ctx.sk, oneInput, oneOutput);
for (i = 0; i < 16; i++) {
oneOutput[i] = oneOutput[i] ^ iv[i];
output[index + i] = oneOutput[i];
}
for (i = 0; i < 16; i++) {
iv[i] = temp[i];
}
index += 16;
length -= 16;
}
}
}
function strfix(str, len) {
let length = len - str.length;
while (length-- > 0) {
str = `0${str}`;
}
return str;
}
function HEXStrXOR(str1, str2) {
const buf1 = hex2Array(str1);
const buf2 = hex2Array(str2);
let result = '';
for (let i = 0; i < 16; i++) {
result += strfix((buf1[i] ^ buf2[i]).toString(16).toUpperCase(), 2);
}
return result;
}
function hex2Array(str) {
const len = str.length / 2;
let substr = '';
const result = new Array(len);
for (let i = 0; i < len; i++) {
substr = str.slice(2 * i, 2 * (i + 1));
result[i] = parseInt(substr, 16) || 0;
}
return result;
}
const stringToByteArray = function (str) {
const bytes = new Array();
let len; let c;
len = str.length;
for (let i = 0; i < len; i++) {
c = str.charCodeAt(i);
if (c >= 0x010000 && c <= 0x10FFFF) {
bytes.push(((c >> 18) & 0x07) | 0xF0);
bytes.push(((c >> 12) & 0x3F) | 0x80);
bytes.push(((c >> 6) & 0x3F) | 0x80);
bytes.push((c & 0x3F) | 0x80);
} else if (c >= 0x000800 && c <= 0x00FFFF) {
bytes.push(((c >> 12) & 0x0F) | 0xE0);
bytes.push(((c >> 6) & 0x3F) | 0x80);
bytes.push((c & 0x3F) | 0x80);
} else if (c >= 0x000080 && c <= 0x0007FF) {
bytes.push(((c >> 6) & 0x1F) | 0xC0);
bytes.push((c & 0x3F) | 0x80);
} else {
bytes.push(c & 0xFF);
}
}
return bytes;
};
const hexStringToByteArray = function (str) {
let pos = 0;
let len = str.length;
if (len % 2 !== 0) {
return str;
}
len /= 2;
const arrBytes = new Array();
for (let i = 0; i < len; i++) {
const s = str.substr(pos, 2);
const v = parseInt(s, 16);
arrBytes.push(v);
pos += 2;
}
return arrBytes;
};
const byteArrayToHexString = function (arr) {
let str = '';
for (let i = 0; i < arr.length; i++) {
let tmp = arr[i].toString(16);
if (tmp.length == 1) {
tmp = `0${tmp}`;
}
str += tmp;
}
return str;
};
const byteArrayToString = function (arr) {
if (typeof arr === 'string') {
return arr;
}
let str = '';
const _arr = arr;
for (let i = 0; i < _arr.length; i++) {
const one = _arr[i].toString(2);
const v = one.match(/^1+?(?=0)/);
if (v && one.length == 8) {
const bytesLength = v[0].length;
let store = _arr[i].toString(2).slice(7 - bytesLength);
for (let st = 1; st < bytesLength; st++) {
store += _arr[st + i].toString(2).slice(2);
}
str += String.fromCharCode(parseInt(store, 2));
i += bytesLength - 1;
} else {
str += String.fromCharCode(_arr[i]);
}
}
return str;
};
function SM4CryptECBWithPKCS7Padding(data, sCryptFlag) {
const szSM4Key = 'cc9368581322479ebf3e79348a2757d9';
if (szSM4Key.length !== 32) {
// console.log("傳入金鑰[" + szSM4Key + "]長度不為32位");
return '';
}
let szData = null;
if (sCryptFlag === SM4_ENCRYPT) { // 加密
szData = stringToByteArray(data);
} else { // 解密
szData = hexStringToByteArray(data);
}
const len = szData.length;
if (sCryptFlag === SM4_ENCRYPT) { // 加密,進行填充PKCS7Padding
const p = 16 - len % 16;
for (let i = 0; i < p; i++) {
szData.push(p);
}
}
const ctx = new sm4_context();
const lpbKey = hex2Array(szSM4Key);
if (sCryptFlag === SM4_ENCRYPT) {
sm4_setkey_enc(ctx, lpbKey); // 加密
} else {
sm4_setkey_dec(ctx, lpbKey); // 解密
}
const pbyCryptResult = new Array(szData.length);
sm4_crypt_ecb(ctx, sCryptFlag, szData.length, szData, pbyCryptResult);
if (sCryptFlag === SM4_DECRYPT) { // 解密,去除填充PKCS7Padding
const p = pbyCryptResult[pbyCryptResult.length - 1];
for (let i = 0; i < p; i++) {
pbyCryptResult.pop();
}
}
if (sCryptFlag === SM4_ENCRYPT) { // 加密
return byteArrayToHexString(pbyCryptResult);
} // 解密
return byteArrayToString(pbyCryptResult);
}
export function encrypt(inArray) {
return SM4CryptECBWithPKCS7Padding(inArray, 1);
}
export function decrypt(inArray) {
return SM4CryptECBWithPKCS7Padding(inArray, 0);
}
如上就是我們sm4的加密解密演算法。其中重要的方法就是SM4CryptECBWithPKCS7Padding,這裡我們要傳入兩個值,第一個值是我們加密或者要解密的值,第二個是標誌是加密還是解密。當為1的時候,就是加密,當為0的時候就是解密。
下面介紹一下md5加密的防篡改演算法。
md5的加密演算法
md5加密我們直接採用模組crypto,針對於我們的vue專案,我們先將這個module進行安裝。
cnpm install crypto
安裝完成後,在我們需要進行md5加密的位置,進行加密,我們在這裡是在request中進行加密。下面介紹一下md5加密的使用方式。
import crypto from 'crypto';
const md5Hash = crypto.createHash('md5');
const dataJson = JSON.stringify(data);
md5Hash.update(dataJson);
md5Data = md5Hash.digest('hex');
如上我們就得到了引數的md5值。在對於後端的時候,要注意一個大坑,前端的這種加密方式,如果開頭為0,並不會省略,如果後臺使用bigInteger的方式,會導致後端的0直接被省略。導致md5值不一樣,所以後端的md5校驗推薦使用Integer的形式。
public class Md5Utils {
public static String getMD5String(String str) {
try {
MessageDigest md = MessageDigest.getInstance("md5");
md.update(str.getBytes());
byte s[] = md.digest();
String result = "";
for (int i = 0; i < s.length; i++) {
result += Integer.toHexString((0x000000FF & s[i]) | 0xFFFFFF00).substring(6);
}
return result;
} catch (Exception e) {
e.printStackTrace();
return null;
}
}
}
基於vue的例項實戰程式碼
全域性變數的配置和需要加密的url
我們定義這樣的兩個變數。全域性變數用於是否進行加密1是進行加密,0是進行解密。
在encryptUrl 中key值配置為要加密的url,value值設定成屬性必須加密name屬性,sex屬性不加密。
const isEncrypt = '1'; // 1是加密 0是不加密
// 將所有要加密的url和key放在一起
const encryptUrl = {
[/test/save`]: ['name'],
};
針對於加密解密進行函式的封裝
上面已經有了可以使用的工具類,我們對此進行遞迴的函式封裝。
function encryptValue(pObj, pParamKeys, pDecrypt) {
if (pObj) {
if (Array.isArray(pObj)) {
let i = pObj.length;
while (i--) {
encryptValue(pObj[i], pParamKeys, pDecrypt);
}
} else if (typeof (pObj) === 'object') {
if (pObj.constructor !== RegExp) {
for (const k in pObj) {
if (pObj.hasOwnProperty(k)) {
if (typeof (pObj[k]) === 'object') {
encryptValue(pObj[k], pParamKeys, pDecrypt);
} else if (pParamKeys.indexOf(k) !== -1 && pObj[k]) {
if (pDecrypt === true) {
// 解密
pObj[k] = decrypt(pObj[k]);
} else {
pObj[k] = encrypt(pObj[k]);
}
}
}
}
}
}
}
}
request的攔截方式
我們首先攔截所有請求的request的地方,進行sm4加密解密。程式碼如下:
axios.interceptors.request.use(
(config) => {
// 加密程式碼開始-------------------
// 獲取到當前請求的所有值
const paramData = lodash.cloneDeep(config.data);
// 獲取到加密的url
const urlAddr = config.url;
let md5Data = '';
if (paramData && isEncrypt === '1') {
let paramKeys = [];
for (const key in encryptUrl) {
if (encryptUrl.hasOwnProperty(key)) {
if (urlAddr && urlAddr.startsWith(key)) {
paramKeys = encryptUrl[key];
break;
}
}
}
// 獲取到所有要加密的key值。
if (paramKeys && paramKeys.length > 0) {
let SM4cloneData = paramData;
if (typeof (SM4cloneData) === 'string') {
try {
const dataStr = $.parseJSON(SM4cloneData);
encryptValue(dataStr, paramKeys);
SM4cloneData = JSON.stringify(dataStr);
} catch (e) {
console.log(e);
}
} else {
encryptValue(SM4cloneData, paramKeys);
}
}
const md5Hash = crypto.createHash('md5');
const dataJson = JSON.stringify(config.data);
md5Hash.update(dataJson);
md5Data = md5Hash.digest('hex');
config.data = paramData;
}
config.headers = {
'md5': md5Data,
};
return config;
}
);
response的攔截方式
針對於response我們要對配置的url進行解密。
axios.interceptors.response.use(
(response) => {
// 開始解密
// 獲取到當前請求的所有值
const cloneData = lodash.cloneDeep(response.data);
// 獲取到解密的url
const urlAddr = response.url;
// 對paramData進行加密,此時先直接加密做試驗。
if (cloneData && isEncrypt === '1') {
let paramKeys = [];
for (const key in encryptUrl) {
if (encryptUrl.hasOwnProperty(key)) {
if (urlAddr && urlAddr.startsWith(key)) {
paramKeys = encryptUrl[key];
break;
}
}
}
// 獲取到所有要解密的key值。
if (paramKeys && paramKeys.length > 0) {
let SM4cloneData;
if (Array.isArray(cloneData)) {
SM4cloneData = cloneData.data;
} else if (typeof (cloneData) === 'object') {
SM4cloneData = cloneData;
}
if (typeof (SM4cloneData) === 'string') {
try {
const dataStr = $.parseJSON(SM4cloneData);
encryptValue(dataStr, paramKeys, true);
SM4cloneData = JSON.stringify(dataStr);
} catch (e) {
console.log(e);
}
} else {
encryptValue(SM4cloneData, paramKeys, true);
}
const md5Hash = crypto.createHash('md5');
const dataJson = JSON.stringify(cloneData);
md5Hash.update(dataJson);
const md5Data = md5Hash.digest('hex');
if (response.headers.md5.hasOwnProperty('md5')) {
if (md5Data === response.headers.md5) {
alert("md5完整性校驗錯誤");
return;
}
}
}
return response.data;
}
return response.data;
},
);
總結
支援基於vue的國產sm4加密解密方案到此結束。文中難免有不足之處,希望大家批評指正。