1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Maps JavaScript API のAPIキー入手方法と漏洩対策についての話

Last updated at Posted at 2025-05-22

Maps JavaScript API というAPIがある

Googleが提供しているAPIのひとつです。
これを使ってウェブページを作成すると、例えばページ内にグーグルマップみたいな地図を表示させるといったことができます。

正式名称は Maps JavaScript API ですが、Qiitaなどの解説記事では Google Map API と呼ばれているのをよく見かけますね。

APIキーが必要なタイプのAPIとなっている

Maps JavaScript API を使うにはAPIキー、いわばパスワードのようなものが必要です。
パスワードを知っている人だけが地図表示できるというわけですね。

世の中にはAPIキーを必要としないAPIもあるのですが、Maps JavaScript API には必要です。

Maps JavaScript API のキー発行は Google Cloud で!

そもそも Maps JavaScript API は Google Cloud の機能の一部です。

Google Cloud で「プロジェクト」をひとつ作るという手順を踏むことで、APIキーを入手できます。

プロジェクト作成の手順はこちら(↓)の記事が分かりやすいです。

ちなみに、勤務先など何らかの組織に属しているGoogleアカウントだと、組織の管理者がプロジェクト作成の操作を許可していないかもしれません。その場合、
「Google Cloud Platform サービスが無効になっています。Google Workspace 管理コンソールでサービスを有効にするには、管理者にお問い合わせください。」
というエラーメッセージが出てプロジェクトを作成できないので注意。

ところでキーという仕組みがあるのはなぜ?

ChatGPTに質問してみたところ下記の回答を得ました。

  • 利用者の識別:誰がリクエストを送っているのかを把握
  • 利用制限の適用:1日〇回まで、などの制限を管理
  • 課金管理:利用量に応じて料金が発生するAPIでは、誰に請求するかを判別
  • 不正利用の防止:悪意ある第三者による利用を制限

キーが漏洩してしまうと、第三者がAPI使い放題になってしまいます。勝手にガンガン使われて、Googleから「使用料をお支払いください」と言われたら…。ああ、怖い。

漏洩対策をしよう

というわけで、漏洩しても大丈夫なようにキーの利用制限の設定をしておくべきです。

Google Cloud の設定画面では、下記3種類の制限をかけることができます。

  • ① HTTPリファラーの制限
    • リファラーを制限して自分のページだけがAPIを使えるようにする
      • ※そもそもリファラーとは「リクエストがどのページから来たのか」という情報のこと
      • ※よそのページからAPIを使おうとする(制限に引っかかる)とエラー RefererNotAllowedMapError になる
  • ② APIの制限
    • 当該のキーで利用可能とするAPIの種類を Maps JavaScript API だけに絞る
  • ③ 割り当ての制限
    • APIを使える回数の上限を定める

万が一漏洩したらキーを再発行すればOK

Google Cloud にはAPIキーのローテーションという機能があり、いわばキーの再発行のようなことができます。

ローテーションすればそれまでの古いキーは使えなくなるので安心。

キーはコードに直接記述すれば動作はするが…

さて、では入手したキーをどこでどうやって使うか、です。
最も簡単なのはキーをJavaScriptのコードに直接記述してしまうこと。これでAPIは動作し、地図表示ができます。

ローカル環境でさくっと動作確認するならばこのやり方で良いですね。

さきほども紹介したこちら(↑)の記事でも、キーをコードに直接記述しています。

ところがこのやり方だと、ウェブページを公開したときにキーも一緒に公開されることになります。自らキーを漏洩させていることになります!

Google Cloud の公式ガイド(↑)にも、

API キーをクライアント コードに含めたり、コード リポジトリに commit したりしない

と明記されていますね。

ビジネスの場で漏洩をやってしまうとマズイことになります。。。

キーを直接記述したコードをあえて公開するなら、趣味目的や学習目的で作ったキーだけにしておきましょう。もちろんその場合も、前述の制限はしっかり設定しておきましょう。

終わりに

APIキーについて調べるうちに新たな学びが次々とあって、Qiitaに情報整理しておきたい!と思って書いたのが当記事です。

結局「キーを漏洩させずにページ公開するにはどうすればいいか」が課題として残っているので、それについては今後学んでみようと思っています。

今回は以上です。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?