Bonjour à tous

Dans le cadre de mon e-commerce en Wordpress / Woocommerce, j'utilise l'outil Sendinblue pour centraliser tous mes contacts et pouvoir transmettre des email automatisé suivant les actions.

Sur une page spécifique, je fais notamment appel à une API pour updater l'attribut d'un contact. Et pour ce faire, j'utilise un code javascript dans lequel figure la clé API ...

Sauf que je ne veux pas qu'elle figure dans le code source, n'importe qui peut y avoir accès et récupérer tous mes contacts ...

<script>
const options = {
  method: 'PUT',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
    'api-key': 'xkeysib-34cb5ab0f06365XXXXXXXXXXXXXXXXXXXXXd7dcb4a83-79ZUaSvQLzP2dnFw'
  },
  body: JSON.stringify({attributes: {CANAL: '3'}}) // CHANGER LE CANAL EN ACHAT
};
	fetch('https://api.sendinblue.com/v3/contacts/'+data.contacts[0].id, options).then(response => response.json()).then(response => console.log(response)).catch(err => console.error(err));
  });
</script>

Avez-vous une idée de la manière de faire pour justement cacher cette clé API et que ça ne soit pas problématique ?

Merci infiniment pour votre aide

Hello,

Si je me trompe pas, tu dois la mettre dans une variable d'environnement.

Je vois souvent le fait d'intégrer la clé dans un fichier .env mais je ne suis pas certain d'avoir capté la démarche ... c'est ça dont tu parles ?

Bonjour, le fait de mettre ta clés d'API dans une variable d'environnement ne protégeras rien du tout.

Car ta requête réseau elle est toujours envoyer côté client.

Donc n'importe quelle consommateur de ton application qui ouvre la console de développement onglet réseaux voit la requête réseaux partir peut accéder au en têtes requête et réponse  et donc il peut accéder a la clés d'API qui se trouvera très joliment dans les en têtes de la requête .

N'importe quel consommateur peut accéder au outils de débug de sont navigateur:

 Ci-dessus une capture d'écran de ma console de dév dans l'onglet réseaux où on voit les détails d'une requête réseaux.

Notamment l'URL cibler, les en-têtes requête/réponse.

Ci dans cette requête il passait une clés API elle me serait accessible en lecture direct, alors qu'elle ne devrait pas.

Une solution viable pour cacher ta clés d'API des consommateurs finaux,

c'est de monter ta propre application côté serveur qui va servir d' "API Proxy" et utiliser un CORS et/où d'autre technique pour n'autoriser que ton application client à effectuer des requêtes dessus.

Typiquement tu feras une requête réseaux vers:

<script>
const options = {
  method: 'PUT',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({attributes: {CANAL: '3'}}) // CHANGER LE CANAL EN ACHAT
};
    fetch('https:/<ton-api>/contacts/'+data.contacts[0].id, options)
        .then(response => response.json())
        .then(response => console.log(response))
        .catch(err => console.error(err));
    });
</script>

Sans envoyer la clés d'API (sinon ça sert à rien) et ton API va soit avec une stratégie CORS soit une autre technique,

n'autoriser que ton application à effectuer des requêtes et refusera les requêtes provenant d'autre sources.

Le fait de mettre ta clés d'API dans un fichier à part la protège du partage de code,

typiquement si tu as un répository Github de ton projet pour que ta clés d'API ce retrouve pas publiquement sur ton Github tu peux la mettre dans un fichier appart et ajouter le fichier dans le .gitignore pour qu'il ne soit pas envoyer sur le répo.

-
Edité par SamuelGaborieau3 10 mai 2022 à 20:19:04

waou merci pour l'information très précieuse ! c'est hyper intéressant.

Peux-tu me confirmer si je procède de cette manière, ça peut fonctionner :

je crée une page php type https://monsite.com/api.php

je mets dans ce fichier php une sorte de $_GET['data'] pour recevoir la valeur que j'aurai transmis dans le javascript puis je sécurise avec un autre if () pour permettre à seulement mon site d'y avoir accès

Ensuite j'intègre dans le if() toute le traitement quoi ... 

Mais on parle souvent des attaques XSS, cross XSS, sql injection mais cette vulnérabilité me semble la plus courante non ? parce je doute que chaque site protège aussi bien que tu le présentes leur api key ...

-
Edité par Boubz 10 mai 2022 à 21:41:19