aes-gcm模式前端加解密（html頁面 js）——使用node-forge庫

make-up-xx發表於2024-09-27
GC模式前端解密HTMLJS

node-forge
之前講過了AES-GCM模式在vue中如何加解密，使用的是node自帶的crypto模組，但是會有個問題，純html頁面中無法使用node.js中的api。

這時候我們需要用到一個庫：node-forge(js, vue中都可使用)

npm地址：node-forge - npm

github地址：https://github.com/digitalbazaar/forge

官方列舉的可以加解密的模式：

使用

1：引入

js:

<script src ="https://unpkg.com/node-forge@1.0.0/dist/forge.min.js "></script>

vue: 

安裝：npm install node-forge
在需要用的地方引入：import forge from 'node-forge'

2：金鑰

const keyStr = '16位/24位/32位的金鑰'

// 如果跟後端搭配加解密需要和後端約定好金鑰 金鑰必須一致

3：加密

js

// 加密
    function encrypt(someBytes) {
      var iv =  forge.random.getBytesSync(12)  // 生成隨機iv 12位元組
      var cipher  = forge.cipher.createCipher('AES-GCM', keyStr); // 生成AES-GCM模式的cipher物件 並傳入金鑰
      cipher.start({
          iv: iv
      });
      cipher.update(forge.util.createBuffer(forge.util.encodeUtf8(someBytes)));
      cipher.finish();
      var encrypted = cipher.output;
      var tag = cipher.mode.tag;
      return btoa(iv+encrypted.data+tag.data)
    }

vue

export function encrypt(word) {
  var iv = forge.random.getBytesSync(12) // 生成隨機iv 12位元組
  var cipher = forge.cipher.createCipher('AES-GCM', keyStr) // 生成AES-GCM模式的cipher物件 並傳入金鑰
  cipher.start({
    iv: iv
  })
  cipher.update(forge.util.createBuffer(forge.util.encodeUtf8(word)))
  cipher.finish()
  var encrypted = cipher.output
  var tag = cipher.mode.tag
  return window.btoa(iv + encrypted.data + tag.data)
}

4：解密

js

function decrypt(someBytes) {
      someBytes = atob(someBytes)
      const iv = someBytes.slice(0, 12)
      const tag = someBytes.slice(-16)
      const data = someBytes.slice(12, someBytes.length - 16)
      var decipher = forge.cipher.createDecipher('AES-GCM', keyStr)
      decipher.start({
          iv: iv,
          tag: tag
      });
      decipher.update(forge.util.createBuffer(data))
      const pass = decipher.finish()
      if (pass) {
        return decipher.output.toString()
      }
    }

vue

export function decrypt(datamsg) {
  datamsg = window.atob(datamsg)
  const iv = datamsg.slice(0, 12)
  const tag = datamsg.slice(-16)
  const data = datamsg.slice(12, datamsg.length - 16)
  var decipher = forge.cipher.createDecipher('AES-GCM', keyStr)
  decipher.start({
    iv: iv,
    tag: tag
  })
  decipher.update(forge.util.createBuffer(data))
  const pass = decipher.finish()
  if (pass) {
    return decipher.output.toString()
  }
}

5：舉個例子

var str = '我是密碼123.！'
var en = encrypt(str)
console.log(en)
var de = decrypt(en)
console.log(de)

原文連結： aes-gcm模式前端加解密（html頁面 js）——使用node-forge庫-CSDN部落格

相關文章