0

現在Angular7(Nodejs)でWebアプリケーションの開発を行っております。

問題の詳細について

Webアプリケーション(以降アプリと呼びます)へアクセスした時の最初の画面でクライアント端末(本アプリにアクセスする端末)のローカルIPを取得する必要があり、以下のサイトを参考にしてIP取得処理を実装しておりました。

「"http://api.ipify.org/?format=json"によるローカルIP取得」
参考サイト:https://www.c-sharpcorner.com/article/how-to-get-the-client-ip-address-in-angular-application/

"http://localhost:4200/#/"でアプリをローカル実行していた時は上記の方法でアプリは正常に動作していたのですが、
Angularの資源(TypeScript/HTML/SCSS)をビルドして、Windows IISウェブサーバーにデプロイした際にChromeブラウザ特有(と思われる)エラーとしてMixed Contentエラーが発生し、ローカルIPアドレス取得の処理が失敗しました。
画像の説明をここに入力

http通信によるIP取得の処理が原因であることはわかっておりますが、他のサイトを参考にして試行錯誤してみても良い解法が得られません。適切な①https通信による3rdpartyのローカルIP(10.xx.xx.xxのようなpublicでないIP)取得サイトもしくは②npmやnodeモジュールによるローカルIPアドレス取得方法があればご教示頂けますでしょうか。

ちなみに、①について適当なサイトを検索しましたがいずれもパブリックIPの取得サイトばかりでローカルIPに関するサイトは見つけられていません。
②については以下2点について1週間ほど検証しておりますが、typescriptファイル内でローカルIPを取得する処理を上手く構築できておりません。
1.node_modulesの"local-ipv4-address"モジュールの利用
node local-ipv4-addressのコマンドで10.xx.xx.xxのローカルIPをコマンド画面で表示することに成功しましたが、
Angularプロジェクト内に作成したhello.js内にlocal-ipv4-addressに関するコードを書き、"http://localhost:4200/#/"でアプリをローカル実行するとエラーが発生。解決できていません。
Angularプロジェクト内のhello.js
Angularプロジェクト内のhello.js

ローカル実行した時のChrome上のエラー
ローカル実行した時のChrome上のエラー

2.RTCPeerConnectionの利用を検証していますが上手くいきません。
参考サイト:https://stackblitz.com/edit/angular-get-local-ip

import { Component, ChangeDetectorRef, NgZone } from "@angular/core";

declare global {
  interface window {
    RTCPeerConnection: RTCPeerConnection;
    mozRTCPeerConnection: RTCPeerConnection;
    webkitRTCPeerConnection: RTCPeerConnection;
  }
}

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent {
  loading: boolean = false;
  localIp = sessionStorage.getItem('LOCAL_IP');
  private ipRegex = new RegExp(/([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/);

  constructor(
    private zone: NgZone
  ) {  }

  ngOnInit() {
    this.determineLocalIp();
  }

  private determineLocalIp() {
    **window.RTCPeerConnection** = this.getRTCPeerConnection();
    var pc = new RTCPeerConnection({ iceServers: [] });
    pc.createDataChannel('');
    pc.createOffer().then(pc.setLocalDescription.bind(pc));

    pc.onicecandidate = (ice) => {
      this.zone.run(() => {
        if (!ice || !ice.candidate || !ice.candidate.candidate) {
          return;
        }

        this.localIp = this.ipRegex.exec(ice.candidate.candidate)[1];
        sessionStorage.setItem('LOCAL_IP', this.localIp);

        pc.onicecandidate = () => { };
        pc.close();
      });
    };
  }
  private getRTCPeerConnection() {
    return window.RTCPeerConnection ||
      window.mozRTCPeerConnection ||
      window.webkitRTCPeerConnection;
  }
}

※上記コードで太字"window.RTCPeerConnection"で下記エラー

Type 'RTCPeerConnection' is not assignable to type 'RTCPeerConnection & { new (configuration?: RTCConfiguration): RTCPeerConnection; prototype: RTCPeerConnection; generateCertificate(keygenAlgorithm: AlgorithmIdentifier): Promise<...>; getDefaultIceServers(): RTCIceServer[]; }'.
  Type 'RTCPeerConnection' is missing the following properties from type '{ new (configuration?: RTCConfiguration): RTCPeerConnection; prototype: RTCPeerConnection; generateCertificate(keygenAlgorithm: AlgorithmIdentifier): Promise<...>; getDefaultIceServers(): RTCIceServer[]; }': prototype, generateCertificate, getDefaultIceServersts(2322)

環境並びにバージョン情報

開発サーバー:Windows Server 2016 (AWS EC2)
Webサーバー: Windows IIS
開発プログラム(以下キャプチャ参照)
画像の説明をここに入力

1 件の回答 1

1
  1. ローカルIPアドレスは外から見えるものではないので「REST API等でローカルIPアドレスを取得できるサイト」は存在しえません.質問でも利用されているWebRTCを使って画面上にローカルIPアドレスを表示するようなサイトは存在します.なお,参考サイトとして挙げられているページはどこにもローカルIPアドレスなど書かれていないのですが,何を勘違いされたのでしょうか.
    なお,エラーはあくまでもIISがhttpsなのにhttpでAPIを叩こうとしたことでmixed contentとなっているのみです.リンク先掲載コードを元にすれば

    -    return this.http.get("http://api.ipify.org/?format=json");  
    +    return this.http.get("https://api.ipify.org/?format=json");  
    

    のようにhttpsにするのみです.

  2. Angular-CLIを使用されているとのことですが,そうであればほかのコードと同じところに書けばwebpackでrequireが使えるようになるはずです.尤も,当該パッケージlocal-ipv4-addressはただnode上で各OSのAPIを叩くものであってブラウザ上でのIPアドレスの取得には対応していないようですが.

  3. どうやら当該のエラーというのはTypeScriptのコンパイルエラーのようですが,window.RTCPeerConnectionを上書きしようとしているために発生しています.(そもそも型の再定義もいらない気がしますが)
    当該の行は単にconst RTCPeerConnection = this.getRTCPeerConnection()でいいのではないでしょうか.

7
  • ご回答ありがとうございます。 0.これまでの検証ではリンク情報をhttpからhttpsに変更することでブラウザに表示されるアウトプットが異なっておりました。 api.ipify.org/?format=json ⇒"10."から始まるプライベートIPが表示 api.ipify.org/?format=json ⇒"98."から始まるパブリックIPが表示 ⇒リンクをhttpからhttpsへ変更することでmixed contentを解消できますが、 クライアントのプライベートIPアドレス取得はできません。
    – ossy
    Commented 2020年7月29日 1:20
  • 1.おっしゃる通り、パッケージ"local-ipv4-address"はブラウザ上でのIPアドレスの取得には対応していないようなので この方法はナンセンスであることを認識しました
    – ossy
    Commented 2020年7月29日 1:20
  • 2.WebRTCPeerConnectionによるクライアントのプライベートIPアドレスを取得する検証を実施しました。 一般的にはコネクション作成時に作成されるICE(Interactive Connectivity Establishment)の通信経路候補リスト情報にプライベートIPが含まれるため、この仕様を利用して当該IPを取得する手法が下記のサイトで紹介されていますが、現在ChromeとFirefoxはSDPにプライベートIPを含める仕様ではなくなっており(厳密にいうとプライベートIPの代わりにUUID.local形式で表示に変更されていたため)、WebRTCによるプライベートIP取得も不可というところまで判明しました。 programmingwithnaveen.com/2017/12/26/get-client-ip-in-angular qiita.com/nightyknite/items/26090efff7d2f0a66300
    – ossy
    Commented 2020年7月29日 1:20
  • 当初Chrome上でクライアントのプライベートIPを取得し、アプリケーションでそのIPを引数としてDBのテーブルデータを取得する処理フローを検討しておりましたが、上記の検証結果よりこのような処理フローを実現するためのプライベートIP取得は難しいものなのでしょうか。@hinaloe
    – ossy
    Commented 2020年7月29日 1:20
  • プライバシー理由からも塞がれる程度には(初耳でしたが当然ですね)取得できるべきではないということですね。お使いのネットワークはProxy下でしょうか。当該のAPIはX-Forwarded-ForヘッダーがあるとそのヘッダーにあるIPアドレスを返すようになっているようです。例: curl -v 'http://api.ipify.org/' -H 'X-Forwarded-For: 1.1.1.1'
    – hinaloe
    Commented 2020年7月29日 9:19

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。