Question

我正在构建我的第一个React应用，并且不确定前端安全性。我正在呼叫以下第三方库：emailjs.sendForm(serviceID, templateID, templateParams, userID); userId字段是敏感信息。我在onSubmit处理程序上进行以下调用。我想知道是否需要以某种方式保护此信息？另外，有没有一种方法可以让我检查用户是否可以某种方式查看我检查并在该方法中找到代码的信息？

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);
          });

Answer 1

在这种情况下，应在浏览器中使用EmailJS，所以我认为userId根本不敏感。

在their own documentation中，您可以看到以下说明以开始使用。

<script type="text/javascript"
  src="https://cdn.jsdelivr.net/npm/emailjs-com@2.4.1/dist/email.min.js">
</script>
<script type="text/javascript">
   (function(){
      emailjs.init("YOUR_USER_ID");
   })();
</script>

也就是说，任何人都绝对可以在其浏览器的页面源中看到此内容。您应该谨慎对待客户端JavaScript中的任何敏感内容。

为避免任何人在自己的网站上使用您的userId（这不太可能，因为它只会触发您配置的电子邮件），您可以whitelist your own domain 显然带有他们的付费计划。

.env file, when used in a frontend project仅用于设置在编译时使用的环境变量。该文件永远不会到达浏览器，但是值通常只是在最终的捆绑包源中进行插值（例如，用DefinePlugin进行插值），因此这里没有什么比这更安全的了。

警告：请勿在您的计算机中存储任何机密信息（例如私有API密钥）反应应用程序！

环境变量被嵌入到构建中，这意味着任何人都可以通过检查应用程序的文件来查看它们。

# (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不是敏感信息。

Answer 2

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

谢谢，

前端敏感信息

2 个答案: