外部のJavaScriptを読み込む際に実際に通信しているのはどこなのか知りたいです。

Question

あるサイトから外部サイトのJavaScriptを呼び、そのJavaScriptが更に外部のJavaScriptを読み込んだ際に、それぞれの通信がどの箇所で発生しているのかが知りたいのですがご存じであれば教えて頂きたいです。

①サイト：最初に外部のJavaScriptを読み込む
②JSファイル：①の<script>タグで呼び出される（①サイトとは別のサイトに存在）
③GoogleAPI：②のjSからdocument.head.appendChild(○○)で呼び出される
（GoogleAPIのURLは"http://maps.googleapis.com/maps/api/js?key=○○"）

上記の様にしている理由は、③のGoogleAPIを②の環境から叩きたいからです。
①のサイトがオンプレミス環境で複数あり、そのどれもがそれぞれGoogleAPIを叩くとなると、
それぞれのIPアドレスを登録したり（IP制御があるため）、
なにか問題が発生した際に複数の環境に調査に行かなければならないため。
（②はクラウド環境のサイトにあるJS）

ただし、②にてdocument.head.appendChild(○○)としているということは、
呼び出し元の①のheadに③の情報を記載、結果①から通信を行っているように思い、
ここで相談させて頂きました。

もしも上記の方法では①⇒③の通信になってしまっているとしたら、
どのようにすれば回避可能であるかもご存じでしたら教えて頂けますと幸いです。

こういった対応の経験が無くつたない文章で申し訳ございませんが
ご確認の程よろしくお願いいたします。

-補足-
GoogleAPIを使用してGoogleMAPを①のサイトから表示、
緯度経度を取得して①のサイトに持ち帰るという対応をしています。

最初は、
①サイト：オンプレ環境　緯度経度を取得したいサイト
②サイト：クラウド環境　GoogleAPIを呼び出すサイト
③GoogleAPI
として、①のサイトのifarame内に②のサイトを表示し、
②のサイトから③を呼び出し、②から①に緯度経度を渡すということを考えていましたが、
②のサイトから①のサイトを参照してデータを返そうとした際に、
【アクセスが拒否されました】と出てしまうことから断念しました。
（IE11）

Comments

[退会済みユーザー]

ASP というタグは Teratail ではクラシック ASP を指すそうで、ASP.NET とは違うものですが、そうなんですか？

[Kaebnet]

仰る通りです。クラシックASPになります。

[Lhankor_Mhy]

ドキュメントを見ると、HTTPリファラを見ているようなので、プロキシで対応できないものか、などと思いました。
https://developers.google.com/maps/api-key-best-practices?hl=ja#application_restriction
https://developers.google.com/maps/api-key-best-practices?hl=ja#referrer-best-practices-table
https://developers.google.com/maps/api-key-best-practices?hl=ja#proxy_server

[Kaebnet]

ご助言下さりありがとうございます！
こちら確認いたします。

[退会済みユーザー]

質問者さん、無言になってしまいましたが、自分で立てたスレッドを放置しておかないで、レス・回答に対するフィードバックを書いて、クローズするところまでちゃんとやってください。無言で放置はすべての閲覧者・回答者に失礼。

Answer 1

それぞれの通信がどの箇所で発生しているのかが知りたいのですがご存じであれば教えて頂きたいです。

①サイト：最初に外部のJavaScriptを読み込む
②JSファイル：①の<script>タグで呼び出される（①サイトとは別のサイトに存在）
③GoogleAPI：②のjSからdocument.head.appendChild(○○)で呼び出される

以下のような話と理解しています。

(1) ユーザーがブラウザを使って「①サイト」にアクセスする。

(2) 応答として戻ってくる html ページの srcipt src に「②JSファイル」の url が設定してある。ブラウザはその url に要求を出して「②JSファイル」をダウンロードしてくる。

(3) 「②JSファイル」には「③GoogleAPI」にアクセスして要求を出し、返ってきた応答を処理する JavaScript が含まれており、ボタンクリックなどで容易に「③GoogleAPI」から必要な情報を取得できる。

その理解が正しければ、「それぞれの通信がどの箇所で発生しているのか」は、

①サイト：ブラウザ ⇔「②JSファイル」の url の場所（「①サイト」とか CDN など）

②JSファイル：ブラウザ ⇔「③GoogleAPI」

③GoogleAPI：API の提供者次第（DB に情報を取得に行くとか、他の API から情報を得るとか）

Fiddler などのキャプチャツールを使えばある程度調べることができるので、やってみることをお勧めします。

上の画像で #8 が「(1) ユーザーがブラウザを使って「①サイト」にアクセスする」、#9 と #10 が「(2) ・・・ブラウザはその url に要求を出して「②JSファイル」をダウンロードしてくる」、#25 ～ #29 が「(3) ・・・ボタンクリックなどで容易に「③GoogleAPI」から必要な情報を取得できる。」です。

ちなみに、上の Fiddler の画像を撮るのに使った html ページ、heros.js は以下のようになってます。

Answer 2

ちょっと質問の意図がわかりかねるのですが
サーバーサイドのjsでなければjsはクライアントであるブラウザから
呼び出して組み込むものです

Comments

[Kaebnet]

＞jsはクライアントであるブラウザから呼び出して組み込むものです
　外部サイトのjsを読み込んだところで結局はブラウザが通信しているから
　わざわざ間にjsを噛ませる意味がないということですよね・・・・。ありがとうございます。

　サーバーサイドのjsといいますとNode.js等でしょうか、確認してみます。
　ありがとうございます。

[退会済みユーザー]

> 外部サイトのjsを読み込んだところで結局はブラウザが通信しているからわざわざ間にjsを噛ませる意味がないということですよね

そんなことは決してありません。優秀な外部ライブラリは多数存在するので利用価値は十二分にあります。外部ライブラリでは要件を満足しないので、質問者さんが自力で作るということなら話は違うかもしれませんが。