はてなブログで独自ドメインを利用している場合でもhttpsプロトコルによる暗号化された通信を利用できるようになりました。
これに伴い、独自ドメインを利用しているこのブログも早速SSL対応し、ブログのURLがhttpsになりました。。
はてなブログをhttps化したあとに、やるべき事はいくつかあるのですが、その中で一番面倒なのが過去記事の内部リンクや画像リンクを修正する作業です。
混在コンテンツとは
httpsで配信されるブログ内にhttpで配信されるコンテンツがあると、混在コンテンツとして判断されます。
混在コンテンツがあると、ブラウザのURL欄に安全ではないというマークが表示されます。
そして、混在コンテンツをブロックするようにしている場合は、httpで配信されている画像が表示されないという現象が起こります。
aタグのhttpリンクは混在コンテンツには当たらない
先ほどhttpsのブログ内にhttpで配信されるコンテンツがあると混在コンテンツと判断されると書きましたが、厳密にいえば、httpでも混在コンテンツと判断されない要素もあります。
それが、aタグで記載された下記のようなリンクです。
<a href=“https://hatena.example.com/cinnamon.html”>
ブログを書いていると、内部リンクをはじめaタグでリンクを貼ることが多々ありますが、これらのURLをhttpからhttpsに修正しなくても問題はありません。
これは、httpのURLで書かれたリンクでも、リンク先がhttps配信しているサイトであれば、自動的にリダイレクトされてhttps接続されるからです。
混在コンテンツを一気に解消する
「Content-Security-Policy: upgrade-insecure-requests」を使う方法
はてなブログ内の混在コンテンツを一番簡単に解消する方法は、公式サイトでもアナウンスされている「Content-Security-Policy: upgrade-insecure-requests」という仕組みを使う方法です。
はてなブログの詳細設定内にある「headに要素を追加」に下記内容を貼り付けて保存することで、混在コンテンツのエラーは発生しなくなります。
<meta http-equiv=”Content-Security-Policy” content=”upgrade-insecure-requests”>
この「Content-Security-Policy: upgrade-insecure-requests」を使った対応については、デメリットもあります。
それは、ブラウザがこの仕組みをサポートしている必要があるということです。
メジャーなブラウザであるグーグルのChromeやFirefoxはサポートしていますが、iPhoneでお馴染みのSafariやInternet Explorerなどはサポートしているか不明です。
もしこの仕組みをサポートしていないブラウザを利用している人がいると、暗号化されたhttps通信ではなく、平文のhttp通信となってしまい、セキュリティの向上は望めません。
html内の内部リンクと混在コンテンツを一括で修正する
https化に伴う内部リンクの修正や、混在コンテンツを解消する手段として一番確実なのが、htmlを直接修正する方法です。
しかし、記事数が多ければ時間がかかる面倒な作業でもあります。
そこで活用したいのが一括置換ツールです。
はてなブログ用の一括置換ツールで使いやすいのは、下記サイトのツールですが、今回は利用しません。
私がこのサイトのツールを利用しないのは、aタグで記載されたリンクなど混在コンテンツとは判断されないhtml部分も不用意に置換を行ってしまい、リンク切れを起こす可能性があるからです。
そこで私が利用したのが下記サイトで公開されている、混在コンテンツの修正ツールです。
この混在コンテンツの修正ツールは、ソースコードを公開しており、どんな処理を行っているのかがわかるようになっており、信頼できます。
そして何よりも、置換する仕様を公開しているという安心感があります。
公開されている仕様を確認すると、混在コンテンツと判断されないaタグのリンクについては、httpからhttpsに置換されないため、httpsに対応していないサイトへのリンク切れも起きません。
また、一括置換する際に、編集前と後の差分を確認することもできます。
ただ、このツールにはデメリットもあります。
それは、コマンドラインツールという点です。
コマンドラインツールは、一般的なソフトとは異なり、コマンドプロンプト画面でコマンドを入力して実行するスタイルになります。
IT関連の仕事であったり、勉強をしたことがある人ならば使ったことがあると思いますが、それ以外の人にとっては敷居が高く感じられてしまうかもしれません。
ツールの使い方
ここからは、混在コンテンツを解消するコマンドラインツールの使い方について解説していきます。
まずは、ツールのダウンロードです。
今回私は.NET Framework版をダウンロードしました。
圧縮されたフォルダがダウンロードされるので、解凍して任意のフォルダに保存します。
今回私はCドライブの直下にToolsというフォルダを作成して、そこに保存しました。
C:ToolsHatenaBlogTools-2.2-netfx
解凍したフォルダの中には複数のexeファイルがあります。
今回はこの中から「FixMixedContent.exe」を利用します。
コマンドプロンプトを起動して、「FixMixedContent.exe」をコマンドプロンプトにドラッグ・アンド・ドロップします。
次に、半角スペースを空けて、以下のコマンドを入力します。
idの部分には、ご自身のはてなのidを入力し、blog-idにはブログのドメインを入力し、api-keyにはてなブログの詳細設定画面にあるAPIキーを入力します。
–id hatena –blog-id hatena.hatenablog.jp –api-key ****** –fix-mixed-content –dry-run
コマンドを入力してEnterキーを押すと処理が始まります。
なお、上記コマンドでは最後にdry-runというコマンドを付けていますが、これは、はてなブログへの反映は行わず、実際に行われる処理内容を確認だけ行うというコマンドになります。
コマンドを実行すると、コマンドプロンプト画面内に処理内容が表示されます。
記事タイトル横に赤字で「変更あり」となっている記事に混在コンテンツが見つかったことを意味しています。
WinMergeを使った混在コンテンツ修正前後の差分を確認
「FixMixedContent.exe」を使った混在コンテンツ有り無しの確認ですが、先程のコマンドプロンプト画面に結果が表示される使い方だと、どこが変更されるのかが分かりづらいです。
そこで差分表示ソフトのWinMergeを利用します。
※個人的に仕事で使い慣れているWinMergeを使いましたが、WinMerge以外の差分ツールも利用できます。
WinMergeを利用することで、修正前後を比較して見ることができます。
WinMergeをインストールした後に、コマンドプロンプトを起動して、-diff-cmdコマンドを追加で記載して、実行すると混在コンテンツが存在する記事ごとに修正前後の差分を確認できます。
–id hatena –blog-id hatena.hatenablog.jp –api-key ****** –fix-mixed-content –diff-cmd “C:Program FilesWinMergeWinMergeU.exe” –dry-run
なお、混在コンテンツが大量にある場合は、該当する記事ごとにWinMergeが起動するので使い方には注意してください。
内部リンクを一括修正する
混在コンテンツだけでなく、内部リンクをhttpからhttpsに一括修正するには「–fix-blog-url」コマンドを追加して実行するだけです。
–id hatena –blog-id hatena.hatenablog.jp –api-key ****** –fix-mixed-content –fix-blog-url
外部リンクについては、http表記となっていても勝手にhttpsには変更されないので、リンク切れを起こす心配はありません。
修正した記事のリストをファイル保存する
通常コマンドプロンプトでプログラムを実行すると、処理結果はコマンドプロンプト画面に表示されるだけです。
コマンドプロンプト画面に表示される内容は限られるため、ツールを使って大量の記事を修正すると、一部結果しか見ることができません。
そこで、混在コンテンツを解消する「FixMixedContent.exe」を実行した結果を、別ファイルに保存するようにすると後々の確認や追跡が便利です。
別ファイルに保存する方法ですが、以下のように”>”を付けて保存先となるパスとファイル名を記載します。
>C:ToolsHatenaBlogTools-2.2-netfxファイル名.txt
混在コンテンツの存在をチェックして、修正があった場合は、「変更あり」と表示されて、記事本文の修正前後がファイルに出力されます。
不正防止のためにAPIキーを変更する
今回紹介したツールは、はてなブログのidとAPIキーを利用して、ブログ記事の書き換えと保存を行います。
私が利用したコマンドプロンプトツールを開発した作者は、APIキーの保存や記録は行わないと宣言されていますが、念の為ツールの利用が終わったらAPIキーを変更して不正利用の防止を行いましょう。
APIキーの変更方法ですが、詳細設定のAPIキーが表示されている横にある「こちら」を選択します。
はてなアカウントの設定画面が表示されるので、一番下にある「投稿用メールアドレスを変更する」を選択してください。
これでAPIキーが変更されます。
