前端 base64加密 及 md5加密

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 = 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

 

加密：  md5(username + ':'  + pwd, true)

使用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 base64

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 base64