WordPressのサイトをwgetして静的ファイルにしてS3に投げ、その後、CloudFrontでインターネットから見えるようにしています。
今回初めて、下記のWebサイトの埋め込み機能を使ってみました。
S3に投げたあと参照すると、埋め込みURLの部分だけ文字化けが起こってしまいました。オリジンのWordPressサーバでは起こらず、静的ファイルにしたところで起こっているようです。
オリジンのWordpressでは、iframeからそのサイトを読み込んでいました。
<iframe src="http://hoge.com/2020/05/09/996/embed#?secret=xxxxxxx"></iframe>wgetで取得したあとのファイルでは次のようになっていました。
<iframe src="../09/996/embed.html#?secret=xxxxxxx"></iframe>wget で取得したとき、PHPで変換されて出るところが、静的ファイルになっているようです。iframe が文字化けっとググって見ると、iframe で呼ばれる側のHTML でメタデータで文字セットをちゃんとセットしていないと起こるようです。作成されたembed.html を見てみると、文字セットが設定されていませんでした。
今回は、embaed.html だけが問題なので、wget で取得したあと、S3に送る前に、embed.html を見つけ、文字セットを入れるということを実装しました。実装例は次のとおりです。
find ./ -name 'embed.html' | xargs sed -i "s/<head>/<head><meta charset="UTF-8">/g”修正を反映させると正しく見えていました。
