如何将我的私有api密钥存储在Vue.js应用程序上?

问题描述

我阅读了Vue CLI上的文档,并希望确保自己理解正确。

文档说,

Note that only NODE_ENV,BASE_URL,and variables that start with VUE_APP_ will be statically embedded into the client bundle with webpack.DefinePlugin. It is to avoid accidentally exposing a private key on the machine that Could have the same name.

那么这是否意味着我应该存储没有前缀VUE_APP的私钥?例如,

VUE_APP_NOT_SECRET_KEY=not_secret_key
SECRET_KEY=secret_key

存储我的密钥是否正确?

解决方法

您可以在项目的根目录中.env旁边创建一个package.json

在该文件中,您可以将环境变量创建为 VUE_APP_SOME_KEY="someValue"

确保名称以VUE_APP_开头

然后您可以在任何需要使用的地方使用它 process.env.VUE_APP_SOME_KEY

也不要忘记将.env文件添加到.gitignore

,

您可以将密钥存储在 VUE_APP_NOT_SECRET_KEY=not_secret_keySECRET_KEY=secret_key 中,从安全角度来看没有区别,任何具有最低前端技能的人都可以从浏览器读取此值。>

唯一的区别是,如果您使用 VUE_APP_* 前缀,您的变量将位于 process.env 中,并将在编译时使用 DefinePluing 替换为 Vue。

cli.vuejs.org/guide/mode-and-env.html#environment-variables –

请注意:您在 Vue 应用中存储的任何内容都不是秘密。

,

密钥不应存储在环境变量中,因为它们可以在客户端访问

,

您应该使用 Microsoft 的 Key Vault 等产品。 Key Vault 是 Azure 服务的一部分。

业内最佳做法是将您的机密存储在另一台服务器上。

Microsoft 提供了一种通过密钥保管库的方法,可以轻松implemented

还有其他产品。查看 azure 密钥保管库 competitor's list