前端敏感信息

Question

我正在构建我的第一个反应应用程序，不确定前端安全性。我正在调用以下第三方库：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敏感。

在他们自己的文档中，您可以看到以下入门说明。

<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在他们自己的网站上使用您的网站（这不太可能，因为它只会触发您配置的电子邮件），您显然可以将自己的域 与他们的付费计划列入白名单。

该.env文件在前端项目中使用时，仅用于设置编译时使用的环境变量。该文件永远不会到达浏览器，但这些值通常只是在最终的捆绑包源中进行插值（例如使用 DefinePlugin ），因此这里不一定更安全。

警告：不要在 React 应用程序中存储任何秘密（例如私有 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并不是敏感信息。