提问人：pzero1 提问时间：5/7/2020 最后编辑：Emile Bergeronpzero1 更新时间：11/17/2023 访问量：1479
前端敏感信息
Front end Sensitive info
问：
我正在构建我的第一个 react 应用程序，但不确定前端安全性。我正在调用以下第三方库： userId 字段是敏感信息。我对我的 onSubmit 处理程序进行以下调用。我想知道我是否需要以某种方式保护这些信息？另外，有没有办法让我检查用户是否可以以某种方式看到我检查并以某种方式在方法中找到代码的此信息？emailjs.sendForm(serviceID, templateID, templateParams, userID);
emailjs
.sendForm(
"gmail",
"client-email",
"#form",
"**here_is_the_sensitive_info**"
)
.then(() => {
resetForm({});
})
.catch(() => {
const acknowledgement = document.createElement("H6");
acknowledgement.innerHTML = "Something went wrong, please try.";
document.getElementById("form").appendChild(acknowledgement);
});
答：
1赞
Maximiliano Poggio
5/7/2020
#1
前端不应包含敏感信息。例如，您应该运行一个 nodejs 实例，向前端公开和端点，然后调用它。然后，在您的 nodejs 应用程序中，您应该有一个包含您的凭据的 .env 文件。
然后，只需使用 node.js 服务器中的 .env 信息。 如果你在前端有敏感信息，你就暴露了一切。
评论
0赞
101arrowz
5/7/2020
此外，试图阻止用户检查您的代码将永远无法奏效。他们可以在没有浏览器的情况下下载 JavaScript 文件，并且他们拥有您的凭据。
0赞
pzero1
5/7/2020
@101arrowz我将使用 shopify 作为我的后端，并且不希望有一个节点.js后端。userID 是我为表单提交设置的电子邮件转发服务的 ID，所以我想它不是那么敏感，因为没有密码，所以安全风险不大吗？另外，使用 .env 有什么不同？最终不会包含也可以被嗅探的敏感信息吗？
0赞
101arrowz
5/7/2020
好吧，我们的想法是你不把文件提供给客户端。如果用户 ID 不是敏感信息，那么您正在做的事情是完全可以的。.env
0赞
Emile Bergeron
5/7/2020
最后是否在 if 中并不重要，DefinePlugin 只是在浏览器下载的最终捆绑包中替换它。userId.env
0赞
101arrowz
5/7/2020
当然，建议是使用 Node.js 电子邮件客户端而不是 EmailJS。除非我错误地解释了这个答案？我想我做到了。
6赞
Emile Bergeron
5/7/2020
#2
在这种情况下，EmailJS 旨在在浏览器中使用，因此我认为它根本不敏感。userId
在他们自己的文档中，您可以看到以下说明以开始使用。
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/email.min.js"> </script> <script type="text/javascript"> (function(){ emailjs.init("YOUR_USER_ID"); })(); </script>
也就是说，任何人都可以在浏览器的页面源代码中看到这一点。对客户端 JavaScript 中的任何敏感内容保持谨慎是正确的。
为了避免任何人在他们自己的网站上使用您的域名（这不太可能，因为它只会触发您配置的电子邮件），您显然可以将自己的域名与他们的付费计划列入白名单。userId
在前端项目中使用 .env 文件时，仅用于设置编译时使用的环境变量。文件永远不会到达浏览器，但值通常只是在最终的捆绑包源代码中插入（例如使用 DefinePlugin），因此这里没有什么比这更安全的了。
警告：请勿将任何机密（例如私有 API 密钥）存储在 React 应用程序！
环境变量嵌入到构建中，这意味着任何人都可以 通过检查应用的文件来查看它们。
# (s) for sensitive info
.env -> compilation -> bundle -> browser -> third-party
(s) (s) (s) (s) (s)
也就是说，当在 Node.js 服务器中使用时，该文件再次用于设置环境变量，但这次是在应用程序开始时。但是，这些值不会与前端共享，因此将其用作安全解决方案的一种方法是公开您自己的端点，仅将您自己的域列入白名单，然后仅在服务器上使用敏感信息。.env
.env -> Node.js server -> third-party
(s) (s) (s)
^
/ (api call)
...bundle -> broswer
但话又说回来，在这里，EmailJS 的 userId 不是敏感信息。
-2赞
Paideswra Perisetti
6/22/2021
#3
1.首先我们需要在你的项目中安装DotENV
命令：npm install dotenv
现在检查你的package.json文件是否安装，如果安装文件，我们可以看到这样的“dotenv”：“^10.0.0”，我们可以在文件顶部配置文件中的文件，如“require（'dotenv'）.config（）;”，现在你现在想要你的使用.env文件。
首先，我们需要了解如何在您的文件中使用 .env 文件 任何 .env 文件都在使用 （process.env）
有关敏感信息问题的更多信息，请访问 https://www.youtube.com/watch?v=17UVejOw3zA
谢谢
评论
0赞
gre_gor
12/14/2022
我完全看不出 dotenv 文件在这里有什么关系。
1赞
Bunny
11/17/2023
#4
截至 2023 年 11 月，该术语现在使用，而不是：publicKeyuserId
emailjs.send(serviceID, templateID, templateParams, publicKey);
EmailJS 在他们的常见问题解答中解决了您的问题：
可以公开我的公钥吗？
事实上，有人可以复制您的密钥（任何公共 API 的众所周知的问题），但他们只能将您的模板与您的内容一起发送，并且他们无法发送包含其内容（垃圾邮件）的自定义电子邮件，这对垃圾邮件发送者来说并不有趣。从安全性的角度考虑 EmailJS 的更好方法不是允许您从代码发送电子邮件的服务，而是允许您通过仪表板创建一组预定义的电子邮件，然后从代码中触发电子邮件的服务。这与通常通过专有服务器代码发送电子邮件的方式以及对讲机或 customer.io 等产品的工作方式非常相似。
参考资料：EmailJS FAQ
要回答您的第一个问题，可以公开您的公钥。
另外，有没有办法让我检查用户是否可以以某种方式看到我检查并以某种方式在方法中找到代码的此信息？
所有用户都可以检查您的代码（例如，使用开发人员工具）并查找公钥。为了让客户端在其浏览器中呈现您的网站，您需要将所有代码（HTML+CSS+JS）发送给客户端。
评论