Does react form input need to be sanitized when sending emails with NodeMailer?

Active3 hr before
Viewed126 times

8 Answers


In my situation I will be taking the form input straight away to a backend service to send an email (Looking at using NodeMailer). The info about this is hard to find due to the sheer amount of info about the former situation above. Even the info I see about my inquiry, I see mixed info. Some people say it's not necessary if your just sending emails, other people (myself included) think that it should be sanitized.,I see a lot of questions asking about sanitation for HTML, which React seems to do by default in JSX. However, I've noticed this means it only sanitizes data being displayed back in the DOM.,Second Question: I see that NodeMailer lists "security" as one of their big perks, does NodeMailer already sanitize it's input?

 Pretag team - issue, fix, solve, resolve

In order for Nodemailer to send mails, it needs to have a SMTP which is a protocol used by email hosts such as gmail, hotmail, etc. To set it up:,You can be creative in how you want to make it. You can use Bootstrap or CSS and it's all up to you! Usually, a contact form has 3 input fields: name, email and message. But for my example, I added a Subject field too. Here's what mine looks like:,We have built a contact form that can send messages to your specified email!

First, create the state variables to keep track of the states name, email, subject and message.

class Contact extends React.Component {

      constructor(props) {
         this.state = {
            name: '',
            email: '',
            subject: '',
            message: ''
load more v

A contact form is essential for any business to provide a convenient way for their customers to reach them. It is typically found in a business’ contact us page. In this tutorial, I will show you how to create a contact form with React and Nodemailer.

 Pretag team - issue, fix, solve, resolve

Building an HTML template in ReactJS ,Here’s a sample code of a React email form component. Put it to the src/Form.js file in your project., Sending emails with ‘pure React’

 Pretag team - issue, fix, solve, resolve

Also, notice our use of the bail method, which stops running validations if any of the previous ones have failed. We need this because if a user submits the form without entering a value into the email field, the normalizeEmail will attempt to normalize an empty string and convert it to an @. This will then be inserted into our email field when we re-render the form.,Let’s look at the invalid submission first. If invalid, we need to pass back the submitted values to the view (so users don’t need to re-enter them) along with any error messages we want to display:,You should now be redirected to the index view and see a success message when the form is submitted with valid data. Huzzah! We can now deploy this to production and be sent messages by the prince of Nigeria.

 Pretag team - issue, fix, solve, resolve

Do you want a tutorial with less technical jargon and more vanilla English? Done and done.,Do you want to install dependencies with npm now? → y,4. Insert your first entry manually (not sure why this is needed, but you can delete your entry later if you like).

$ npm install firebase axios node - sass$ npm install - g firebase - tools
load more v

This is the component that is loaded by React Router when the user has clicked on the unique link in the email sent to their email address.,Collect an email to confirm, send the user a link and then update the database to confirm when the user clicks the link.,The big thing to note is that presentational data (like what content goes into the emails or what messages get sent back in the responses) have been moved to their own files.

server/.env should be:

MAIL_USER = your_new_email_address @gmail.comMAIL_PASS = your_new_password
load more v

replyTo - An email address that will appear on the Reply-To: field,sender - An email address that will appear on the Sender: field (always prefer from if you’re not sure which one to use),cc - Comma separated list or an array of recipients email addresses that will appear on the Cc: field

var message = {
  from: "[email protected]",
  to: "[email protected]",
  subject: "Message title",
  text: "Plaintext version of the message",
  html: "<p>HTML version of the message</p>"
load more v

Other "input-react" queries related to "Does react form input need to be sanitized when sending emails with NodeMailer?"