vue3+vite的前端项目,需要使用公钥加密提交的参数,目前.pem文件存放在publicDir,通过fetch()读取.pem的值,感觉有点怪怪的。
请问有没有更好的导入方式。
vue3+vite的前端项目,需要使用公钥加密提交的参数,目前.pem文件存放在publicDir,通过fetch()读取.pem的值,感觉有点怪怪的。
请问有没有更好的导入方式。
在Vue 3和Vite项目中,导入.pem
公钥文件并用于加密等操作,确实不应该直接从publicDir
通过fetch()
等方式来读取,因为这样做会涉及到不必要的网络请求,且不是处理这类文件的标准方式。以下是一种更规范的导入和使用.pem
公钥的方法:
.pem
文件放置在合适的目录下首先,你可以将.pem
文件放置在项目的src/assets
(如果你有这个目录的话,或者你可以创建它)或src
目录下的任何其他你认为合适的子目录中。例如,可以放在src/keys
目录下。
import
或require
导入公钥在Vue组件或任何JavaScript文件中,你可以直接使用ES6的import
语法或CommonJS的require
语法来导入.pem
文件。但请注意,.pem
文件本质上是文本文件,因此你可能需要将其作为字符串来导入。由于import
和require
默认不支持直接以文本形式导入文件,你可以使用Vite或Webpack等构建工具提供的raw-loader
(在Vite中可能需要配置或使用插件来支持)来处理这些文件。
不过,对于Vite,一种更简单且常见的做法是使用fs
模块(尽管它通常在Node.js环境中使用,但Vite构建时会处理这些依赖)在构建时读取文件内容,并可能通过环境变量或构建脚本将内容注入到你的代码中。不过,直接在前端代码中这样做通常不是推荐的做法,因为它会暴露你的密钥。
由于公钥通常用于加密敏感数据,并且你可能不希望这些密钥暴露给前端代码,因此更推荐的做法是在服务器端处理加密逻辑。前端只需将需要加密的数据发送到服务器,服务器使用公钥进行加密,然后处理加密后的数据。
如果你确实需要在前端处理加密,并且密钥的安全性不是主要问题(例如,只是一个示例或开发环境),你可以考虑将公钥嵌入到JavaScript文件中,或者使用Webpack的raw-loader
(对于Vite,可能需要类似的插件或配置)将公钥作为字符串导入到前端代码中。但请注意,这样做可能会带来安全风险。
通常,加密和解密操作应该在服务器端进行,以保护密钥不被泄露。如果必须在前端处理,请确保采取适当的安全措施,并尽量避免将密钥直接暴露给前端代码。
用 @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 啥的都行,反正是当纯文本读。
6 回答3.4k 阅读✓ 已解决
6 回答2.8k 阅读
5 回答6.8k 阅读✓ 已解决
2 回答11.2k 阅读✓ 已解决
2 回答8.7k 阅读✓ 已解决
5 回答7.3k 阅读
2 回答9.4k 阅读✓ 已解决
直接import你的pem文件就行了啊,为啥要fetch
参考下vite文档中,
将资源引入为字符串
的说明https://cn.vite.dev/guide/assets#importing-asset-as-string
我这测试没问题,
这是代码: https://codesandbox.io/p/sandbox/sk985q
这是截图:
你搞清楚是node报的403,还是静态文件服务器报的403?
构建时node报的403说明你文件的权限不对,
静态文件服务器报的403说明你在静态文件那不允许返回pem文件