CloudFront経由にしたらWordPressでビジュアルエディタが使えない

しばらく前からWordPressのビジュアルエディタが使えない状態でした。サーバ側の設定が悪いんだろうと思ってスルーしてました。私1人用のBlogなのであまり気にもしていなかった。

そしたらWordPressでビジュアルエディタが使えない問題の解決策まとめなんて記事を見つけた。
ズバリ書いてありました。CloudFrontが悪さをしてました。
User-agentによってビジュアルエディタを出す、出さないの判断していたのかー

User-agentを確認するPHPをサーバに置いてブラウザでアクセスしてみます。
PHPのCodeは下記の通り

<?php
$ua = $_SERVER[“HTTP_USER_AGENT”];
echo “$ua”;
?>

ビジュアルエディタが見えないパターン

Amazon CloudFront

希望する結果

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36

CloudFront設定変更

CloudFront → Behaviors で変更します。
デフォルトではCache Based on Selected Request HeadersはNone(Improves Caching)になっているはずです。それを下記の図のように変更します。

None(Improves Caching)→Whitelistに変更してUser-agentを追加します。
これでビジュアルが表示されるようになります。

いやーハマッタ^^;;
でも最近テキストのみでビジュアルエディタ使っていないからあまり困ってはいなかったけど解決して良かった。