だから、私がやっている最初のプロジェクトでGoogle Maps APIを使用しています...ですから、はい、私は初心者です。これが基本的または明白な場合は申し訳ありませんが、明確な答えや方向を見つけることができませんでした。以下は、APIキーの安全な使用についてGoogleから見つけたドキュメントです。
APIキーを安全に使用するためのベストプラクティス
アプリケーションでAPIキーを使用する場合は、それらを安全に保つように注意してください。資格情報を公開すると、アカウントが侵害され、アカウントに予期しない請求が発生する可能性があります。 APIキーを安全に保つには、次のベストプラクティスに従ってください。
コードにAPIキーを直接埋め込まないでください。コードに埋め込まれたAPIキーは、共有するコードからキーを削除するのを忘れた場合など、誤って公開される可能性があります。 APIキーをアプリケーションに埋め込む代わりに、環境変数またはアプリケーションのソースツリー外のファイルに保存します。 APIキーをアプリケーションのソースツリー内のファイルに保存しないでください:APIキーをファイルに保存する場合は、アプリケーションのソースツリーの外にファイルを保存して、キーがソースコード管理システムに入らないようにします。これは、GitHubなどのパブリックソースコード管理システムを使用する場合に特に重要です。 IPキー、リファラーURL、およびそれらを必要とするモバイルアプリのみが使用するようにAPIキーを制限します。各キーを使用できるIPアドレス、リファラーURL、およびモバイルアプリを制限することにより、侵害されたAPIの影響を軽減できますキー。資格情報ページを開き、必要な設定で新しいAPIキーを作成するか、APIキーの設定を編集することにより、コンソールから各キーを使用できるホストとアプリを指定できます。不要なAPIキーを削除する:攻撃への露出を最小限に抑えるには、不要になったAPIキーを削除します。 APIキーを定期的に再生成:各キーの[キーを再生成]をクリックして、Cloud Platform Consoleの[認証情報]ページからAPIキーを再生成できます。次に、アプリケーションを更新して、新しく生成されたキーを使用します。古いキーは、交換キーを生成してから24時間機能し続けます。コードを公開する前にレビューする:コードを公開する前に、コードにAPIキーまたはその他の個人情報が含まれていないことを確認してください。
今、私の問題は、コードに直接配置しないと、自分のWebサイトにGoogleマップを組み込む方法を理解できないことです。現在、私のAPIは次のようにindex.htmlにあります。
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
しかし、繰り返しますが、これは私のコードで、世界が間違っていると信じているかどうかを直接確認するためのものです。
Google Maps Javascript API v3の場合、キーmustはページで公開されます。該当するテキストは次のとおりです。
APIキーを使用するAPIキーを制限する IPアドレス、リファラーURL、およびモバイルアプリ必要な
Google APIコンソールに移動してキーを生成し、所有している(またはマップを配置したい)URLに制限して、割り当ての「盗難」を防ぎます。
APIキーのベストプラクティスの記事 は、APIキーの使用に関する一般的なガイドラインのみを提供し、Google Maps JavaScript APIなどの特定のエンドユーザー向けAPIでは、APIキーの公開を避けることはできませんエンドユーザー。
したがって、公開Maps JavaScript APIアプリでは、本番システムで使用されるキー、特に公開用のものにリファラー制限を追加し、アプリのドメイン、ホスト、または完全なファイルURLのみを承認することを強くお勧めします。
Google API Console でキーを作成し、Maps JavaScript APIのセットアップ認証情報を選択すると、ウィザードはキーを保護する方法を指示し、承認するURLの入力を求めます。
これにも問題がありました。私がやったことは、サーバーからキーをロードし、キーが取得された後にこのライブラリを使用してGoogle APIをロードすることでした: https://www.npmjs.com/package/google-maps 。さらに、httpリファラーをロックできます