Search code examples
javascripthtmlnode.jsexpressnodemailer

Nodemailer HTML Tags Injection


So this is my first time asking a question on StackOverflow..

I am using Nodemailer to email me when someone has filled a form. I am using ExpressJS to handle the POST request.

All seems good now except when I tried to inject HTML tags on the form. I could play with the mail html as I wish!

This is my code for the sendMail

transport.sendMail({
    from: `Form Submittion <${myEmailAddress}>`,
    to: myOtherEmailAddress,
    subject: "New Form Submitted",
    text:
        `Hi, \nNew Form Submitted!\n${req.body.request}`,
    html: 
        `<h1>Hi, <br />New Form Submitted!</h1>
        <h2>${req.body.request}</h2>`,
});

When the req.body.request has HTML tags, it can affect how my email looks, which I don't like..

Is there a way to sanatize the req.body.request from the nodemailer or express or should I relay on other tools? If so, could you please suggest some tools to do the job?


Solution

    • Install multer
    • Parse the fields from request, by using multer
    • Pass it as arguments to a function that returns the HTML template string for the email
    • send the email

    const express = require("express");
    // for email
    const nodemailer = require("nodemailer");
    // for handling the form submission
    const multer  = require('multer');
    const upload = multer();
    
    
    const app = express();
    
    
    // upload.none() for only accepting text fields from form submission
    // refer : http://expressjs.com/en/resources/middleware/multer.html
    app.post("/submit", upload.none(), async (req, res) => {
        // here name is field name at your html form
        const name = req.body.name;
        const email = req.body.email;
        let transporter = nodemailer.createTransport({
            host: "your-smtp-server",
            port: 587,
            secure: false, // true for 465, false for other ports
            auth: {
              user: "your-crendentials", // generated ethereal user
              pass: "your-crendentials", // generated ethereal password
            },
          });
        const info = await transporter.sendMail({
            from: '"Sender name" <foo@example.com>', // sender address
            to: email,
            subject: "New message from " + name,
            text: `Hi, \nNew Form Submitted!\n${name}`,
            html: getHTMLTemplateString(name),
            });
        console.log("Message sent: %s", info.messageId);
        return res.send({
            success: true,
            message: "Email sent successfully",
        })
    });
    
    function getHTMLTemplateString(name) {
        // add your css and html inside the string below
        return `
        <h1>Hi ${name}, <br />New Form Submitted!</h1>
        <p>Thank you for submitting the form!</p>
        <p>We will get back to you as soon as possible.</p>
        `;
    }
    
    app.listen(3000, () => {
        console.log("Server started on port 3000");
    });
    

    Dependencies added : multer