【Flutter】webview_flutterをiOSで動かした際に特定のURLだけ表示できなくて困った話

webview_flutterで特定のURLを表示できない問題が発生しました。
iOSだけです。Androidは問題ありません。

問題のURL：https://opac.lib.city.yokohama.lg.jp/opac/

webview_flutterのReadmeで書いてある「https://flutter.dev」や自分のブログ「https://take424.dev」など、いくつかのURLを試した限りは問題なし。

この「opac.lib.city.yokohama.lg.jp」だけ、WebView.onProgressが100%になったあと、WebView.onPageFinishedが呼び出されず、ページが表示されません。

横浜図書館利用状況アプリでflutter_webviewを使っていた際やそこからwebview_flutterに移行した際は、特に問題なく同URLを表示できていたのでかなり頭を抱えました。解決まで2時間ぐらいかかりました。

原因：App Transport Security(ATS)
裏取り：「TLS1.0」が有効になっている
対策：Info.plistにATS例外設定を追加
結果：表示確認完了
おわりに

原因：App Transport Security(ATS)

色々調べているうちに、webview_flutterの使い方ではなく、何か設定の問題じゃないかと思って、うまくいっている横浜図書館利用状況アプリの「ios/Runner/Info.plist」とdiffを取ってみると以下の違いがありました。

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
    <key>NSAllowsArbitraryLoadsInWebContent</key>
    <true/>
</dict>

どうやら「App Transport Security(ATS)」が原因の可能性が高そうです。

ATSとは、iOSで組み込まれている「サーバとアプリケーション間でセキュアな通信を保証するための機能」です。
ATSはデフォルトで有効となっており、Appleが推奨する条件を満たすHTTPS通信のみ許可されます。満たさないHTTPS通信やHTTP通信は不許可となり、通信できません。

Appleが推奨する条件は以下の通りです。

出典：https://www.lac.co.jp/lacwatch/people/20161017_001057.html

公式だと以下のページに記載がありました。

Preventing Insecure Network Connections | Apple Developer Documentation

Enforce secure network links in your app by relying on App Transport Security.

裏取り：「TLS1.0」が有効になっている

早速、「opac.lib.city.yokohama.lg.jp」をSSL Server Testサイトで調べてみると、「TLS1.0」が有効となっていることがわかりました。

上記の通り、Apple推奨条件としては「TLS1.2以上」が定められているので、おそらくこれが原因でATSによって通信がブロックされていると思われます。

SSL Server Testの結果は以下の通りです。

SSL Server Test: opac.lib.city.yokohama.lg.jp (Powered by Qualys SSL Labs)

対策：Info.plistにATS例外設定を追加

本来であれば、サーバーのセキュリティを向上させて対策したいところですが、今回は自分のサイトではなく、サーバー側の設定変更はできないため、ATSの例外設定を行うことで回避することにしました。

色々と細かく設定できるようですが、とりあえず動けばよいので、flutter_webview_pluginで推奨している以下の設定をInfo.plistに追記しました。

ios/Runner/Info.plist

<key>LSRequiresIPhoneOS</key>
<true/>

<!-- ここから追加 -->
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
    <key>NSAllowsArbitraryLoadsInWebContent</key>
    <true/>
</dict>
<!-- ここまで追加 -->

<key>UILaunchStoryboardName</key>

この設定を入れると、アプリ審査時にATS除外の理由を問われることがあるということですが、リリース済みの「横浜市立図書館利用状況」アプリを40回ぐらいアップデートしていますが、今のところ聞かれたことはありません。

セキュリティ対策として細かく設定した方が良いのは確かですが、アプリ審査でそこまでシビアに見られることはないようです。