

現在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アドレス取得の処理が失敗しました。  
[![画像の説明をここに入力](https://i.stack.imgur.com/V4OOM.png)](https://i.stack.imgur.com/V4OOM.png)

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](https://i.stack.imgur.com/7eZim.png)](https://i.stack.imgur.com/7eZim.png)

ローカル実行した時のChrome上のエラー  
[![ローカル実行した時のChrome上のエラー](https://i.stack.imgur.com/U2Cfc.png)](https://i.stack.imgur.com/U2Cfc.png)

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

[code]

    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;
      }
    }
    
[/code]

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

[code]

    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)
    
[/code]

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

開発サーバー：Windows Server 2016 (AWS EC2)  
Webサーバー： Windows IIS  
開発プログラム（以下キャプチャ参照）  
[![画像の説明をここに入力](https://i.stack.imgur.com/Gwl8Q.png)](https://i.stack.imgur.com/Gwl8Q.png)


CC BY-SA 4.0
2020-07-28T02:10:58.433
69048
2020-07-28T04:59:31.353
2020-07-28T04:40:40.070
2376
41275
question
node.js google-chrome typescript https angular
Chromeを利用したAngularアプリケーションにおけるクライアントのローカルIPアドレス取得ができない


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

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

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

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

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


CC BY-SA 4.0
2020-07-28T04:59:31.353
69058
2020-07-28T04:59:31.353
2376
69048
answer