TypeError: crypto.createCipheriv不是一个函数

Question

vite+vue3使用aes-交叉报告: TypeError: crypto.createCipheriv不是函数版本："vue"："^3.2.23"，"vite"："^2.6.4"，“aes-交叉”："^1.0.9"，

Answer 1

要让crypto在浏览器中工作，请按照下面的说明操作

1. 添加依赖项

yarn add stream-browserify browserify-zlib events process util buffer

1. 配置vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      process: "process/browser",
      stream: "stream-browserify",
      zlib: "browserify-zlib",
      util: 'util'
    }
  }
})

1. 将JS添加到index.html

<!-- [...] -->
<div id="root"></div>

<!-- node // crypto -->
<script>window.global = window;</script>
<script type="module">
    import { Buffer } from "buffer/"; // <-- no typo here ("/")
    import process from "process";
    import EventEmitter from "events";
        
    window.Buffer = Buffer;
    window.process = process;
    window.EventEmitter = EventEmitter;
</script>
<!-- [...] -->

1. 将导入添加到App.vue，并进行测试

在App.vue中

import crypto from 'crypto-browserify'
import { Buffer } from 'buffer/' // <-- no typo here ("/")

// test crypto 
function crypt() {
  // Node.js program to demonstrate the    
  // crypto.createCipheriv() method
  
  const iv = crypto.randomBytes(16);
  const key = crypto.pbkdf2Sync("foobar", "salt", 1000, 32, 'sha512');
  const cipher = crypto.createCipheriv('aes-256-gcm', key, iv);
  var text = crypto.randomBytes(200)
  var ourCipherText = Buffer.concat([cipher.update(text), cipher.final()])
  console.log("ciphered text:", ourCipherText.toString('hex'))

  return ourCipherText.toString('hex');
}

[...]

结果✅

​

​

Answer 2

函数crypto.createCipheriv是node.js唯一的函数，这意味着它在浏览器中是不可用的，就像在Vue应用程序中一样。您应该使用调查 SubtleCrypto，它为许多加密目的(如AES )提供本地web功能。与往常一样，应该注意的是，在使用低级密码原语时，特别是在加密方面，应该非常小心和有条不紊。这个页面提供了更多的AES加密示例。