前端 base64加密 及 md5加密
阿新 • • 發佈：2022-05-11
js加密的好處:
1.用js對私密資訊加密可避免在網路中傳輸明文資訊,被人擷取資料包而造成資料洩露。
2.避免快取中自動快取密碼.比如在使用谷歌瀏覽器登陸時,輸入的使用者名稱和密碼會自動快取,下次登陸時無需輸入密碼就可以實現登陸,這樣就給別人留下漏洞,當別人用你電腦登陸或把input的type改為test 那麼你的密碼就洩露了.使用js加密時,快取的加密後的密文,用密文做密碼登陸是不成功的,即使洩露也是洩露的密文,對密碼不會造成威脅.缺點是每次登陸時都要手動輸入密碼,較麻煩。
3.使用js加密,減少了伺服器加密時的資源消耗,從理論上提高了伺服器的效能。
為了安全,很有必要再做伺服器端的加密.無論從理論還是實際,兩道門比一道門要安全些.至少給攻擊者造成了一個障礙。
MD5
MD5.js 是通過前臺 js 加密的方式對密碼等私密資訊進行加密的工具。
utils / md5.js
let md5 var rotateLeft = function(lValue, iShiftBits) { return (lValue << iShiftBits) | (lValue >>> (32 - iShiftBits)) } var addUnsigned = function(lX, lY) { var lX4, lY4, lX8, lY8, lResult lX8 = lX & 0x80000000 lY8 = lY & 0x80000000 lX4加密： md5(username + ':' + pwd, true) 使用MD5加密將加密內容傳到後臺進行鑑權。= lX & 0x40000000 lY4 = lY & 0x40000000 lResult = (lX & 0x3fffffff) + (lY & 0x3fffffff) if (lX4 & lY4) return lResult ^ 0x80000000 ^ lX8 ^ lY8 if (lX4 | lY4) { if (lResult & 0x40000000) return lResult ^ 0xc0000000 ^ lX8 ^ lY8 else return lResult ^ 0x40000000 ^ lX8 ^ lY8 } else { return lResult ^ lX8 ^ lY8 } }var F = function(x, y, z) { return (x & y) | (~x & z) } var G = function(x, y, z) { return (x & z) | (y & ~z) } var H = function(x, y, z) { return x ^ y ^ z } var I = function(x, y, z) { return y ^ (x | ~z) } var FF = function(a, b, c, d, x, s, ac) { a = addUnsigned(a, addUnsigned(addUnsigned(F(b, c, d), x), ac)) return addUnsigned(rotateLeft(a, s), b) } var GG = function(a, b, c, d, x, s, ac) { a = addUnsigned(a, addUnsigned(addUnsigned(G(b, c, d), x), ac)) return addUnsigned(rotateLeft(a, s), b) } var HH = function(a, b, c, d, x, s, ac) { a = addUnsigned(a, addUnsigned(addUnsigned(H(b, c, d), x), ac)) return addUnsigned(rotateLeft(a, s), b) } var II = function(a, b, c, d, x, s, ac) { a = addUnsigned(a, addUnsigned(addUnsigned(I(b, c, d), x), ac)) return addUnsigned(rotateLeft(a, s), b) } var convertToWordArray = function(string) { var lWordCount var lMessageLength = string.length var lNumberOfWordsTempOne = lMessageLength + 8 var lNumberOfWordsTempTwo = (lNumberOfWordsTempOne - (lNumberOfWordsTempOne % 64)) / 64 var lNumberOfWords = (lNumberOfWordsTempTwo + 1) * 16 var lWordArray = Array(lNumberOfWords - 1) var lBytePosition = 0 var lByteCount = 0 while (lByteCount < lMessageLength) { lWordCount = (lByteCount - (lByteCount % 4)) / 4 lBytePosition = (lByteCount % 4) * 8 lWordArray[lWordCount] = lWordArray[lWordCount] | (string.charCodeAt(lByteCount) << lBytePosition) lByteCount++ } lWordCount = (lByteCount - (lByteCount % 4)) / 4 lBytePosition = (lByteCount % 4) * 8 lWordArray[lWordCount] = lWordArray[lWordCount] | (0x80 << lBytePosition) lWordArray[lNumberOfWords - 2] = lMessageLength << 3 lWordArray[lNumberOfWords - 1] = lMessageLength >>> 29 return lWordArray } var wordToHex = function(lValue) { var WordToHexValue = '', WordToHexValueTemp = '', lByte, lCount for (lCount = 0; lCount <= 3; lCount++) { lByte = (lValue >>> (lCount * 8)) & 255 WordToHexValueTemp = '0' + lByte.toString(16) WordToHexValue = WordToHexValue + WordToHexValueTemp.substr(WordToHexValueTemp.length - 2, 2) } return WordToHexValue } var uTF8Encode = function(string) { string = string.replace(/\x0d\x0a/g, '\x0a') var output = '' for (var n = 0; n < string.length; n++) { var c = string.charCodeAt(n) if (c < 128) { output += String.fromCharCode(c) } else if (c > 127 && c < 2048) { output += String.fromCharCode((c >> 6) | 192) output += String.fromCharCode((c & 63) | 128) } else { output += String.fromCharCode((c >> 12) | 224) output += String.fromCharCode(((c >> 6) & 63) | 128) output += String.fromCharCode((c & 63) | 128) } } return output } md5 = function(string) { var x = Array() var k, AA, BB, CC, DD, a, b, c, d var S11 = 7, S12 = 12, S13 = 17, S14 = 22 var S21 = 5, S22 = 9, S23 = 14, S24 = 20 var S31 = 4, S32 = 11, S33 = 16, S34 = 23 var S41 = 6, S42 = 10, S43 = 15, S44 = 21 string = uTF8Encode(string) x = convertToWordArray(string) a = 0x67452301 b = 0xefcdab89 c = 0x98badcfe d = 0x10325476 for (k = 0; k < x.length; k += 16) { AA = a BB = b CC = c DD = d a = FF(a, b, c, d, x[k + 0], S11, 0xd76aa478) d = FF(d, a, b, c, x[k + 1], S12, 0xe8c7b756) c = FF(c, d, a, b, x[k + 2], S13, 0x242070db) b = FF(b, c, d, a, x[k + 3], S14, 0xc1bdceee) a = FF(a, b, c, d, x[k + 4], S11, 0xf57c0faf) d = FF(d, a, b, c, x[k + 5], S12, 0x4787c62a) c = FF(c, d, a, b, x[k + 6], S13, 0xa8304613) b = FF(b, c, d, a, x[k + 7], S14, 0xfd469501) a = FF(a, b, c, d, x[k + 8], S11, 0x698098d8) d = FF(d, a, b, c, x[k + 9], S12, 0x8b44f7af) c = FF(c, d, a, b, x[k + 10], S13, 0xffff5bb1) b = FF(b, c, d, a, x[k + 11], S14, 0x895cd7be) a = FF(a, b, c, d, x[k + 12], S11, 0x6b901122) d = FF(d, a, b, c, x[k + 13], S12, 0xfd987193) c = FF(c, d, a, b, x[k + 14], S13, 0xa679438e) b = FF(b, c, d, a, x[k + 15], S14, 0x49b40821) a = GG(a, b, c, d, x[k + 1], S21, 0xf61e2562) d = GG(d, a, b, c, x[k + 6], S22, 0xc040b340) c = GG(c, d, a, b, x[k + 11], S23, 0x265e5a51) b = GG(b, c, d, a, x[k + 0], S24, 0xe9b6c7aa) a = GG(a, b, c, d, x[k + 5], S21, 0xd62f105d) d = GG(d, a, b, c, x[k + 10], S22, 0x2441453) c = GG(c, d, a, b, x[k + 15], S23, 0xd8a1e681) b = GG(b, c, d, a, x[k + 4], S24, 0xe7d3fbc8) a = GG(a, b, c, d, x[k + 9], S21, 0x21e1cde6) d = GG(d, a, b, c, x[k + 14], S22, 0xc33707d6) c = GG(c, d, a, b, x[k + 3], S23, 0xf4d50d87) b = GG(b, c, d, a, x[k + 8], S24, 0x455a14ed) a = GG(a, b, c, d, x[k + 13], S21, 0xa9e3e905) d = GG(d, a, b, c, x[k + 2], S22, 0xfcefa3f8) c = GG(c, d, a, b, x[k + 7], S23, 0x676f02d9) b = GG(b, c, d, a, x[k + 12], S24, 0x8d2a4c8a) a = HH(a, b, c, d, x[k + 5], S31, 0xfffa3942) d = HH(d, a, b, c, x[k + 8], S32, 0x8771f681) c = HH(c, d, a, b, x[k + 11], S33, 0x6d9d6122) b = HH(b, c, d, a, x[k + 14], S34, 0xfde5380c) a = HH(a, b, c, d, x[k + 1], S31, 0xa4beea44) d = HH(d, a, b, c, x[k + 4], S32, 0x4bdecfa9) c = HH(c, d, a, b, x[k + 7], S33, 0xf6bb4b60) b = HH(b, c, d, a, x[k + 10], S34, 0xbebfbc70) a = HH(a, b, c, d, x[k + 13], S31, 0x289b7ec6) d = HH(d, a, b, c, x[k + 0], S32, 0xeaa127fa) c = HH(c, d, a, b, x[k + 3], S33, 0xd4ef3085) b = HH(b, c, d, a, x[k + 6], S34, 0x4881d05) a = HH(a, b, c, d, x[k + 9], S31, 0xd9d4d039) d = HH(d, a, b, c, x[k + 12], S32, 0xe6db99e5) c = HH(c, d, a, b, x[k + 15], S33, 0x1fa27cf8) b = HH(b, c, d, a, x[k + 2], S34, 0xc4ac5665) a = II(a, b, c, d, x[k + 0], S41, 0xf4292244) d = II(d, a, b, c, x[k + 7], S42, 0x432aff97) c = II(c, d, a, b, x[k + 14], S43, 0xab9423a7) b = II(b, c, d, a, x[k + 5], S44, 0xfc93a039) a = II(a, b, c, d, x[k + 12], S41, 0x655b59c3) d = II(d, a, b, c, x[k + 3], S42, 0x8f0ccc92) c = II(c, d, a, b, x[k + 10], S43, 0xffeff47d) b = II(b, c, d, a, x[k + 1], S44, 0x85845dd1) a = II(a, b, c, d, x[k + 8], S41, 0x6fa87e4f) d = II(d, a, b, c, x[k + 15], S42, 0xfe2ce6e0) c = II(c, d, a, b, x[k + 6], S43, 0xa3014314) b = II(b, c, d, a, x[k + 13], S44, 0x4e0811a1) a = II(a, b, c, d, x[k + 4], S41, 0xf7537e82) d = II(d, a, b, c, x[k + 11], S42, 0xbd3af235) c = II(c, d, a, b, x[k + 2], S43, 0x2ad7d2bb) b = II(b, c, d, a, x[k + 9], S44, 0xeb86d391) a = addUnsigned(a, AA) b = addUnsigned(b, BB) c = addUnsigned(c, CC) d = addUnsigned(d, DD) } var tempValue = wordToHex(a) + wordToHex(b) + wordToHex(c) + wordToHex(d) return tempValue.toLowerCase() } export default md5
存在的問題：
1. md5不是加密演算法，是一個雜湊演算法，md5是單向的，無法從md5的密文反推出原文，所以說它不可解，。MD5 加密屬於單向加密，當前端把加密後的密碼傳給後端時，後端是無法進行解密的。如果後端不想把加密後的密碼存入資料庫，就需要考慮其他的加密方法了，例如base64。 2. md5的不安全性，是指理論上存在碰撞，就是說存在多種原文雜湊後會得到相同密文都可能。不過碰撞的機率還是很小的。base64
js中自帶了base64加密 ， 解密
window.btoa("test")；//"dGVzdA=="
window.atob("dGVzdA==");//"test"
Base64編碼的作用：由於某些系統中只能使用ASCII字元。Base64就是用來將非ASCII字元的資料轉換成ASCII字元的一種方法。它使用下面表中所使用的字元與編碼。而且base64特別適合在http，mime協議下快速傳輸資料。
base64其實不是安全領域下的加密解密演算法。雖然有時候經常看到所謂的base64加密解密。其實base64只能算是一個編碼演算法，對資料內容進行編碼來適合傳輸。雖然base64編碼過後原文也變成不能看到的字元格式，但是這種方式很初級，很簡單。
Base64編碼方法要求把每三個8Bit的位元組轉換為四個6Bit的位元組，其中，轉換之後的這四個位元組中每6個有效bit為是有效資料，空餘的那兩個 bit用0補上成為一個位元組。因此Base64所造成資料冗餘不是很嚴重，Base64是當今比較流行的編碼方法，因為它編起來速度快而且簡單。
結合md5進行加密：
// 加密示例 getAuthorization(serverCode, code, pwd) { var username = encodeURI(code), nonce = base64.hexEncode(base64.encode(serverCode)), uri = process.env.VUE_APP_BASE_API + '/public/login/login', cnonce = base64.hexEncode(base64.encode(new Date().getTime() + '')), var userAuth = md5(username + ':' + realm + ':' + pwd, true)var response= md5(userAuth + ':' + nonce + ':' + ':' + cnonce )
return [
'username="' + username + '"','nonce="' + nonce + '"', 'uri="' + uri + '"', 'cnonce="' + cnonce + '"','response="' + response+ '"',
].join(',') },
base64.js
let base64 var b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/', a256 = '', r64 = [256], r256 = [256], i = 0 var UTF8 = { /** * Encode multi-byte Unicode string into utf-8 multiple single-byte characters * (BMP / basic multilingual plane only) * * Chars in range U+0080 - U+07FF are encoded in 2 chars, U+0800 - U+FFFF in 3 chars * * @param {String} strUni Unicode string to be encoded as UTF-8 * @returns {String} encoded string */ encode: function(strUni) { // use regular expressions & String.replace callback function for better efficiency // than procedural approaches var strUtf = strUni .replace( /[\u0080-\u07ff]/g, // U+0080 - U+07FF => 2 bytes 110yyyyy, 10zzzzzz function(c) { var cc = c.charCodeAt(0) return String.fromCharCode(0xc0 | (cc >> 6), 0x80 | (cc & 0x3f)) } ) .replace( /[\u0800-\uffff]/g, // U+0800 - U+FFFF => 3 bytes 1110xxxx, 10yyyyyy, 10zzzzzz function(c) { var cc = c.charCodeAt(0) return String.fromCharCode(0xe0 | (cc >> 12), 0x80 | ((cc >> 6) & 0x3f), 0x80 | (cc & 0x3f)) } ) return strUtf }, /** * Decode utf-8 encoded string back into multi-byte Unicode characters * * @param {String} strUtf UTF-8 string to be decoded back to Unicode * @returns {String} decoded string */ decode: function(strUtf) { // note: decode 3-byte chars first as decoded 2-byte strings could appear to be 3-byte char! var strUni = strUtf .replace( /[\u00e0-\u00ef][\u0080-\u00bf][\u0080-\u00bf]/g, // 3-byte chars function(c) { // (note parentheses for precence) var cc = ((c.charCodeAt(0) & 0x0f) << 12) | ((c.charCodeAt(1) & 0x3f) << 6) | (c.charCodeAt(2) & 0x3f) return String.fromCharCode(cc) } ) .replace( /[\u00c0-\u00df][\u0080-\u00bf]/g, // 2-byte chars function(c) { // (note parentheses for precence) var cc = ((c.charCodeAt(0) & 0x1f) << 6) | (c.charCodeAt(1) & 0x3f) return String.fromCharCode(cc) } ) return strUni } } while (i < 256) { var c = String.fromCharCode(i) a256 += c r256[i] = i r64[i] = b64.indexOf(c) ++i } function code(s, discard, alpha, beta, w1, w2) { s = String(s) var buffer = 0, i = 0, length = s.length, result = '', bitsInBuffer = 0 while (i < length) { var c = s.charCodeAt(i) c = c < 256 ? alpha[c] : -1 buffer = (buffer << w1) + c bitsInBuffer += w1 while (bitsInBuffer >= w2) { bitsInBuffer -= w2 var tmp = buffer >> bitsInBuffer result += beta.charAt(tmp) buffer ^= tmp << bitsInBuffer } ++i } if (!discard && bitsInBuffer > 0) result += beta.charAt(buffer << (w2 - bitsInBuffer)) return result } var Plugin = (base64 = function(dir, input, encode) { return input ? Plugin[dir](input, encode) : dir ? null : this }) Plugin.btoa = Plugin.encode = function(plain, utf8encode) { plain = Plugin.raw === false || Plugin.utf8encode || utf8encode ? UTF8.encode(plain) : plain plain = code(plain, false, r256, b64, 8, 6) return plain + '===='.slice(plain.length % 4 || 4) } Plugin.atob = Plugin.decode = function(coded, utf8decode) { coded = String(coded).split('=') var i = coded.length do { --i coded[i] = code(coded[i], true, r64, a256, 6, 8) } while (i > 0) coded = coded.join('') return Plugin.raw === false || Plugin.utf8decode || utf8decode ? UTF8.decode(coded) : coded } /**新增兩個hex編解碼方法(2017-04-30)**/ Plugin.hexEncode = function(plain, utf8encode) { plain = Plugin.raw === false || Plugin.utf8encode || utf8encode ? UTF8.encode(plain) : plain return plain.replace(/[\d\D]/g, function(str) { return str .charCodeAt(0) .toString(16) .slice(-4) }) } Plugin.hexDecode = function(coded, utf8decode) { coded = coded.replace(/.{4}/g, function(str) { return String.fromCharCode(parseInt(str, 16)) }) return Plugin.raw === false || Plugin.utf8decode || utf8decode ? UTF8.decode(coded) : coded } export default base64let base64 var b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/', a256 = '', r64 = [256], r256 = [256], i = 0
var UTF8 = { /** * Encode multi-byte Unicode string into utf-8 multiple single-byte characters * (BMP / basic multilingual plane only) * * Chars in range U+0080 - U+07FF are encoded in 2 chars, U+0800 - U+FFFF in 3 chars * * @param{String}strUni Unicode string to be encoded as UTF-8 * @returns{String} encoded string */ encode: function(strUni) { // use regular expressions & String.replace callback function for better efficiency // than procedural approaches var strUtf = strUni .replace( /[\u0080-\u07ff]/g, // U+0080 - U+07FF => 2 bytes 110yyyyy, 10zzzzzz function(c) { var cc = c.charCodeAt(0) return String.fromCharCode(0xc0 | (cc >> 6), 0x80 | (cc & 0x3f)) } ) .replace( /[\u0800-\uffff]/g, // U+0800 - U+FFFF => 3 bytes 1110xxxx, 10yyyyyy, 10zzzzzz function(c) { var cc = c.charCodeAt(0) return String.fromCharCode(0xe0 | (cc >> 12), 0x80 | ((cc >> 6) & 0x3f), 0x80 | (cc & 0x3f)) } ) return strUtf },
/** * Decode utf-8 encoded string back into multi-byte Unicode characters * * @param{String}strUtf UTF-8 string to be decoded back to Unicode * @returns{String} decoded string */ decode: function(strUtf) { // note: decode 3-byte chars first as decoded 2-byte strings could appear to be 3-byte char! var strUni = strUtf .replace( /[\u00e0-\u00ef][\u0080-\u00bf][\u0080-\u00bf]/g, // 3-byte chars function(c) { // (note parentheses for precence) var cc = ((c.charCodeAt(0) & 0x0f) << 12) | ((c.charCodeAt(1) & 0x3f) << 6) | (c.charCodeAt(2) & 0x3f) return String.fromCharCode(cc) } ) .replace( /[\u00c0-\u00df][\u0080-\u00bf]/g, // 2-byte chars function(c) { // (note parentheses for precence) var cc = ((c.charCodeAt(0) & 0x1f) << 6) | (c.charCodeAt(1) & 0x3f) return String.fromCharCode(cc) } ) return strUni } }
while (i < 256) { var c = String.fromCharCode(i) a256 += c r256[i] = i r64[i] = b64.indexOf(c) ++i }
function code(s, discard, alpha, beta, w1, w2) { s = String(s) var buffer = 0, i = 0, length = s.length, result = '', bitsInBuffer = 0
while (i < length) { var c = s.charCodeAt(i) c = c < 256 ? alpha[c] : -1
buffer = (buffer << w1) + c bitsInBuffer += w1
while (bitsInBuffer >= w2) { bitsInBuffer -= w2 var tmp = buffer >> bitsInBuffer result += beta.charAt(tmp) buffer ^= tmp << bitsInBuffer } ++i } if (!discard && bitsInBuffer > 0) result += beta.charAt(buffer << (w2 - bitsInBuffer)) return result }
var Plugin = (base64 = function(dir, input, encode) { return input ? Plugin[dir](input, encode) : dir ? null : this })
Plugin.btoa = Plugin.encode = function(plain, utf8encode) { plain = Plugin.raw === false || Plugin.utf8encode || utf8encode ? UTF8.encode(plain) : plain plain = code(plain, false, r256, b64, 8, 6) return plain + '===='.slice(plain.length % 4 || 4) }
Plugin.atob = Plugin.decode = function(coded, utf8decode) { coded = String(coded).split('=') var i = coded.length do { --i coded[i] = code(coded[i], true, r64, a256, 6, 8) } while (i > 0) coded = coded.join('') return Plugin.raw === false || Plugin.utf8decode || utf8decode ? UTF8.decode(coded) : coded }
/**新增兩個hex編解碼方法(2017-04-30)**/ Plugin.hexEncode = function(plain, utf8encode) { plain = Plugin.raw === false || Plugin.utf8encode || utf8encode ? UTF8.encode(plain) : plain return plain.replace(/[\d\D]/g, function(str) { return str .charCodeAt(0) .toString(16) .slice(-4) }) }
Plugin.hexDecode = function(coded, utf8decode) { coded = coded.replace(/.{4}/g, function(str) { return String.fromCharCode(parseInt(str, 16)) }) return Plugin.raw === false || Plugin.utf8decode || utf8decode ? UTF8.decode(coded) : coded }
export default base64