PWAアプリをホーム画面に追加した時のリクエストヘッダのオリジンを検証

結論：インストール元ドメインになる

先に結論を言うと、ホーム画面に追加したPWAアプリのリクエストヘッダのオリジンは、インストールした元のドメインになるようです。

ローカルにキャッシュインストールされていても同じです。

以下、検証です。

テストしてみた

Node.jsのExpressで構築したAPIサーバーからデータを取得する「ローカルSPAアプリ」へ、スマホのブラウザ、スマホのホーム画面の両方からアクセスしてみて、Originがどうなっているのかを検証してみました。

構成

• ローカルSPA（Vue.js）-> http://192.168.1.101:9001
• ローカルAPI（Express）-> http://192.168.1.102:3000

APIへは、Vue.jsのaxiosでコールします。

受けるAPI側のコードはこんな感じです。

,
,
, //省略

app.use(function(req, res, next) {

  const hostHeaderIndex = req.rawHeaders.indexOf('Origin') + 1;
  const host = hostHeaderIndex?req.rawHeaders[hostHeaderIndex]:undefined;

  console.log(host);
  next();
});

ブラウザからアクセスした場合

ローカルネットワーク内に立てたローカルSPAに対して、AndroidスマートフォンのChromeブラウザからアクセスしてみると、

http\://192.168.1.101:9001

と、SPAのアドレスがコンソールに出てきます。当たり前ですね。

ホーム画面に追加したSPAの場合

続いて、AndroidのChromeブラウザで表示したローカルSPAをそのまま「ホーム画面に追加」で、スマホ本体にインストールして、インストールしたアプリからアクセスしてみます。

http\://192.168.1.101:9001

ブラウザと同じ結果になりました。

ローカルからなので、「localhost」とかになるのかと思いきや、きちんとオリジナルサーバーと同じホスト名がリクエストヘッダのOriginにセットされるようです。

おまけ

APIのCORSの設定をどうするのが良い？

SPAアプリの場合、データはAPIサーバーから出すことが多いと思いますが、その際にCORSの問題が発生します。

CORSってなに？

ヘッダーに、

"Access-Control-Allow-Origin: *

と入れて対処することはできますが、他のサイトからでもアクセスできてしまうため、データを守るという観点からはなるべく避けたいところです。

そこで、本番ドメイン縛りなどにすることになりますが、PWAでホーム画面にインストールした場合は、Origin縛りをして大丈夫かな？と言うのが、本記事を書くきっかけでした。

Access-Control-Allow-Originは複数設定できない

Access-Control-Allow-Originにカンマ区切りで複数のドメインを設定すればよい気もしますが、Access-Control-Allow-Originは複数設定ができません。

"Access-Control-Allow-Origin: https://aaa.com, https://bbb.com

こういうことができないので要注意です。

PWAアプリをホーム画面に追加した時のリクエストヘッダのオリジンがどうなるのかを検証してみました。

最初の結論に書きましたが、オリジンはきちんと対処してくれるので、気にせずに開発すれば良いと言うことですね。

ただし、Access-Control-Allow-Originを動的に変更するAPIの場合は、インストール元を気にしておく必要がありますね。