はてなブログを https に対応させた話の続きです。
Mixed Contents の修正
HTTPS Checker で Mixed Contest ありと指摘された ページを順次みていき、修正していきます。 自分のサイトの場合は、次のような点について修正しました。
はてなfotolifeの画像
幸い、はてなブログを使い始めたのが最近（2016/8頃、移行の顛末はこちら）だったためか、特に記事の更新をせずとも、https になっていました。 はてなブログへ移行時にインポートした記事も同様です。
これは助かりましたね。
埋め込みリンクの修正
他のサイトや自分の過去の記事にリンクを貼る際に、リンク先が http でかつ埋め込みでリンクを貼っていると、埋め込みが iframe のため、 Actice Mixed Contents として扱われます。
これは、地道に https に直していきます。この時、リンク先のサイトが https に対応していない場合は、URLが https のままとなるのは仕方ないので、埋め込みではなく『タイトル』等のリンク方法に変更します。
Tex 記法
テストサイトでは Tex記法 を含む記事は Passive Mixed Contents となっていました。 で、この Tex 記法を含む記事は、編集画面で更新をしてやると、Mixed Contents が解消されていました。
とはいうものの、テストサイトで、 Mixed Contents となっていたのですが、https 化した本ブログで記事が Mixed Contents か否かを確認する前に、 Tex 記法を含む記事を更新してしまったので、何もしない状態で Mixed Contents だったのかはいまとなってはわからないです。
まあ、少なくとも、記事の更新すれば問題なくなるとはいえるかもしれません。
にしても、確認忘れ、しまったなー。
dropxbox
この部分は、直接的には Mixed Contents とは無関係なのですが、一緒に作業したので備忘録として残しておきます。
はてなブログに移行した際の設定で、画像以外のファイルは、 dropbox から配信するようにしていました（こちらの記事を参照）。
今回、Mixed Contents の確認作業でたまたま気づいたのですが、 dropbox ってファイルをホスティングして公開する機能を廃止していたようです。
単にリンク先からファイルをダウンロードするだけなら今でも使えますが、html や javascript のコンテンツとして扱おうとするとできなくなっていました。
なので、これらのファイルをホストする場所を変更します。 どこがいいかな？と考えたのですが、いろいろと面倒がなさそうだということで、 S3 を使うことにします。
ということで、dropbox で公開していたコンテンツを S3 に移行します。 併せて、URL を dropbox のものから S3 のものに変更します。
なお、 S3 側の公開方法は ウェブサイトホスティングを使うのではなく、ファイルごとにパブリックアクセスを行うという方法をとることにします。
というのも、ウェブサイトホスティングにすると、CloudFront 経由の設定にしないと https でアクセスできなくなるためです。 ホストしているコンテンツもそんなに多くないので、そこまでしなくても、というのが本音です。
OpenLayers
本ブログ中で OpenLayers のサンプルについて書いたものがいくつかありました。 で、記事に埋め込む形で、実際に動作するサンプルを載せていました。 記事作成当時は、ライブラリ自体も http での配信だったので当然記事中でも https でURLを指定しています。
まずはこれを https で取得する必要があります。単純に http -> https でいけるかと思いきやダメでした。困ったなと思って調べていると、CDNで配信していることがわかりました。
ちょうど、記事作成当時、使っていた 2.13.1が配信されていたので、
こちらの一覧から、必要なライブラリのURLを取得して、それを指定します。
また、サンプルの js ファイルを dropbox から配信していたこともあり、前節のとおり、 https 化以前から動いていなかったようです。 そこで、必要な js ファイルを S3 から取得するように変更します。
最後に、タイルサーバーを指定します。OpenLayers （少なくともこのバージョン）では何も指定がなければ、デフォルトの openstreetmap.org のサーバーを http で使うようです。
これについて、上記記事にかかれているように、
map.addLayer(new OpenLayers.Layer.OSM( "OpenStreetMap", // Official OSM tileset as protocol-independent URLs [ '//a.tile.openstreetmap.org/${z}/${x}/${y}.png', '//b.tile.openstreetmap.org/${z}/${x}/${y}.png', '//c.tile.openstreetmap.org/${z}/${x}/${y}.png' ], null) );
のように、タイルサーバーを指定するようにしました。
その他
Mixed Contents とは少し違うのですが、 https 化の際に気になった点を書いておきます。
Slideshare
Slideshare については、CORS でエラーが出るようです。
- www.slideshare.net だけ CORS policy 設定が反映できない · Issue #79 · coderdojo-japan/coderdojo.jp · GitHub
- このブログ（無印吉澤）を HTTPS 対応させました - 無印吉澤
とりあえず、対策はないようです。困りましたね。とりあえずは現状のままとしておきます。
はてなブログのログイン画面
こちらの記事に載っていたのですが、
https://atn.hateblo.jp/entry/2017/11/23/105121atn.hateblo.jp
はてなブログのログイン画面って、ブラウザの横幅を小さくしていくと、アドレスバーに注意のアイコンがつき、『この接続は安全ではありません」が表示されるようになります。 手元のFirefoxで試してみたら、見事に再現しました。
こんなこともあるんですね。なかなか https 化は難しいようです。
さいごに
一応、これで Mixed Contents も解消したはずです。とはいうものの HTTPS Checker で漏れなくチェックできているかちょっとわかりません。現に、 OpenLayers 関係の記事でチェックから漏れているものがいくつかありました。まあ、あとは問題を見つけ次第適宜修正するというのが良いのかな。
とりあえず一段落です。
