web-dev-qa-db-fra.com

Masquage des clés d'API dans la configuration JS

Je crée une interface utilisateur simple avec une configuration HTML + CSS + JS qui utilise une API tierce nécessitant une clé et je voudrais conserver la clé dans un fichier que je peux gitignore et accéder à partir de mon Fichier Javascript. Je ne vais pas déployer ce projet, je veux juste pouvoir le pousser vers GitHub sans supprimer temporairement la variable avant chaque commit.

Toutes les réponses que j'ai trouvées sont liées aux configurations avec Node.js, React/Webpack ou d'autres configurations de serveur, mais je n'ai pas de serveur ou de transpilateur et je ne veux pas ajouter un tas de configurations et de configurations juste pour cela . Y-a-t-il un moyen de faire ça? J'ai essayé de le stocker dans un fichier JS séparé et d'importer/exporter, mais soit je ne pouvais pas obtenir la bonne syntaxe, soit ce que j'essayais avait besoin d'un transpilateur. Chaque variation de tentative a entraîné une erreur de syntaxe ou une variable non définie.

Informations clés:

  1. Ce projet est exécuté entièrement localement - comme dans, en ouvrant simplement index.html dans mon navigateur - donc je ne pense pas avoir à me soucier de la clé exposée dans le client.
  2. Ma configuration comprend à peu près index.html, main.js, et style.css.
  3. Je veux pousser le projet vers GitHub, donc je veux stocker la clé api en tant que variable dans un fichier séparé de main.js que je peux ajouter à .gitignore mais accès dans main.js.
  4. Je garde cela aussi simple que possible sans frameworks, etc. À moins que ce soit super simple et léger, je ne veux pas ajouter de bibliothèques juste pour que cela fonctionne.
javascriptecmascript-6environment-variablesapi-key
6
AnnieP

Votre meilleur pari est d'extraire tous les secrets dont vous avez besoin de l'environnement lui-même, que ce soit vos variables d'environnement ou un magasin de secrets.

L'implémentation spécifique dépendra du fournisseur sans serveur que vous utilisez, mais par exemple AWS Lambda vous permet de configurer les vars env:

https://docs.aws.Amazon.com/lambda/latest/dg/env_variables.html

et vous pouvez utiliser le service de gestion des clés ou le magasin de paramètres en fonction de vos préférences et de vos besoins:

https://aws.Amazon.com/blogs/mt/the-right-way-to-store-secrets-using-parameter-store/

Laissant ce qui précède en place au cas où les gens le trouveraient en regardant la balise Serverless. Mises à jour ci-dessous basées sur la question mise à jour.

Donc, si je comprends bien la question mise à jour, vous voulez archiver tout votre code pour git, sauf la clé API, servir les fichiers uniquement sur votre système de fichiers local et permettre à cette copie locale d'accéder à la clé API.

La façon la plus simple de le faire serait d'avoir juste un autre fichier .js qui définit la ou les variables en question comme ceci:

// config.js
var config = { // this should be const instead if you're using ES6 standards
  apiKey : '123456789XYZ'
}

Ensuite, dans index.html, ayez une autre balise de script qui appelle cela avant tous les scripts qui ont besoin de la configuration, par exemple:

  <script src='./config.js'></script>
  <script src='./main.js'></script>
</body>

Dans main.js, vous pourrez alors référencer la variable config pour l'utiliser, et de la même manière vous pouvez .gitignore 'config.js'.

9
Paul