AWSで構築したWebページがiOSで表示されない原因と解決方法

2020年をもってAmazon Linuxのセキュリティアップデートのサポートが終了します。

そこでAmazon Linux 2へサイトを移行しようとしたところ、iOSのsafariやchromeといったブラウザでページが表示されない現象が発生。

どうやら通信ヘッダーに不整合があり、ブラウザ側で止められていたようです。

その原因と解決方法について紹介したいと思います。

前置き

サイト自体はEC2上にApache2.4をつかって公開。EC2はALBに紐づけて冗長化構成としています。

ここでEC2に直接アクセスしてみると問題なくページが表示されます。しかし、ALBを介してアクセスするとページが表示されません。

またiOSではダメでしたが、WindowsのEdgeやAndroidのChromeでは正しくページが表示されました。

原因

原因は以下の2つの組み合わせにより発生したものでした。

  • EC2からのレスポンスヘッダにHTTP/2.0への切替を促す”Upgrade: h2,h2c”が含まれていた
  • ブラウザとALBの間はHTTP/2.0で通信されるが、ALBとEC2間は仕様上HTTP/1.1となっていた

直接EC2にcurlしてレスポンスを確かめるとこんな感じ。

HTTP/1.1 200 OK
Server: Apache
Upgrade: h2,h2c
Connection: Upgrade

HTTP1.1で通信している限りはレスポンスヘッダに”Upgrade: h2,h2c”が含まれていても問題なく動作します。

一方ブラウザとALBの間はHTTP/2.0の通信です。にも関わらず、このHTTP/2.0の通信のレスポンスヘッダにも”Upgrade: h2,h2c”が含まれてしまっていました。

HTTP/2.0の仕様ではHTTP/2.0でのレスポンスヘッダに”Upgrade: h2,h2c”があるとNGとのこと。そのため、この不整合によってブラウザが拒絶反応を起こす結果となりました。

この不整合を回避するには以下のように対処します。

対処方法① Apacheの設定を変更する

Apacheの設定を変更してレスポンスヘッダに”Upgrade: h2,h2c”を含めないように修正します。

Amazon Linux 2の標準レポジトリでhttpdをインストールすると、mod_http2というモジュールも同時にインストールされます。

このモジュールが有効になっていると、レスポンスヘッダに”Upgrade: h2,h2c”が含まれてしまうようです。

なのでmod_http2を無効にします。”/etc/httpd/conf.modules.d/10-h2.conf”を開いてコメントアウトするだけです。

# LoadModule http2_module modules/mod_http2.so

Apacheを再起動すると、問題なくページが表示されるようになりました。

対処方法② ロードバランサーの設定を変更する

①が面倒であればALBの設定でHTTP/2.0を無効にすることで対処できます。

無効の設定はAWSのコンソールからボタン一つで変更することができます。

参考

AmazonLinux2のhttpdをALB経由で公開するWeb環境で発生していた、SafariのHTTPS接続エラーを改善してみた

Related Posts