CODEWITHSUNDEEP
javascriptsecurityfrontend
pzero1
pzero1

Reputation: 103

Front end Sensitive info

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

Upvotes: 4

Views: 2150

Answers (4)

creme332
creme332

Reputation: 1935

As of November 2023, the term publicKey is now used instead of userId:

emailjs.send(serviceID, templateID, templateParams, publicKey);

EmailJS have addressed your concern in their FAQ:

Is it okay to expose my Public Key?

Indeed, someone could copy your keys (a well-known issue of any public API), but they will only be able to send your templates with your content, and they will not be able to send a custom email with their content (spam), which is not interesting for spammers. A better way to think of EmailJS in terms of security is not as a service that allows you to send emails from your code, but rather as a service that allows you to create a predefined set of emails via the dashboard, and then just trigger the emails from the code. This is quite similar to how emails are usually sent via a proprietary server code and how products like Intercom or customer.io are working.

Reference: EmailJS FAQ

To answer your first question, it is fine to expose your public key.

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?

All users can inspect your code (for example using Developer tools) and look for the public key. For a client to render your website in their browser, you need to send all your code (HTML+CSS+JS) to the client.

Upvotes: 1

Emile Bergeron
Emile Bergeron

Reputation: 17430

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.

Upvotes: 6

Paideswra Perisetti
Paideswra Perisetti

Reputation: 1

1.first we need install DotENV in you are project

command: npm install dotenv

and now check in your package.json file install or not , if install file we can see like this "dotenv": "^10.0.0", and we can configure the file in your file in top of the file like "require('dotenv').config();" and now where you want now your using .env file.

first we need to understand how to using .env file in your file any .env file are using (process.env)

and more information for Sensitive info Questions please go to the like https://www.youtube.com/watch?v=17UVejOw3zA

Thankyou,

Upvotes: -2

Maximiliano Poggio
Maximiliano Poggio

Reputation: 1182

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.

Upvotes: 1

Related Questions