Send Email Directly From JavaScript using EmailJS

Question

Send Email Directly From JavaScript using EmailJS.

Please look the below answer and I'm getting so many comments for malicious attacks.. because this file is loading in browser so malicious user can easily get your key configuration. So, how to avoid it?

 var templateParams = {
    to_name: 'xyz',
    from_name: 'abc',
    message_html: 'Please Find out the attached file'
  };

  emailjs.send('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', templateParams)
    .then(function(response) {
      console.log('SUCCESS!', response.status, response.text);
    }, function(error) {
      console.log('FAILED...', error);
    });

What problem are you seeing when executing this code?

Mike
– Mike

2019-11-12 03:30:51 +00:00
Commented Nov 12, 2019 at 3:30 — Mike
– Mike, Commented Nov 12, 2019 at 3:30
How to avoid malicious attacks?

Prabhat
– Prabhat

2019-11-12 05:37:52 +00:00
Commented Nov 12, 2019 at 5:37 — Prabhat
– Prabhat, Commented Nov 12, 2019 at 5:37

Prabhat · Accepted Answer · 2019-11-12 03:13:31Z

4

Hi you can directly send email through using EmailJS without using the server side code. It'll totally client side.

For sending you need to configure below details.

1)First,Go to this site [https://www.emailjs.com/] and create free account.

2)below 'Connect your email service' button click and configure. You'll get 'YOUR_SERVICE_ID'

3)Then 'Create email template' button click and configure. You'll get 'YOUR_TEMPLATE_ID'

4)click on 'Send email from JavaScript' button. You'll get code.

5)You'll get the 'YOUR_USER_ID' in [https://dashboard.emailjs.com/account]

I did all configuration and added code please check. below code.

NOTE : - "Please encrypted or embedded your use_id for malicious attacks."

<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"); //please encrypted user id for malicious attacks
  })();
//set the parameter as per you template parameter[https://dashboard.emailjs.com/templates]
  var templateParams = {
    to_name: 'xyz',
    from_name: 'abc',
    message_html: 'Please Find out the attached file'
  };

  emailjs.send('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', templateParams)
    .then(function(response) {
      console.log('SUCCESS!', response.status, response.text);
    }, function(error) {
      console.log('FAILED...', error);
    });
</script>

edited Nov 12, 2019 at 3:13

answered Nov 10, 2019 at 18:22

Prabhat

8021 gold badge10 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Endzeit Over a year ago

Don't you give everyone that visits your site access to your service key when you use it like that? Thus the person may misuse your service key for e.g. sending spam mails.

Prabhat Over a year ago

Okay Thank you..!! I didn't given service key anywhere..Could you please help me where is it?

Endzeit Over a year ago

I'm not familiar with email.js but I'm just wondering what prevents a malicious user from reading the JavaScript code of your website that is loaded into his browser and start making unwanted requests using your USER_ID and the templates.

verandaguy Over a year ago

You say you need the emailjs API keys/bearer tokens/whatever to make calls to emailJS's service to send out emails. These tokens have to exist in your JS code base, which is served to the client. The client could extract these tokens and abuse the emailjs service while masquerading as you. You should not embed this kind of data in a client-side app, period.

verandaguy Over a year ago

@Prabhat no, because you should never trust a client with your own genuine credentials for a service, including API keys. Your clients are totally free to extract, misuse, and abuse these, including to impersonate you and victimize other users.

|

Markrum · Accepted Answer · 2022-01-25 13:07:29Z

Using JavaScript can expose your credentials like user id , service id to the public. For this , you can store these keys values in a variable (half value) and then manipulating it in runtime like appending remaining half of the key etc. But its not totally safe.

Code :

<html>
<head>
  <title>Contact Us</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/emailjs-com@2/dist/email.min.js"></script>
</head>
<body>
  <div class="container">
    <div class="card col-md-6 offset-md-3" style="margin-top:50px;">
      <div class="card-body">
        <h2>Contact Us</h2>
        <label for="thename">Name</label>
        <input type="text" class="form-control" id="thename" placeholder="Enter Name">
        <label for="themail">Email:</label>
        <input type="email" class="form-control" id="themail" placeholder="Enter Email">
        <label for="themsg">Message</label>
        <textarea class="form-control" id="themsg" placeholder="Enter Message"></textarea>
        <button class="btn btn-danger btn-sm" style="margin-top:10px;" onCLick="sendemail();">Send</button>
        </form>
      </div>
    </div>
  </div>
  <script>
    function sendemail() {
      var userid = "YourUserID"
      emailjs.init(userid);
      var thename = document.getElementById('thename').value;
      var themail = document.getElementById('themail').value;
      var themsg = document.getElementById('themsg').value;
      var validmail = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/;
      if (thename == "") {
        alert("Please Enter Name");
      }
      else if (themail == "" || themail.match(!validmail)) {
        alert("Please Enter Valid Email");
      }

      else if (themsg == "") {
        alert("Please Enter Message");
      }
      else {
        var contactdetail = {
          from_name: thename,
          from_email: themail,
          message: themsg
        };

        emailjs.send('YourServiceID', 'YourTemplateID', contactdetail).then(function (res) {
          alert("Email Sent Successfully");
        },
          reason => {
            alert("Error Occur");
          })
      }
    }
  </script>
</body>
</html>

Make sure to replace "YourUserID" , "YourServiceID" & "YourTemplateID" with your own ids

Reference : Narendra Dwivedi - Send Email From JavaScript

Mauricio Roteta · Accepted Answer · 2022-09-08 20:13:10Z

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/email.min.js">
</script>
<script type="text/javascript">
  (function() {
    emailjs.init("service_ud48moz"); //please encrypted user id for malicious attacks
  })();
//set the parameter as per you template parameter[https://dashboard.emailjs.com/templates]
  var templateParams = {
    to_name: 'xyz',
    from_name: 'abc',
    message_html: 'Please Find out the attached file'
  };

  emailjs.send('service_ud48moz', 'template_njhhxon', templateParams)
    .then(function(response) {
      console.log('SUCCESS!', response.status, response.text);
    }, function(error) {
      console.log('FAILED...', error);
    });
</script>

Fedor · Accepted Answer · 2024-10-30 11:05:54Z

0

Set a constant in the EmailJS dashboard, go to your template https://dashboard.emailjs.com/admin/templates, select a template, On your right where there is "To Email" add {{to_email}}

Node code

emailjs
.send(SERVICE_ID, TEMPLATE_ID, {
    to_email : "[email protected]",
    name: "Nania"
 }, {
  publicKey: PUBLIC_KEY,
  privateKey: PRIVATE_KEY,
})
.then(
  (response) => {
    console.log("Email SUCCESS!", response.status, response.text);
  },
  (err) => {
    console.log("Email FAILED...", err);
  }
);

edited Oct 30, 2024 at 11:05

Fedor

24.7k45 gold badges59 silver badges188 bronze badges

answered Oct 30, 2024 at 9:09

Amoko Ivan

113 bronze badges

Collectives™ on Stack Overflow

Send Email Directly From JavaScript using EmailJS

4 Answers 4

11 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

11 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related