Ionic Livereloadで”Only Secure origins are allowed” エラー

はじめに

IonicでAndroidアプリを開発する際、Ionic LiveReload機能を使うと、ソースコードの変更がタイムリーに反映されて、とても便利です。

しかし、Livereloadをオンにした状態で、カメラ、音声デバイスにアクセスするためのgetUserMediaを呼び出すと、以下のエラーが発生して、デバイスにアクセスすることができません。

getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.

本エラーは、アプリの接続先がHTTPS経由になっていないために発生します。getUserMedia以外にも、位置情報を取得する GeolocationのAPIでも発生します。

本記事では、”Only Secure origins are allowed” エラーの対応方法について調べた結果について記載します。

原因と対応方法

本エラーが発生する原因は、Livereload機能を使う場合、開発用のパソコンがHTTPサーバになり、Android端末はHTTPプロトコルで開発用パソコンに接続するため発生すると思われます。

インターネットの記事を調べたり、設定を色々試したりしましたが、Livereloadでは接続プロトコルをHTTP以外に設定することができず、Android端末を使う限り解消する方法は見つかりませんでした。

完全な解消方法ではありませんが、ブラウザでLivereloadを使ってデバッグを行う場合は対応方法が見つかったので以下に記載します。

方法としては、HTTPS-Proxyを使います。ionic serveコマンドで8100ポートにionicのプロジェクトを起動して、HTTPS Proxyを8101に起動します。この状態で、ブラウザでhttps://ip-address:8101にアクセスすることで、Livereloadを使いながら、HTTPS経由で動作確認やデバッグを行うことができます。

Android端末でのデバッグとは完全には一致しませんが、Crosswalkを導入していれば、chromeブラウザを使って動作確認することで、実機に近い形でLivereload機能を使うことができるかと思います。また、Visual Studio Codeのデバッグ機能を使う場合に、IonicLivereloadをtrueにしなければこの問題は発生しません。

HTTPS-Proxy設定方法

自己証明書を作成

開発用のPCにセットする自己証明書を作成するため、CA証明書とサーバ証明書を作成します。作成方法は、こちらのサイトを参考にしてください。以下は、参考サイトに従ってUbuntuで作成した時の例です。

opensslがインストールされていない場合はインストール。

$ apt-get install openssl

CA証明書の作成

秘密鍵の作成。pass phaseは任意の文字列を入力。

$ openssl genrsa -des3 -out ca.key 1024

Generating RSA private key, 1024 bit long modulus
...++++++
...++++++
e is 65537 (0x10001)
Enter pass phrase for ca.key:
Verifying - Enter pass phrase for ca.key:

証明書の署名要求。pass phaseは、先ほど指定した文字列を入力。署名要求の情報を、必要に応じて入力。

$ openssl req -new -key ca.key -out ca.csr

Enter pass phrase for ca.key:
You are about to be asked to enter information that will be incorporated
into your certificate request.
What you are about to enter is what is called a Distinguished Name or a DN.
There are quite a few fields but you can leave some blank
For some fields there will be a default value,
If you enter '.', the field will be left blank.
-----
Country Name (2 letter code) [AU]:
State or Province Name (full name) [Some-State]:
Locality Name (eg, city) []:
Organization Name (eg, company) [Internet Widgits Pty Ltd]:
Organizational Unit Name (eg, section) []:
Common Name (e.g. server FQDN or YOUR name) []:
Email Address []:

Please enter the following 'extra' attributes
to be sent with your certificate request
A challenge password []:
An optional company name []:

証明書への署名。pass phraseは、先ほど指定した文字列を入力。CA証明書であるca.crtが作成されます。

$ openssl x509 -req -days 365 -in ca.csr -out ca.crt -signkey ca.key

Signature ok
subject=/C=AU/ST=Some-State/O=Internet Widgits Pty Ltd
Getting Private key
Enter pass phrase for ca.key:

サーバ証明書の作成

サーバ証明書用の秘密鍵の作成。pass phaseは任意の文字列を入力。

$ openssl genrsa -des3 -out server.key 1024

Generating RSA private key, 1024 bit long modulus
................................++++++
.....++++++
e is 65537 (0x10001)
Enter pass phrase for server.key:
Verifying - Enter pass phrase for server.key:

