JavaScriptでAPIキーやトークンを扱う方法

Question

現在、Webサイトを制作しています。

JavaScriptでとあるAPIを用いた処理を考えています。
このAPIはドメインのよってアクセスを制限する等の機能がないようです。
このため、単純にJavaScriptのソース上にAPIキーを載せると、
APIキーが丸見えになって良くないのでは、と思います。

そこで、別にAPIキー等を記述したJSONファイルkey.jsonを用意して、

{
		"url":"https:hoge.com",
		"token":"API-KEY"
}

これをAPI処理を書いたソース上で、

var url = "";
var token ="";

$.getJSON("key.json", function(json){
url = json.url;
});

$.getJSON("key.json", function(json){
token = json.token;
});

というように読み込む形にし、key.jsonはApacheにてmain.jsからのみアクセスを許可する、という設定にすれば、APIキーはセキュアに守られますか？

（ここまで書いてて思ったのですが、main.jsにてurl,token 変数に代入した時点で丸見えで意味がないのでは…と思いました）

Answer 1

APIを中継するためのWebサーバを立てて（キーはサーバに保存して外には出さない）、そこで適宜アクセス制御をかける、ぐらいしかキーを公開せずに済む手段はなさそうですね。

Comments

[peanuts]

回答ありがとうございます。
やはり、そうですよね。Node,jsについて、一度学びサーバーサイドで処理を行う方法をとってみたいと思います。