[解決済み] Google API キーを安全に使用するには

質問

最初のプロジェクトでGoogle Maps APIを使用しています。そうです、私は新人で、これが基本的または明白であれば申し訳ありませんが、私は明確な答えや方向性を見つけることができませんでした。以下は、APIキーを安全に使用することについてGoogleから見つけたドキュメントです。

API キーを安全に使用するためのベストプラクティス

アプリケーションで API キーを使用する場合は、安全に保つように注意してください。認証情報を公開すると、アカウントが侵害される可能性があり、アカウントに予期しない請求が発生する可能性があります。APIキーの安全性を保つために、以下のベストプラクティスに従ってください。

APIキーをコードに直接埋め込まない。たとえば、共有するコードからキーを削除し忘れると、コードに埋め込まれたAPIキーが誤って公開される可能性があります。APIキーをアプリケーションに埋め込むのではなく、環境変数やアプリケーションのソースツリーの外部にあるファイルに保存してください。 アプリケーションのソースツリーの中にあるファイルには、APIキーを格納しないでください。APIキーをファイルに格納する場合は、ソースコード管理システムにキーが残らないようにするため、アプリケーションのソースツリーの外にファイルを置いてください。これは、GitHubのような公開ソースコード管理システムを使用している場合に特に重要です。 APIキーは、それを必要とするIPアドレス、リファラーURL、モバイルアプリだけが使用するように制限してください。各キーを使用できるIPアドレス、リファラーURL、モバイルアプリを制限することで、漏洩したAPIキーの影響を軽減することができます。各キーを使用できるホストとアプリは、コンソールから「認証情報」ページを開き、必要な設定の新しいAPIキーを作成するか、APIキーの設定を編集することで指定できます。 不要なAPIキーを削除する。攻撃される可能性を最小限に抑えるため、不要になったAPIキーはすべて削除してください。 定期的にAPIキーを再生成する。Cloud Platform ConsoleのCredentialsページから、各キーのRegenerate keyをクリックすることで、APIキーを再生成することができます。その後、新しく生成されたキーを使用するようにアプリケーションを更新してください。古いキーは、新しいキーを生成してから24時間は動作し続けます。 コードを一般に公開する前に、コードを確認してください。コードを一般に公開する前に、コードに API キーやその他の個人情報が含まれていないことを確認してください。

私の問題は、Google Map をコードに直接記述することなく、Web サイトに組み込む方法がわからないことです。今、私の 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では、キーが が必要です。 はページ上で公開されていなければなりません。 該当するテキストは

のみが使用できるようにAPIキーを制限してください。 IPアドレスで リファラー URL およびモバイルアプリ を必要とする

Google API Consoleにアクセスし、キーを生成します。キーを生成するのは、クォータの盗難を防ぐために、自分が所有している（またはマップを配置したい）URLに限定します。