2 つのサードパーティ サービスを使用する React アプリがあります。アプリは を使用して起動されましたreact-create-app。
これらのサービスには両方とも API キーが必要です。
1 つのキーは、次のようにスクリプト タグを介して提供されます。
<script type="text/javascript" src="https://myapi?key=MY_KEY">
</script>
もう 1 つの API キーはリクエストで使用されます。実際のキーを定数に保存し、それを使用してリクエストを形成します。次のようになります。
const MY_OTHER_KEY = 'MY_OTHER_KEY'
let url = `http://myotherapi?key=${MY_OTHER_KEY}&q=${query}`
GoogleのベストプラクティスのヒントAPI キーの取り扱いについては、次のように述べています。
APIキーをコードに直接埋め込まない
これが私の最初の質問につながります。
1. で変数を使用するにはどうすればいいですかindex.html?
私のindex.htmlファイルには、次のような 2 つのタグがあります。
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
明らかに、これは変数です。APIキーをコードに直接埋め込まないようにするには、%PUBLIC_URL%どうすれば変数を追加できますか?%MY_KEY%
次のようなものを取得するには:
<script type="text/javascript" src="https://myapi?key=%MY_KEY%">
</script>
この質問に関連して、 のように API キーを定数に保存しても安全ですかMY_OTHER_KEY?
Google も次のように述べています。
アプリケーションのソースツリー内のファイルにAPIキーを保存しないでください
これが私の2番目の質問につながります。
2. API キーはバンドルに含まれませんか?
Googleの言う通りにすると
...環境変数またはアプリケーションのソースツリー外のファイルに保存します
たとえば、外部ファイルにキーを保存するとします。そのファイルは、ある時点で読み取られ、その内容がバンドルにコピーされるか、他の方法で参照されるものと想定します。結局、キーはバンドル内で引き続き表示されますが、見つけにくくなる可能性はあります。これは具体的にどのように役立ちますか?
3. React アプリで API キーを使用する標準的な方法はありますか? それとも個々の開発者次第ですか?
自明ですが、この問題を解決する反応的な方法があればそれを探しています。
助けてくれてありがとう！
ベストアンサー1
1. index.html で変数を使用するにはどうすればよいでしょうか?
回答1:どうぞご覧くださいカスタム環境変数の追加例として示したタイプの環境変数を追加する方法を確認します。
2. API キーはバンドルに含まれませんか?
回答2:スクリプトタグに環境変数としてキー ( MY_KEY) がある場合でも、ページにレンダリングされ、表示されます。通常、これらはブラウザキーであり、クライアント側で使用することを目的としています。リクエストに Http Referer ヘッダーを提供することで、これらを制限できます。これらのキーを保護することの有効性についての詳細ここただし、API キー (などMY_OTHER_KEY) はクライアント側では使用されないはずであり、スクリプト タグでレンダリングしたり、クライアント側の JS に保存したりしないでください。
3. React アプリで API キーを使用する標準的な方法はありますか? それとも個々の開発者次第ですか?
回答3:サードパーティ API キーを使用する標準的な方法は、クライアント側アプリがバックエンド API にリクエストを送信することです。バックエンド API は、サードパーティ API に従ってリクエストをフォーマットし、キーを追加してサードパーティ API を呼び出します。レスポンスを受信すると、それを解凍してフロントエンド アプリが理解できるドメイン オブジェクトに変換するか、生のレスポンスをフロントエンド アプリに送り返します。この方法では、API キーはバックエンドに残り、クライアント側に送信されることはありません。