Accueil Formations Sécuriser et mettre en ligne son app créée avec l'IA sans coder

Sécuriser sa clé API sur Cloudflare Pages avec une fonction serverless

Retour à la formation
Chapitre 6 Leçon 3
Précédent
Suivant

Dans cette vidéo, apprenez à protéger votre clé API lors de l’intégration d’une IA dans un site, en utilisant une fonction serverless sur Cloudflare Pages. Le focus est mis sur la sécurité et la structuration optimale du code pour éviter toute fuite d’informations sensibles.

Détails de la leçon

Description de la leçon

Cette leçon explore l’intégration sécurisée d’une IA (telle que Gemini) dans une application web, en particulier la manière dont le front-end dialogue avec une IA via une fonction serverless sans jamais exposer sa clé API. L’auteur illustre la nécessité absolue de ne pas placer la clé dans le code client, au risque de la voir interceptée par n’importe quel utilisateur du site.


La solution préconisée est la configuration d’une fonction serverless hébergée par Cloudflare Pages, qui sert d’intermédiaire entre le navigateur et l’IA. Cette fonction, déclenchée sur demande, figure comme un fichier API backend capable de lire la clé au sein des variables d’environnement du projet sans nécessiter de serveur dédié, minimisant ainsi coûts et complexité d’infrastructure.


L’auteur décrit le prompt donné à Loveable (outil de génération de code), spécifiant l’infrastructure (Cloudflare), la nécessité de relayer l’appel API côté serveur uniquement, et l’importance des conventions de nommage pour les clés d’environnement. Le processus englobe également la gestion avancée des erreurs afin de fournir un feedback détaillé à l’utilisateur, facilitant ainsi le diagnostic en cas de dysfonctionnements.


La vidéo met l’accent sur le contrôle précis du déploiement via les paramètres Cloudflare Workers & Pages et rappelle que la vigilance autour du nom exact de la variable d’environnement est primordiale. Enfin, une vérification par console navigateur confirme que la clé API n’est jamais visible côté client. Ce module prépare à d’autres mesures de sécurisation, notamment autour des dépôts GitHub.

Objectifs de cette leçon

À l’issue de cette vidéo, les apprenants sauront :
- Isoler et protéger une clé API lors d’un dialogue front-end avec une IA.
- Mettre en place une fonction serverless Cloudflare Pages pour relayer les requêtes.
- Gérer les variables d’environnement selon la bonne convention de déploiement.
- Diagnostiquer les erreurs au travers d’une gestion centralisée et explicite, facilitant le support et les ajustements.

Prérequis pour cette leçon

Les participants doivent maîtriser :
- Les bases du développement web (HTML, JS, architectures front/back).
- La notion de clé API et de variable d’environnement.
- Une introduction aux outils de déploiement, en particulier Cloudflare Pages ou services équivalents.
- Savoir manipuler une console navigateur pour analyser le code client.

Métiers concernés

Ce module concerne principalement les :
- Développeurs fullstack et front-end.
- Ingénieurs DevOps.
- Spécialistes en cybersécurité.
- Product Owners et chefs de projet digitaux responsables d’intégrations IA ou services externes nécessitant une sécurité renforcée.

Alternatives et ressources

Parmi les alternatives envisageables, on trouve :
- Vercel Functions ou Netlify Functions pour des déploiements similaires.
- Utiliser Google Cloud Functions, AWS Lambda ou Azure Functions pour davantage de flexibilité.
- Employer un backend Node.js classique ou API Gateway.

Questions & Réponses

Placer la clé API dans le front-end rend cette clé visible à tout utilisateur ou visiteur via les outils de développement du navigateur, exposant ainsi la clé à des utilisations frauduleuses ou à une compromission de la sécurité.
La fonction serverless agit comme intermédiaire backend : elle reçoit la requête du client, lit la clé API depuis une variable d’environnement côté serveur, effectue l’appel à l’IA, puis retransmet la réponse au client, garantissant que la clé API ne soit jamais exposée côté client.
Il suffit d’inspecter le code source et les communications réseau avec la console du navigateur (F12). Si la clé API a été correctement protégée côté serveur, elle n’apparaît dans aucun script, ni dans les requêtes, ni dans le stockage client.