JavaScript APIアクセストークンを保護する方法
サービスにアクセスするためのJavaScript APIを提供する多数のオンラインリソースがあります。より明確にするために、 MapBox の例に基づいて質問を行いますが、これはさまざまなドメインの他の多くのサービスにも当てはまります。
誰かがそのようなサービスをWebアプリケーション（たとえば、MapBoxの地図画像など）で使用する場合、通常、登録/サインアップしてアクセストークンを取得する必要がありますサービスにアクセスします。
サーバー側からAPIを使用する場合、問題はありません。トークンがサーバーのどこかに安全に保存され、サーバーとサービスプロバイダー間の通信時にのみ「公開」されることがわかっています。ただし、JavaScript APIの場合（たとえば、 Leaflet を使用してMapBoxからマップをレンダリングする場合）、アクセストークンユーザーのWebブラウザーに公開されるJavaScriptで-だから、誰かのアクセストークンを見つけるのが非常に簡単になります。私の例では、Leafletを使用して任意のWebサイトにアクセスし、Firefoxで「開発ツール」を開くだけで、JavaScriptコードの注意深い読み取りで使用するトークンが明らかになります。
ただし、このトークンは非常に安全なデータと見なされる必要があります。サービスの使用状況は、このトークンが提供する認証に基づいて追跡されます。使用量に基づいてサービスの料金を支払う場合、それは非常に重要になりますが、支払わない場合でも（無料/スターター/非有料プランを使用する場合など）-サービスの使用は制限されます。それを使用するのは私だけです。
私の唯一のオプションは自分のウェブサーバー経由のプロキシですか？
JavaScriptがユーザーのブラウザーで実行される場合、JavaScript APIが外部サービスにアクセスするために使用するアクセストークンを保護する方法はありますか？
CORSでアクセスを制限する
Webサーバーが、CORSセットアップを使用してJavaScriptからのajaxリクエストでアクセストークンを返すようにします。このメソッドを使用してアプリにアクセスすると、トークンをキャプチャできます。
許可ユーザーへのトークンの提供
Webサーバーに認証を追加して、許可するユーザーに制限付きアクセスを提供することもできます。トークンはこのメソッドでキャプチャできますが、許可されたユーザーのみがキャプチャできます。
プロキシリクエスト
そのトークンを完全に保護する唯一の方法は、サーバーを介してリクエストをプロキシすることです。この方法ではトークンをキャプチャできません。
Javascript APIトークン（および実際にはすべてのクライアントトークン）は、クライアントに常に表示されます（ノードのようにサーバー側のみを使用する場合を除く）。それを回避する方法はありません。既に述べたように、APIキーを真に保護してプライベートに保つ唯一の方法は、それをサーバーに保存し、クライアントに代わってサーバーに要求することです。
Mapboxなどのマップ画像APIについてのみお話ししますが、残念ながらGoogleマップ、Here Maps、Bing Mapsなどのサービスのみが、サービスプロバイダーまたはこのタイプのセキュリティによるIP /ドメインフィルタリングを提供しているようです。提案する。 Justin Poehneltが言ったように、唯一の信頼できる方法はプロキシを構築することですが、通常は禁止されています。これは MapboxのTo にあります：
キャッシュからなど、マップアセットを再配布することはできません、プロキシを使用して、またはマッピングを介してマップアセットにアクセスする代わりにスクリーンショットまたはその他の静的画像を使用してAPI。
CORS headers を参照してください。これらを使用すると、リモートWebサービスを呼び出すことができるドメインを制限できます。