Front end Sensitive info

Question

I am building my first react app and not sure about front end security. I am making a call to the following third party library: emailjs.sendForm(serviceID, templateID, templateParams, userID); The userId field is sensitive information. I make the following call on my onSubmit handler. I am wondering if I need to secure this information somehow? Also, is there a way for me to check if a user can somehow see this information my inspecting and finding the code in the method somehow?

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

In this case, EmailJS is meant to be used in the browser, so I don't think that the userId is sensitive at all.

In their own documentation, you can see the following instruction to get started.

<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>

That said, anyone can definitely see this in the source of the page in their browser. You are right to be cautious with anything sensitive in client-side JavaScript.

To avoid anyone using your userId on their own website (which is very unlikely since it only triggers emails that you configured), you can whitelist your own domain with their paid plan apparently.

---

The .env file, when used in a frontend project, only serves to set environment variables that are used at compilation time. The file never gets to the browser, but the values are often just interpolated (e.g. with the DefinePlugin) in the final bundle source, so there's nothing necessarily more secure here.

WARNING: Do not store any secrets (such as private API keys) in your React app!

Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files.

# (s) for sensitive info

.env -> compilation -> bundle -> browser -> third-party
 (s)        (s)         (s)        (s)          (s)

That said, when used in a Node.js server, the .env file serves to set, again, environment variables, but this time, at the start of the application. These values are not shared with the frontend though, so one way to use this as a secure solution is to expose your own endpoint, whitelisting only your own domain, which then uses the sensitive information only on the server.

.env -> Node.js server -> third-party
 (s)          (s)            (s)      
                  ^
                 /  (api call)
...bundle -> broswer

But then again, here, EmailJS' userId is not sensitive information.

Answer 2

You should never have sensitive info in the frontend. You should have for instance, a nodejs instance running, expose and endpoint, to the frontend, and call it. Then, inside your nodejs application, you should have a .env file with your credentials.

Then, just use the .env info from your node.js server. If you have sensitive info in the frontend, you are exposing everything.