web-dev-qa-db-ja.com

JSセットアップでAPIキーを非表示にする

キーを必要とするサードパーティAPIを使用するHTML + CSS + JSセットアップを使用してシンプルなUIを作成しています。gitignoreおよび自分からアクセスできるファイルにキーを保持したいJavascriptファイル。このプロジェクトを展開するつもりはありません。コミットする前に一時的に変数を削除せずにGitHubにプッシュできるようにしたいだけです。

私が見つけたすべての応答は、Node.js、React/Webpack、または他のサーバーセットアップでのセットアップに関連していますが、サーバーまたはトランスパイラーを持っていないため、これだけのためにたくさんのクラフと構成を追加したくありません。それを行う方法はありますか？別のJSファイルに保存してインポート/エクスポートしようとしましたが、構文が正しくないか、しようとしていたものがトランスパイラーを必要としていました。試行のバリエーションごとに、構文エラーまたは未定義の変数が発生しました。

キー情報：

  1. これは、ブラウザでindex.htmlを開くだけのように、完全にローカルで実行されるプロジェクトです。したがって、クライアントでキーが公開されることを心配する必要はないと思います。
  2. 私のセットアップには、index.html、main.js、およびstyle.cssがほとんど含まれています。
  3. プロジェクトをGitHubにプッシュしたいので、main.jsに追加できるが.gitignoreでアクセスできるmain.jsとは別のファイルにAPIキーを変数として保存したい。
  4. フレームワークなどを使用せずに、これを可能な限りシンプルに保ちます。非常にシンプルで軽量でない限り、これを機能させるためだけにライブラリを追加したくありません。
javascriptecmascript-6environment-variablesapi-key
6
AnnieP

最善の策は、環境変数またはシークレットストアのいずれかから、環境自体から必要なシークレットを引き出すことです。

特定の実装は、使用しているサーバーレスプロバイダーによって異なりますが、たとえばAWS Lambdaではenv変数を設定できます。

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

また、好みや要件に応じてキー管理サービスまたはパラメーターストアを使用できます。

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

人々がサーバーレスタグを見てこれを見つけた場合に備えて、上記の場所を残してください。更新された質問に基づいた以下の更新。

したがって、更新された質問を正しく理解したら、APIキーを除くすべてのコードをgitにチェックインし、ローカルファイルシステムのみでファイルを提供し、そのローカルコピーがAPIキーにアクセスできるようにする必要があります。

これを行う最も簡単な方法は、問題の変数を次のように定義する別の.jsファイルを用意することです。

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

次に、index.htmlに、設定が必要なスクリプトの前にそれを呼び出す別のスクリプトタグがあります。

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

Main.jsでは、変数configを参照して使用できます。同様に、.gitignore 'config.js'を使用できます。

9
Paul