Envoyer des e-mails avec JavaScript

JavaScript envoie des e-mails depuis un serveur, jamais directement depuis le navigateur. Le code côté client ne peut pas ouvrir de connexion SMTP, et placer des identifiants e-mail dans une page les exposerait à quiconque ouvre les outils de développement. La vraie question est donc quelle méthode côté serveur utiliser : SMTP via une bibliothèque comme Nodemailer, ou une requête HTTP vers une API e-mail. Cet article présente les deux.

Pourquoi le navigateur ne peut-il pas envoyer d'e-mail ?

L'envoi d'e-mails passe par SMTP, un protocole TCP. Les navigateurs n'exposent pas de sockets TCP bruts à JavaScript, il n'existe donc aucun moyen côté client de communiquer avec un serveur de messagerie. Même si c'était possible, les identifiants SMTP ou la clé API se trouveraient dans du code lisible par tous. Le navigateur collecte les données du formulaire et les envoie à votre backend ; le backend envoie l'e-mail. Cette séparation constitue le schéma complet.

Comment envoyer depuis un backend Node avec SMTP ?

Nodemailer est la bibliothèque standard pour SMTP dans Node. Vous configurez un transport une fois, puis appelez 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>",
});

Cette approche fonctionne bien sur un serveur persistant. Le guide complet, y compris les pièces jointes et les tests en local, se trouve dans envoyer des e-mails avec Nodemailer.

Comment envoyer avec une API e-mail HTTP ?

L'autre méthode est une requête HTTP. Votre backend appelle une API e-mail avec fetch, ce qui évite de faire tourner un serveur de messagerie et fonctionne de la même manière sur un hébergement classique ou une fonction 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 clé reste sur le serveur, dans une variable d'environnement, jamais envoyée au client.

Envoyer avec Bird

Le Bird Node SDK encapsule ce même appel HTTP pour que vous n'ayez pas à gérer manuellement fetch et obteniez des résultats typés :

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'adresse sandbox delivered@bird.dev accepte toujours les e-mails, la première exécution confirme donc votre configuration. Si vous construisez vos corps d'e-mails sous forme de composants React, combinez cela avec React Email, qui rend le composant en HTML à passer dans html.

FAQ

JavaScript côté client peut-il envoyer des e-mails ?

Non. Les navigateurs ne peuvent pas ouvrir de connexions SMTP, et tout identifiant dans le code client est exposé. Le navigateur envoie les données du formulaire à votre backend, et le backend envoie l'e-mail.

Faut-il utiliser Nodemailer ou une API HTTP ?

Nodemailer convient bien sur un serveur persistant où vous contrôlez SMTP. Une HTTP API est plus simple lorsque vous voulez éviter d'exploiter un serveur de messagerie, et c'est le choix fiable sur les plateformes serverless où les sockets SMTP ne sont pas disponibles.

Où conserver la clé API ?

Dans une variable d'environnement côté serveur, lue au moment de l'exécution. Elle ne doit jamais apparaître dans le code front-end ni dans un dépôt public.

JavaScript seul ne distribue pas d'e-mails ; c'est un serveur qui s'en charge. Pour approfondir la méthode API, la présentation du produit e-mail et le guide d'envoi d'e-mails couvrent les différents aspects.