Récemment, j’ai réalisé que je pouvais créer une interface web simple pour les autres, sans exposer mon serveur comme une auberge espagnole. Et tout ça… sans coder une API. Magie de n8n.

📌 Contexte

Je suis plutôt du genre à utiliser des formulaires n8n, pas des webhooks directs. Mais ça, ça fonctionne bien pour un usage perso, quand on a accès à son workflow n8n.

Quand on veut faire profiter son automatisation aux autres, ça fonctionne beaucoup moins bien :

  • les URLs sont très longues
  • ça nécessite d'utiliser les mêmes canaux de distribution (mail, Telegram...)

Mais récemment, j’ai eu une révélation : si je veux me professionnaliser en automatisation, il faut que les autres puissent interagir avec mes outils.

Et comme je refuse de redéployer une API sur mon VPS (traumatisme post-hack oblige — cf. cet article), j’ai cherché une méthode alternative.

💡 La solution : le double webhook

Voici le principe :

  • Webhook 1 (GET) : tu ouvres une URL publique (ex : https://mon-vps.com/webhook/formulaire) qui sert une page HTML.
    ➔ C’est là que l’utilisateur arrive et voit le "formulaire".
  • Webhook 2 (POST) : c’est l’adresse à laquelle le formulaire envoie les données.
    ➔ Il est invisible, mais c’est lui qui va à proprement parler gérer les données de l’automatisation.
    ➔ Et c’est aussi lui qui va afficher la réponse finale sur la même page, sans même devoir la recharger.

Résultat : tu as un mini-service web, avec lequel l'utilisateur peut envoyer et recevoir de la donnée, totalement géré par n8n, sans exposer d’API vulnérable.

🛠 Exemple concret : un convertisseur d’image

Je vais te montrer un mini service que j’ai construit pour moi-même. L’idée m’est venue en générant des images avec ChatGPT : il produit des PNG super lourds. Du coup, j’ai bricolé un convertisseur qui transforme ces fichiers en JPEG allégés.

🧰 Pré-requis

  • Une instance n8n fonctionnelle
  • Le community node Image Sharp installé

Cette automatisation repose sur deux workflows distincts, chacun avec son propre webhook. C’est ce système de double webhook dont je te parlais plus haut.

🖼️ Workflow 1 : Le formulaire HTML hébergé

Ton premier webhook permet d’héberger ce code HTML :

<form action="https://mon-vps.com/webhook/traitement" method="POST" enctype="multipart/form-data">
  <input type="file" name="data" multiple required />
  <button type="submit">Envoyer</button>
</form>

Ce formulaire est entièrement généré dans un nœud Code et affiché via un Respond to Webhook. L’utilisateur peut y charger ses photos.

📤 Workflow 2 : Le traitement de l'image en arrière-plan

Les fichiers sont alors :

  • reçus par le second webhook,
  • décomposés (si multiples),
  • convertis et allégés en JPEG,
  • puis renvoyés à l’utilisateur sous forme de liens de téléchargement dans une page HTML personnalisée.

Le Respond to Webhook du second workflow se charge de toute la mise en page.

💡 Pourquoi pas du binaire ?

On ne stocke pas les fichiers convertis dans un bucket ou sur disque. Ils sont affichés en base64 directement dans la page.
Pourquoi ? Parce que ça évite de surcharger le VPS avec des fichiers inutiles à long terme — meilleure scalabilité, moins de nettoyage.

🔐 Et côté sécurité ?

  • Le webhook d’affichage (GET) ne fait que renvoyer du HTML. Il peut être protégé par authentification HTTP si besoin.
  • Le webhook de traitement (POST) peut :
    • rester désactivé par défaut,
    • être limité à certaines IPs,
    • ou bien recevoir une authentification si tu veux ouvrir l’accès.

À tester chez toi

Tu veux tester ce système ? Voici les grandes étapes :

  • Crée 2 webhooks dans n8n : un GET (affichage) et un POST (traitement)
  • Utilise des nœuds Code pour générer ton HTML
  • Réponds avec Respond to Webhook pour afficher la réponse finale

Et voilà : mini-service web déployé, sans backend, sans stress.

Workflows à télécharger et réutiliser

Voici les workflows si tu veux reproduire exactement ce que j’ai fait