【AWS】Fargate → App Runner に移行したらifame内のコンテンツが Mixed Content エラーになる

経緯

PoC案件でLaravelアプリケーションを開発している際、もともとFargateでデプロイしていたのですが、ほとんどアクセスがないためコストの関係でAppRunnerに移行しました。
移行に当たっては、nginx + php-fpmのマルチコンテナ構成だったのをphp-apacheのシングルコンテナに変えたりしたものの、その他はかなりシンプルに移行することができましたが・・・。

起きたこと

開発中のアプリはGoogleWorkSpaceのアドオンが含まれており、iframe内で動作します。
移行前は問題なくiframe内で動作していたのですが、移行後からは以下のコンソールエラーが出るようになりました・・・。

Mixed Content: The page at '' was loaded over HTTPS, but requested an insecure frame ''. This request has been blocked; the content must be served over HTTPS.

調査

まずは通信内容を確認や！

まずはブラウザの開発者ツールでネットワークの確認をしてみます。
コンソールエラーでhttpになっていると怒られた通信を確認したところ、301リダイレクトが発生していました。
レスポンスヘッダのLocationを確認すると、http://～となっていることが分かりました。コンソールエラーが出た直接原因はこのアクセスにあるようです。

どこでリダイレクトしている？

アドオン自体はかなりシンプルな作りなので特定は簡単でした。どうやらhtaccessの以下の設定のようです。

.htaccess（中略）

# Redirect Trailing Slashes If Not A Folder...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} (.+)/$
RewriteRule ^ %1 [L,R=301]

なるほど、urlの末尾が/で終わる場合は削除する設定があるんですね（特に気にしてなかった）。
iframeに埋め込むURLを確認すると、確かに末尾が/で終わっていました。

なんでリダイレクトするとhttpになったんだ？

おそらくインフラ構成を変えたことで内部通信の挙動が変わった結果起きたと推測します。確認のためデバッグを仕込んでみます。

public/debug.php

<?php
header('Content-Type: text/plain');
echo "X-Forwarded-Proto: " . ($_SERVER['HTTP_X_FORWARDED_PROTO'] ?? 'NOT SET') . "\n";
echo "REQUEST_SCHEME: " . ($_SERVER['REQUEST_SCHEME'] ?? 'UNKNOWN') . "\n";
echo "SERVER_NAME: " . ($_SERVER['SERVER_NAME'] ?? 'UNKNOWN') . "\n";
?>

デプロイ後、アクセスしてみます・・・。

X-Forwarded-Proto: https
REQUEST_SCHEME: http
SERVER_NAME: xxxxxxxxxxxxxxxx.com

なるほど。httpになっているみたいです。AppRunnerの内包しているLB（envoy）がSSL終端になっていて、コンテナ内部ではhttpで通信しているんですね。

だからhtaccessでのリダイレクトで生成されたURLがhttpになってしまっていたようです。

解決方法

いろいろあるとは思いますが、X-Forwarded-Protoの値によってリダイレクト先のスキームを変更するようにしました。

.htaccess

# Redirect Trailing Slashes If Not A Folder...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} (.+)/$
# X-Forwarded-Proto が https なら https で、そうでなければ http で組み立て
RewriteCond %{HTTP:X-Forwarded-Proto} https [NC]
RewriteRule ^ %1 [L,R=301]

また、iframeに埋め込むURLの末尾から/を削除し、そもそもリダイレクトが起きないようにしました。

なんでFargateだと起きなかったんだ(-_-;)

Fargateでは nginx + php-fpm のマルチコンテナにしていました。nginxではそもそもhtaccessを使わないので、リダイレクトが起きていなかったようです。
今回AppRunnerに移行したことで、シングルコンテナにする必要があり、php-apacheをイメージとして使った結果、htaccessのリダイレクトルールが適用されるようになったのが原因のようです。

おわりに

正直nginxやapacheなどは普段ほとんど意識せずに開発しているので、こういうトラブルがあると勉強になってかえって嬉しかったです！（血涙）