Setting up an alert box in a browser using express

Question

Setting up an alert box in a browser using express

Currently, I am utilizing express to dispatch emails using the nodemailer module. Here is a snippet of my code:

app.post('/', (req, res) => {
const output = `
<p>You have a new contact request.</p>
<h3>Contact Details</h3>
<ul>
<li>Name:${req.body.name}</li>
<li>Email:${req.body.email}</li>
</ul>
<h3>Message</h3>
<p>${req.body.message}</p>
`;

// setting up the transporter object with SMTP details
let transporter = nodeMailer.createTransport({
    host: "mail.gmail.com",
    port: 587,
    secure: false,
    auth: {
        user: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ed8094808c8481ad8a8c808481c38e8280">[email protected]</a>',
        pass: '2020'
    },
    tls: {
        rejectUnauthorized: false
    }
});

// sending mail through configured transport
let mailOptions = {
    from: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="18756175797174587f79757174367b7775">[email protected]</a>",
    to: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4a27332c38232f242e0a2d272b232664292527">[email protected]</a>",
    subject: "the subject",
    html: output
};

transporter.sendMail(mailOptions, (error, info) => {
    if (error) {
        return console.log(error);
    }
    
    console.log("Message sent: %s", info.messageId);
    console.log("Preview URL: %s", nodeMailer.getTestMessageUrl(info));
   res.render('index', { msg: 'email has been sent' });
    res.redirect('back');
});});

Upon hitting the submit button, the following code redirects to the Contact page:

        res.redirect('back');

A message is then displayed using this code:

       res.render('index', { msg: 'email has been sent' });

My objective now is to showcase the text in an alert box instead of using the previously mentioned method. I attempted the following approach:

res.render('index','<script>alert("email has been sent")</script>');

Unfortunately, this approach did not work at all. Moreover, I am not implementing ajax. Any thoughts or possible solutions?

javascript express nodemailer

Answer 1

Answer №1

Executing a script directly from a server response such as

<script>doSomethingMaybeBad();</script>

may not run smoothly on modern browsers due to potential security risks. It appears that the entire page content <html>...</html> is not being loaded on the client side with these requests.

My suggestion would be to handle ajax responses from the client side and display an alert accordingly. Though without viewing all your code, here's a basic concept:

Replace:

res.render('index','<script>alert("email has been sent")</script>');

with a JSON response, or a response structured similarly to how it was before like this:

{ msg: 'email has been sent', status: 200 }

Then in your client-side code, swap something like this (making an educated guess based on the lack of a client side example provided):

$('msg').html(response.msg)

With:

if (response.status === 200) {
    alert(msg.msg);
    // consider redirecting here if necessary?
} else {
    // show error message, using jQuery in this case but adjust it based on your setup
    $('msg').html(response.msg)
}

Answer 2

Executing a script directly from a server response such as

<script>doSomethingMaybeBad();</script>

may not run smoothly on modern browsers due to potential security risks. It appears that the entire page content <html>...</html> is not being loaded on the client side with these requests.

My suggestion would be to handle ajax responses from the client side and display an alert accordingly. Though without viewing all your code, here's a basic concept:

Replace:

res.render('index','<script>alert("email has been sent")</script>');

with a JSON response, or a response structured similarly to how it was before like this:

{ msg: 'email has been sent', status: 200 }

Then in your client-side code, swap something like this (making an educated guess based on the lack of a client side example provided):

$('msg').html(response.msg)

With:

if (response.status === 200) {
    alert(msg.msg);
    // consider redirecting here if necessary?
} else {
    // show error message, using jQuery in this case but adjust it based on your setup
    $('msg').html(response.msg)
}

Setting up an alert box in a browser using express

Answer №1

Similar questions

Is it possible to retrieve local variable JSON arrays using ajax/getJson()?

What is the best way to convert a JSON object back into an object with its own set of methods?

"Learn the technique of adding a comma after each object and transforming it into an array using JavaScript in React JS

Eliminate any spaces surrounding the text within the div tag

Attempted to execute a Vuex mutation outside of the designated store handler

Enabling a Backbone Model to have multiple pathways

JavaScript Stopwatch Break

Troubleshooting issue: PHP INSERT Prepared statement not working when using AJAX

What is the best way to incorporate an immediately invoked function expression (IIFE) within the return statement of a React

Utilizing JSON Data for Dynamically Displaying Database Objects on a Google Map

Using async/await with recursion in NodeJS for handling express requests

Obtain the number of elements rendered in a React parent component from a switch or route

I'm confused as to why the icon color isn't changing on the Blogger homepage for each individual user

Choose a row in an Angular ngGrid upon loading the page

Navigating through paginated data can be made easier by using Backbone.PageableCollection in conjunction with a personalized

Strategies for Resolving CORS Problems in Redux React when Using Express and Node

angular-routing does not seem to redirect properly

Is there a way to capture and monitor all page traffic within a scrollable website using playwright?

Notification of failed fetch in backbone

PHP script to automatically update a table in a database upon the closure of a