Inviare email con JavaScript

JavaScript invia email da un server, mai direttamente dal browser. Il codice lato client non può aprire una connessione SMTP, e inserire le credenziali email in una pagina significherebbe consegnarle a chiunque apra i dev tools. La vera domanda è quale percorso lato server usare: SMTP tramite una libreria come Nodemailer, oppure una richiesta HTTP a un API email. Questo articolo mostra entrambi.

Perché il browser non può inviare email?

L'invio delle email avviene tramite SMTP, un protocollo TCP. I browser non espongono socket TCP grezzi a JavaScript, quindi non c'è modo lato client di comunicare con un mail server. Anche se fosse possibile, le credenziali SMTP o la chiave API resterebbero nel codice leggibile da chiunque. Il browser raccoglie i dati del form e li invia al backend; il backend invia l'email. Questa separazione è l'intero pattern.

Come si invia da un backend Node con SMTP?

Nodemailer è la libreria standard per SMTP in Node. Configuri un transport una volta, poi chiami sendMail:

import nodemailer from "nodemailer";

const transporter = nodemailer.createTransport({
  host: "smtp.example.com",
  port: 587,
  secure: false,
  auth: {
    user: process.env.SMTP_USER,
    pass: process.env.SMTP_PASS,
  },
});

await transporter.sendMail({
  from: "you@yourdomain.com",
  to: "recipient@example.org",
  subject: "Your receipt",
  text: "Thanks for your order.",
  html: "<p>Thanks for your order.</p>",
});

Funziona bene su un server a lunga esecuzione. La guida completa, inclusi allegati e test in locale, si trova in inviare email con Nodemailer.

Come si invia con un API email HTTP?

L'altro percorso è una richiesta HTTP. Il backend chiama un API email con fetch, evitando di gestire un mail server e comportandosi allo stesso modo sia su un host tradizionale che su una funzione serverless:

const res = await fetch("https://api.bird.com/v1/emails", {
  method: "POST",
  headers: {
    Authorization: `Bearer ${process.env.BIRD_API_KEY}`,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    from: "you@yourdomain.com",
    to: "delivered@bird.dev",
    subject: "Hello from JavaScript",
    html: "<p>It works.</p>",
  }),
});

if (!res.ok) {
  throw new Error(`Send failed: ${res.status}`);
}

La chiave resta sul server, in una variabile d'ambiente, mai esposta al client.

Inviare con Bird

L'SDK Node Bird racchiude la stessa chiamata HTTP così salti la fetch manuale e ottieni risultati tipizzati:

import { BirdClient } from "@messagebird/sdk";

const bird = new BirdClient({ apiKey: process.env.BIRD_API_KEY! });

const { data, error } = await bird.email
  .send({
    from: "you@yourdomain.com",
    to: ["delivered@bird.dev"],
    subject: "Hello from Node",
    html: "<p>It works.</p>",
  })
  .safe();

L'indirizzo sandbox delivered@bird.dev accetta sempre le email, quindi la prima esecuzione conferma la configurazione. Se costruisci il corpo delle email come componenti React, abbinalo a React Email, che renderizza il componente nell'HTML da passare in html.

FAQ

JavaScript lato client può inviare email?

No. I browser non possono aprire connessioni SMTP e qualsiasi credenziale nel codice client è esposta. Il browser invia i dati del form al backend, e il backend invia l'email.

Meglio usare Nodemailer o un API HTTP?

Nodemailer è indicato su un server a lunga esecuzione dove controlli SMTP. Un API HTTP è più semplice quando vuoi evitare di gestire un mail server, ed è la scelta affidabile su piattaforme serverless dove i socket SMTP non sono disponibili.

Dove conservo la chiave API?

In una variabile d'ambiente lato server, letta a runtime. Non deve mai comparire nel codice front-end né in un repository pubblico.

JavaScript da solo non consegna email; lo fa un server. Per approfondire il percorso API, la panoramica del prodotto email e la guida all'invio di email coprono tutti gli aspetti.