証明書の署名要求。pass phaseは、先ほど指定した文字列を入力。署名要求の情報を、必要に応じて入力。

$ openssl req -new -key server.key -out server.csr

Enter pass phrase for server.key:
You are about to be asked to enter information that will be incorporated
into your certificate request.
What you are about to enter is what is called a Distinguished Name or a DN.
There are quite a few fields but you can leave some blank
For some fields there will be a default value,
If you enter '.', the field will be left blank.
-----
Country Name (2 letter code) [AU]:
State or Province Name (full name) [Some-State]:
Locality Name (eg, city) []:
Organization Name (eg, company) [Internet Widgits Pty Ltd]:
Organizational Unit Name (eg, section) []:
Common Name (e.g. server FQDN or YOUR name) []:
Email Address []:

Please enter the following 'extra' attributes
to be sent with your certificate request
A challenge password []:
An optional company name []:

秘密鍵からpass Phraseを削除。pass phraseは、先ほど指定した文字列を入力。

$ cp server.key server.key.passphrase
$ openssl rsa -in server.key.passphrase -out server.key

openssl rsa -in server.key.passphrase -out server.key
Enter pass phrase for server.key.passphrase:
writing RSA key

証明書への署名。pass phraseは、先ほど指定した文字列を入力。サーバ証明書であるserver.crtが作成されます。

$ openssl x509 -req -days 365 -in server.csr -signkey server.key -out server.crt

Signature ok
subject=/C=AU/ST=Some-State/O=Internet Widgits Pty Ltd
Getting Private key

以上の作業で、以下のファイルが作成されます。

$ ls -la

total 36
drwxr-xr-x  2 user user 4096 Sep  5 16:19 .
drwxr-xr-x 12 user user 4096 Sep  5 16:09 ..
-rw-r--r--  1 user user  757 Sep  5 16:12 ca.crt
-rw-r--r--  1 user user  603 Sep  5 16:10 ca.csr
-rw-r--r--  1 user user  963 Sep  5 16:09 ca.key
-rw-r--r--  1 user user  757 Sep  5 16:19 server.crt
-rw-r--r--  1 user user  603 Sep  5 16:16 server.csr
-rw-r--r--  1 user user  887 Sep  5 16:18 server.key
-rw-r--r--  1 user user  951 Sep  5 16:17 server.key.passphrase

server.key、server.crt、ca.crtの3つのファイルを開発用PCにコピーしてください。

HTTPS-Proxyの起動

以下のコードを、server.jsとして保存。

参考: https://gist.github.com/justindmyers/266d169e97de20068f78

var fs = require('fs');
var httpProxy = require('http-proxy');
var http = require('http');
var https = require('https');
var express = require('express');
var app = express();

app.use(function (req, res, next) {
console.log(req);
if (req.url === '/') {
console.log("Transforming response");

var _write = res.write;

// Rewrite the livereload port with our secure one
res.write = function (data) {
_write.call(res, data.toString().replace('35729', '35700'), 'utf8');
}
}

proxy.web(req, res);
}
);

// Proxy fpr connect server to use
var proxy = httpProxy.createServer({
target: {
host: 'localhost',
port: 8100
}
});

//https://matoski.com/article/node-express-generate-ssl/
var secureServer = https.createServer({
key: fs.readFileSync('./server.key'),
cert: fs.readFileSync('./server.crt'),
ca: fs.readFileSync('./ca.crt'),
requestCert: true,
rejectUnauthorized: false
}, app).listen('8101', function() {
console.log('Secure Express server listening on port 8101');
});

Node.jsがインストールされていない場合は、Node.jsを開発用PCにインストール。

HTTPS.Proxyを起動

server.jsと、server.key、server.crt、ca.crtのファイルを同じフォルダに保存し、server.jsを実行。

$ node server.js

利用方法

ionicのプロジェクトフォルダに移動

ionic serveを実行。ブラウザが起動し、httpでアプリサイトが起動

$ ionic serve -c

ブラウザを新規に立ち上げ、https://(開発用PCのIPアドレス):8101 を開く。

https側で動作確認、デバッグをします。ソースコードを修正するとタイムリーに更新されます。

以上

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です