反応アプリでAPIキーを使用する
2つのサードパーティサービスを使用するReactアプリがあります。アプリはreact-create-appを使用して起動されました。
これらのサービスは両方ともAPIキーを必要とします。
次のように、スクリプトタグを介して1つのキーが提供されます。
<script type="text/javascript" src="https://myapi?key=MY_KEY">
</script>
他の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">
明らかに、%PUBLIC_URL%は変数です。コードに直接APIキーを埋め込むことを避けるために、変数%MY_KEY%を追加するにはどうすればよいですか？
このようなものを取得するには：
<script type="text/javascript" src="https://myapi?key=%MY_KEY%">
</script>
この質問に関連して、MY_OTHER_KEYのように、APIキーを定数に保存しても安全ですか？
Googleは次のようにも言っています。
APIキーをアプリケーションのソースツリー内のファイルに保存しないでください
これにより、2番目の質問が表示されます。
2。 APIキーはまだバンドルに含まれていませんか？
Googleの言うことをやると言う
...環境変数またはアプリケーションのソースツリー外のファイルに保存します
キーを外部ファイルに保存するとします。そのファイルは、ある時点で読み取られ、その内容はバンドルにコピーされるか、他の方法で参照されます。最終的には、キーがバンドル内にまだ表示されていませんか？これは正確にどのように役立ちますか？
3。反応アプリでAPIキーを使用する標準的な方法はありますか？それとも個々の開発者次第ですか？
自明ですが、この問題を解決する方法があれば、それを探しています。
ご協力ありがとうございました！
1。 index.htmlで変数を使用するには？
回答1：カスタム環境変数の追加 を実行して、表示したタイプの環境変数を追加する方法を確認してください例として。
2。 APIキーはまだバンドルに含まれていませんか？
Answer 2：キーを持っている場合でも（MY_KEY）スクリプトタグの環境変数として、ページ上にレンダリングされ、表示されます。通常、これらはブラウザキーであり、クライアント側で使用することを目的としています。これらは、リクエストでHttp Refererヘッダーを提供することで制限できます。これらのキーを保護する有効性の詳細 here 。ただし、APIキー（MY_OTHER_KEY）はクライアント側で使用されることを想定していないため、スクリプトタグでレンダリングしたり、クライアント側のJSに保存したりしないでください。
3。反応アプリでAPIキーを使用する標準的な方法はありますか？それとも個々の開発者次第ですか？
Answer 3：サードパーティAPIキーを使用する標準的な方法は、クライアント側アプリがバックエンドAPIにリクエストを送信することです。バックエンドAPIは、サードパーティAPIに従ってリクエストをフォーマットし、キーを追加してサードパーティAPIを呼び出します。応答を受信すると、アンパックして、フロントエンドアプリが理解できるドメインオブジェクトに変換するか、未処理の応答をフロントエンドアプリに送り返すことができます。このようにして、APIキーはバックエンドにとどまり、クライアント側に送信されることはありません。