vite项目如何导入.pem公钥更规范?

vue3+vite的前端项目,需要使用公钥加密提交的参数,目前.pem文件存放在publicDir,通过fetch()读取.pem的值,感觉有点怪怪的。
请问有没有更好的导入方式。

阅读 1.5k
avatarAI BotBETA

在Vue 3和Vite项目中,导入.pem公钥文件并用于加密等操作,确实不应该直接从publicDir通过fetch()等方式来读取,因为这样做会涉及到不必要的网络请求,且不是处理这类文件的标准方式。以下是一种更规范的导入和使用.pem公钥的方法:

1. 将.pem文件放置在合适的目录下

首先,你可以将.pem文件放置在项目的src/assets(如果你有这个目录的话,或者你可以创建它)或src目录下的任何其他你认为合适的子目录中。例如,可以放在src/keys目录下。

2. 使用importrequire导入公钥

在Vue组件或任何JavaScript文件中,你可以直接使用ES6的import语法或CommonJS的require语法来导入.pem文件。但请注意,.pem文件本质上是文本文件,因此你可能需要将其作为字符串来导入。由于importrequire默认不支持直接以文本形式导入文件,你可以使用Vite或Webpack等构建工具提供的raw-loader(在Vite中可能需要配置或使用插件来支持)来处理这些文件。

不过,对于Vite,一种更简单且常见的做法是使用fs模块(尽管它通常在Node.js环境中使用,但Vite构建时会处理这些依赖)在构建时读取文件内容,并可能通过环境变量或构建脚本将内容注入到你的代码中。不过,直接在前端代码中这样做通常不是推荐的做法,因为它会暴露你的密钥。

3. 推荐的做法:在服务器端处理加密

由于公钥通常用于加密敏感数据,并且你可能不希望这些密钥暴露给前端代码,因此更推荐的做法是在服务器端处理加密逻辑。前端只需将需要加密的数据发送到服务器,服务器使用公钥进行加密,然后处理加密后的数据。

4. 如果必须在前端处理

如果你确实需要在前端处理加密,并且密钥的安全性不是主要问题(例如,只是一个示例或开发环境),你可以考虑将公钥嵌入到JavaScript文件中,或者使用Webpack的raw-loader(对于Vite,可能需要类似的插件或配置)将公钥作为字符串导入到前端代码中。但请注意,这样做可能会带来安全风险。

结论

通常,加密和解密操作应该在服务器端进行,以保护密钥不被泄露。如果必须在前端处理,请确保采取适当的安全措施,并尽量避免将密钥直接暴露给前端代码。

2 个回答

@643104191 提到的方案就好。

如果是本地开发环境下 403 的话,是因为 Vite 出于安全考虑,默认禁止了 .env、.crt、.pem 这几种后缀名的文件访问,防止环境变量里有敏感参数或私钥文件泄漏啥的。

https://vite.dev/config/server-options.html#server-fs-deny

你可以调整这个设置:

// vite.config.ts
export default defineConfig({
  ... 略
  server: {
    fs: {
      deny: ['.env', '.env.*']
    }
  }
})

要么就是改后缀名,改成 txt 啥的都行,反正是当纯文本读。

推荐问题
宣传栏