概要

Google Maps Apiを使ったコードをJSFiddleで共有しようとした時にAPIキーの扱いに迷ったのでその時の試行錯誤と解決策の記録。

最初に結論

1. Google Clound PlatformでAPIキーのHTTPリファラーに以下のドメインを追加する。

jsfiddle.net
jshell.net
*.jshell.net

これでAPIキーの利用をJAFiddleからのアクセスのみに制限できる。

1. APIキーで呼び出すことのできる有効なAPIを指定して制限する

// 使うAPIだけ選択
Directions API
Maps JavaScript API

もし他人にキーを悪用されたとしても使用できるAPIを制限しておくことで過剰なアクセスを回避できる。

まえがき

元々APIキーを生成した時にローカルからしかアクセスできないようHTTPリファラーの制限をかけていた。

JSFiddleで共有しようと思い、HTTPリファラーにJSFiddleのドメインを追加してみたものの地図がエラーで表示されず(最終的にはこのやり方であっていた。登録するドメインがダメだったぽい。)色々試すことになった。

やってみたけどダメだったこと

1.APIキーの制限を「なし」に設定

Google Cloud PlatformのAPIキー設定で「キーの制限」を「なし」に設定する。

エラーは解消され地図が表示された。Directions APIを使ったコードも動いた。しかし、他人にキーが悪用されてしまう危険があるので他の方法を考える。

2.APIキーを指定しない

調べたら似たような悩みを持っている人の質問が見つかった。

https://stackoverflow.com/questions/54805160/google-maps-api-key-privacy

JSFiddleで利用する場合はAPIキーは不要。ResurcesにGoogle Maps Apiを追加してFRAMEWORKS & EXTENSIONSにJQueryを追加すると書いてあるので設定してみる。

1. Resourcesにhttps://maps.googleapis.com/maps/api/jsを追加
2. javascriptの設定のFRAMEWORKS & EXTENSIONSにJQuery x.x.xを選択

地図は表示された。ピンを立てるコードも動いた。しかし、Directions APIを使ったコードが動かなかったのでこの方法もダメだった。

解決策

やっぱりHTTPリファラーでいけるんじゃないかと思って調べていたら以下のページを発見。

https://stackoverflow.com/questions/27956287/how-to-properly-load-google-map-api-in-jsfiddle

APIキーの「ウェブサイト制限」で以下のドメインをHTTPリファラーに追加する。

jsfiddle.net
jshell.net
*.jshell.net

地図も表示されコードも全部動いて解決。懸念点として、他人のJSFiddleソースからも実行できてしまうけど制限無しよりは安全かな。

本当は自分のプロジェクトのみにしたくてjsfiddle.net/[ユーザーID]/*とかで登録してみたけどなんか上手くいかなかった。要調査。