混在コンテンツ排除のついての総まとめ記事です。
まず最初に、私が制作したテンプレートのみの言及です。FC2ブログテンプレートにはそれぞれの仕様やアップデート状況など環境が常に一定なわけではありませんので、本記事については「Akira制作テンプレート」に限定したいと思います。
追記 2020.4.9
この記事は公開から1年以上経過しています。FC2では「HTTPS置換ツール」が提供されていますのでそちらをご利用になると良いと思います。
FC2ブログ「HTTPS置換ツール(β版)」がひっそりリリース
私今気づきました。なのでいつから提供されているのかわかりません(笑)...
追記 ここまで
対策の事前準備
以前に以下のような記事を書きました。
FC2ブログSSL化後の混在コンテンツの見つけ方【簡易版】
ぼちぼちとみなさんSSL設定を有効化しているようです。 ただ拝見しますとほとんどの方がこの表示です ↓ ブログは https 化済み、ページ内容に http が紛れ込んでいる状態。 混在コンテンツ ですね。 普段からhtmlソースを扱っているという方以外は、気付いてはいても何から手を付けたら良いのかわからない場合もあります。 テンプレートが原因なのか、プラグインなのか、自分が書いた記事なのか、それさえわからな...
こちらの方法を取る場合にはブラウザは問いません。どのブラウザでも同じように作業できます。が、効率はよろしくない。
作業効率を上げるためには Google Chrome を利用してください。本記事はGoogle Chrome利用を前提に話を進めます。
Google Chromeのインストール
以下はダウンロードページへのリンクです。既に入手済みの方は最新版にアップデートを済ませてください。
あるいはChromeでなくとも類似ブラウザ(Chromiumベースブラウザ)でも同じ作業が可能です。
Google Chrome - Google の高速で安全なブラウザをダウンロード
新しい Google Chrome で毎日をもっと快適に。Google の最先端技術を搭載し、さらにシンプル、安全、高速になった Chrome をダウンロードしてご活用ください。
DevTool(ディベロッパーツール)を活用
滞在ページの画面上で右クリックすると「検証」の項目が出てきますのでクリック。すると開発者用ツールが表示されます。Chrome以外のChromiumブラウザでは「Inspect Element」をいう項目になっている場合もあります。
初期状態では上記スクリーンショットのようにブラウザ画面内に表示されます。画面領域を占有されたくない場合には右上の のマークを 長押し するとレイアウトの選択肢が出てきますので、切り離しを選択してブラウザ画面から追い出してください(つまり別窓表示)
ゴチャゴチャと表示されて尻込みするかもしれませんが、 今回使うのはDevToolの下にあるConsole(コンソール)だけ です。
テンプレート修正について
2017年09月22日を含みそれ以降 にDLされた方については何も修正する必要はありません。
スタイルシートの最上部に更新情報を記してありますので各自ご確認ください。2017.9.22以降の日付がある場合には「SSL対応」の文字が無くとも対応済です。
httpsに書き換えてはいけない部位
テンプレート内には http: のスキームをいくつか発見できると思います。が、それらを https: に変更する必要はありません。
- OGP設定関連(head内 og: http://ogp.me/ns# fb〜)
- schema org(構造化マークアップ用json)
- svg(w3.org)
- トラックバック(location replace用JS)
上記3つは混在コンテンツとは無関係です。OGP, schema org. svgは宣言的に用いられているだけでアクセスを飛ばしているわけではありません。また、それぞれの正規アドレスはあくまでもhttpです。
トラックバックについてはまだFC2ブログ全体のSSL強制移行が始まっていませんので、httpのままにしておかないと非SSLブログへのトラックバックができなくなってしまいます(絶対アドレス記載必須のため)
ともかくテンプレートの2017.9.22の日付を確認されまして、それ以降であれば何もする必要はない・してはいけない、ということです。
ただしテンプレートに任意追加した内容についてはhtml, CSS, JSを問わず必ずご自身でスキームのチェックを行ってください。FC2ブログプラグインも含みます。
個別記事で利用した内容、外部ウィジェットの掲載、アフィリエイトやランキングバナーの設置、CSS装飾など、任意追加した内容及びプラグイン内容についてはテンプレートとは関連がありませんので自己責任になります。
テンプレート修正は無い、を前提としてこの記事を書いていますので、これら任意内容に混在コンテンツが有るか・無いか、有るならばどう見つけてどう修正するのか、というのがこの記事の主旨です。
混在コンテンツ対策手順の大前提
Chromeに限定した説明です。ブラウザの特徴というのはまちまちなので全ての説明をしているわけにもいきません。なので限定します。
手順的には
- 混在コンテンツとなっている対象ページを探す --- アドレスバーのインフォメーションマークを確認
- 該当ページ内で混在コンテンツの原因になっている要素(画像やスクリプトやiframeなど)を特定する
という段階を踏みます。なので アドレスバー横のマークに注目する というのが大事です。
このマークが混在コンテンツの印ですから、ほとんどのユーザーはこれが出ないページでは特に何もする必要はありません。ただし スクリプトファイル の掲載に心当たりがある方は右側も気にしてください。この左側は主に 画像 が原因となっている場合に表示されます。右側はスクリプト関連です。詳細は以下の記事を参考に。
FC2ブログ SSL対応中にチェックするアドレスバーの警告は鍵マークだけではない
地味に始まって地味に拡がっているFC2ブログのSSL化(笑) SSL化「する」「しない」の根本的なところは、せっかくFC2運営が用意してくれたのですから、よほどの事情がない限り対応すべきだと思います。 セキュリティを度外視してまでページ上で守る「何か」が何なのか私にはわかりませんが、個人的な理由でSSL化に待ったのかかっている方もいらっしゃると思いますし、それを考慮しての302リダイレクトでの提供ですけれど。 ...
混在コンテンツの対象
単純に http の文字列を探して https に変更、というわけにはいきません。https に変更してはいけないもの もあります。
httpからhttpsに変更必須
- img要素のsrc属性 --- html
- script要素のsrc属性 --- html
- iframe要素のsrc属性 --- html
- backgroundプロパティのurl値 --- CSS
httpからhttpsへの 変更不可または変更前確認必須
- a要素の href属性 --- html
書き換え必須なのは「画像アドレス」「スクリプト(JS)ファイルアドレス」「iframeの相手方サイトアドレス」「背景画像のアドレス」 などです。
httpsへの変更または利用の停止が必須となる要素
画像 --- html
<img src="http://xxxx.jpg" alt="">
スクリプト(JS) --- html
<script src="http://xxx.js"></script>
iframe --- html
<iframe src="https://xxx.html"></iframe>
背景画像 --- CSS
.xxx {
background: url(http://xxx.png)
}
他にも audio, video, object などがありますがブログ内でよく利用されているものは上記の4種ではないかと思います。これらについては修正必須です。
そのうちの「画像」「スクリプト」に関してFC2ブログサーバーにアップロードしたファイルについてはphp, htacess を用いたバックエンド(サーバーサイド)処理が行われてはいますがどうも上手く機能していません。この件は後述します。
いずれにしてもアドレスバーでインフォマークが出ていない場合には修正の必要はありません。過去に使用した画像全てがhttpスキームだからといって全記事の編集ページを開いて確認するようなことはしなくて大丈夫です。なにはともあれインフォマークに従います。
スクリプトについては外部ウィジェットをプラグインフリーエリアで利用していたり、あるいはを常駐でなく単掲載(個別記事掲載)している場合もあるかと思います。Twitterのウィジェットとかそういうの。
これらについてもhttpsへの書き換えが必要ですが、httpsでアクセスしても表示が行われるかどうか、動くかどうか を事前に調べてください。httpでしか表示できないものをhttpsに勝手に変更して良いわけがありませんので、必ず書き換える前に確認。
これはiframeの掲載も同じです。iframeというのは他のページを自身のページに取り込みますので、相手方(取り込む元のページ)がhttpの場合には即座に混在コンテンツとなります。
httpsではアクセスができない、となった場合には 使用しない。それしかないです。
iframeに該当しそうなのは ブログカード ですね。YouTubeもiframeですがこちらはGoogleによる救済処置があります。
プラグインの場合にはファイルサーバーがFC2ブログの場合はhttpsでアクセスできますので書き換えOKです。外部サービスの場合はFC2の責任でもましてテンプレート製作者の責任でもなく、その外部サービスの問題ですから個々に折り合いをつけるようにしてください。
あと、とかくhtmlの方へ目が行きがちですが、CSS内の画像アドレスにも注意を払ってください。
仮に何かしらのプラグイン(FC2プラグインではなくweb一般のプラグイン・ウィジェットのことです)を追加しており、その装飾用CSSを 外部ファイルとして記載している場合には注意。
<link rel="stylesheet" href="https://xxxx.css" media="all">
こんな風にhead内に追加した覚えがある場合。CSSファイル自体のアドレスがhttpsだとしても、中身のCSSソース内にhttpアドレスの画像などが含まれている場合があります。その場合には当然混在コンテンツですし、非常に気づきにくいんですね。
それでも修正しなければいけません。ファイル修正をし、修正後ファイルをFC2ブログにアップロードして利用する、という形になります。元のファイルがCDNだとしても修正する必要があるならばFC2サーバーに切り替えることになります。
a要素のhref属性は細心の注意を(混在コンテンツ対象外)
いわゆる「リンク」のことです。
<a href="http://xxx.com/">第三者サイトへのリンクです</a>
画像やスクリプトというのはページが表示される際に自動でアクセスが行われます。ページを開くと既に画像なんかは表示された状態で目に入りますよね。そういうのが混在コンテンツの対象要素です。
ページ遷移に利用するa要素ですが、ページ遷移というのはユーザーが任意でクリックするまで何も起こりませんし、移動先ページについては同ブログ内であろうと他サイトであろうと滞在ページとは関係がありません。そのページあるいはそのサイトに管理責任があります。なので混在コンテンツの対象とはなりません。
繰り返しますが、自動アクセス系(画像, スクリプト, iframe など)が対象でリンクは対象外。
混在コンテンツ対策をしているということは自身のブログがSSL化しているわけですから、自身のブログへのリンク(別ページに飛ばすとか)は https に書き換えると良いですね。そうすればリダイレクト処理が発生しません。
ただこの「リダイレクト」が存在する以上、無理に書き換える必要はないですよ。
絶対に書き換えてはいけない、あるいは確認必須なのは 第三者サイトへのリンク です。
相手方が http で運営しているのに勝手に https に変えてしまったらそのサイトにはたどり着けませんので確認必須です。
第三者サイトはhttpのまま残しておいた方が良いかもしれませんね。よほどの事情が無い限りSSL化した際にはリダイレクトを用いるはずです。
第三者サイトへのリンクについては スキーム省略 もダメですよ。スキームを省略すると滞在ページと同じプロゥトコルで通信することになります。つまりSSL化後はhttpsで通信するわけです。
相手方がhttpなのに(ry
混在コンテンツの見つけ方
スクロールを行うようにしてください
テンプレートによっては混在コンテンツに気づきにくい場合があります。
事前に但し書きした通り私のテンプレートの話ですよ (´・ω・｀)
表示直後には「混在コンテンツなし(のように見える)」だが、スクロール直後に「混在コンテンツあり」に切り替わるものがあります。
アドレスバーを注意深く見ており、かつスクロールを行った場合には気づけますが、アドレスバーだけ確認してすぐに別ページに移動してしまうと見逃してしまいます。
混在コンテンツ有無の確認時は必ずスクロールを行ってください。
一見しただけで離れてしまわないよう注意。スクロール量はほんの少しだけでOKです。
最近のテンプレート制作は「表示スピード」も考慮しなければいけない時代に入っています。個別記事の下に前後ページへのページ送りがあり、サムネイル画像が表示されるものをいくつか制作しております。
ただページ送りのサムネイル画像はabove the fold(ファーストビュー)内に有りませんので、すぐに表示する必要が無いんですね。従ってスピード対策のために情報の取得を遅らせています。前後ページサムネイル取得のJSが発火するのはスクロール直後です。
前後ページのサムネイル画像を取得するFC2ブログ独自変数というのは今のところありませんので、私がそれ用のJSを書いているわけなんですが、簡単に言うと非同期で前後ページの内容を見に行ってるんです。前後ページは閲覧者の目には見えませんが、JSで内容を見に行っているのですから、そのページ内に混在コンテンツ対象が有った場合には滞在ページも連動して混在コンテンツとなります。
滞在ページがクリーンだとしても前後ページの影響が出る、ということです。
この仕様に賛否あるでしょうが、どのみち混在コンテンツは全て潰さなければいけませんので我慢してください ←
滞在ページに混在コンテンツ要因が無いにも関わらずアドレスバーが混在コンテンツを示している という場合には前後ページを疑ってください。 また、スクロール前は正常、スクロール後にインフォマークが出た場合には前後ページに起因していることが確定します。
DevToolを活用
コンソールというのは下部の黄色っぽい背景の部分で、何かしらのエラー内容などがあった場合に教えてくれるようになってます。
混在コンテンツが有る場合には Mexed content と表示され、数が多い場合には折り畳まれていますので数字横の矢印をクリックして展開します。
Mixed Content: The page at '該当ページアドレス' was loaded over HTTPS, but requested an insecure image '該当画像アドレス'. This content should also be served over HTTPS.
〝xxxページはhttps通信でローディングされましたが、yyyという画像が非安全通信でリクエストされました。この画像もhttpsで受け取れるようにしてください。〟
画像アドレスをクリックすると実際の画像も表示してくれます。「どのページの」「どの画像が」というところまですぐにわかります。
混在コンテンツの対象はほとんどが画像だと思いますが、画像の場合は黄色での表記。これは「passive mixed content」です。
対象がスクリプトファイルやiframeであった場合には黄色ではなく赤色で表記されます。これが「active mixed content」です。
activeはpassiveよりも危険度が高いため ブロック されます。画像はpassiveなので表示自体は行われますが、修正すべき内容です。
ついでですが、私のテンプレートに関してはコンソールで赤字のエラーは出ないはずです。コンソール警告のほとんどはJSに関するもので、赤字エラーが出ている場合には任意追加内容(プラグイン含む)にエラーがあるか、あるいはAdblockによって広告がブロックされているかのいずれかです。後者は気にする必要はありません。わざとブロックしているのですから気にしない(笑)
あとこちらもついでに [Deprecation] となっているのはChrome自体のAPIの変更に関するお報せなので気にしなくて大丈夫です。また、YouTube掲載で大量の赤字エラー祭りになるのはもうおなじみですね。つか自社サービスなんだから調整しろよ。
というわけで、混在コンテンツの発見についてはChromeのDevToolを使えば何も悩む必要がありません。
FC2サーバー上ファイルの救済措置について
--- 追記 2018.11.28
本章の内容については修正されたようです。内容だけは記録として残しておきます。
ここが修正されたのでSSL化による混在コンテンツ対策作業はほとんど発生しないのではないかと思います。
過去掲載画像の混在コンテンツが解消されたようです【追記あり】
--- 2018.11.30 追記 解消された、という記事内容でしたがどうやら一過性だったようです。現在では再び混在コンテンツとなっています。 いちおう記事は消さずに残しておきますが、以下の内容は 現時点では 誤情報です。すみません。...
--- 追記ここまで
--- 追記 2018.11.30
上記1つ目の追記で「解消済」としましたが再度発生しています。今の所システムが安定していませんので状況に応じて追記していく形になると思います。
--- 追記ここまで
これが上手く行ってないですね (´・ω・｀)
先に少し記したように、過去に記事内などではっきりと http とスキームが書書かれている場合にはバックエンドの作業で書き換えを行うというのがどのサービスでも通常の手順です。
raw html(生の・素のhtml, みなさんのテンプレート管理画面に書かれているソースコード + 記事内容)を送信
↓
サーバーへリクエスト(サイトを表示してください)
↓
サーバーからのレスポンス(はいどうぞご覧ください)
・独自変数などのphp処理 --- ここで書き換えが行われる
↓
サイトの表示
・ブラウザに表示される際にはhttpがhttpsに書き換わっている(ただしraw htmlが書き換わることはない, 記事内の画像アドレスも同様)
おおざっぱに説明するとこういう段階を踏んで最終的にブラウザ表示となるわけです。素のhtmlソースに http と記された、例えば「画像」があったとします。それらについてはレスポンスが届く前に https に変更して届けられます。レスポンス後に処理したのでは間に合いません。通信が発生する前にこの書き換え処理を済ませておく必要があります。画像への通信リクエストはレスポンスが届いた「後」に行われます。
で、実際どうなっているかというと、いくつかのパターンがあります。以下はパターン別の状況説明です。raw htmlは書き換わらないよ、というのを念頭に読み進めてください。
正常書き換え, 混在コンテンツの指摘なし
これが本来ですよね。このパターンもあるにはありますが 残念ながら稀。
httpsに書き換わらない
書き換わってないものもありますねぇ (´・ω・｀)
このパターンは http のままなのですから当然混在コンテンツです。
httpsに書き換わっているものの混在コンテンツ
これが一番ワケワカメ。
ブラウザ表示後にDevToolやソース開示(view page souce)やブラウザ拡張で画像URLを表示するものなど、ツールを利用してアドレスを確認しますと https に書き換わっているのが確認できます。がしかしブラウザの判定は 混在コンテンツ という現象が起こっています。
「お前のテンプレートの仕様のせいじゃね？ m9(´・ω・｀)」と思われてもいけませんので、検証は公式テンプレートを設定して行っています。
スクリーンショットでご確認頂けるように、画像のスキームは https に書き換えられています。ところがこのページは混在コンテンツです。混在コンテンツの対象はこの画像です。
スクリーンショットはパソコンのMac OS「Google Chrome」ブラウザです。スマートフォンのiPhone XS(iOS)「Safari」でも同様に混在コンテンツと判断されています。
FC2一般ブログ(独自ドメイン以外)SSL化直後は違ったんですね。ところがある日を堺に軒並み「混在コンテンツ」と判定されるようになりました。
「何故？」や「修正方法は？」については何も言えません(ぇ)
バックエンドの処理ですからユーザーにできることは何もありません。
こうなってくると raw htmlを書き換える他に術がありませんので、編集画面を開いてチマチマ修正… (ﾉД`)ｼｸｼｸ
どうにもできない状況ですよ、というのをお伝えした上で、全画像が同じ症状とも限りません(そこが不思議)ので、今回の手順通り「インフォマークで混在コンテンツを明示されたページのみ対処」という形で良いと思います。もちろんマークが出ないページも含め全部修正する、というのが一番良案ではあります。記事数の多い方は無理ゲーだけど(笑)
書き換えの仕方
対象ページの編集画面を開いたら Ctrl + F キーボードショートカット(Macユーザーは Ctrl を Command に置き換え)を利用して http: を探し、https: に直します。テキストエディターをお持ちでない方はこの方法を取ることになるかと思います。
テキストエディターで作業する場合、くれぐれも テキストエディターなどを利用した安易な一括変換を行ってはいけません。a要素なのかimg要素なのかしっかり確認をしてください。
一括置換を用いる場合には http: を対象にするのではなく src="http: を対象にします。a要素のhref属性の置換を避けるためです。
それでもiframeのsrc属性などはアクセスの可否を確かめる必要はあります。
まとめ
- テンプレートの更新日をチェックすること
- プラグイン・アフィリ・バナー・ウィジェットなど任意追加内容は自己責任で管理
- ページチェックの際はスクロールを行ってアドレスバーを確認
- ブログカードを利用するときはスクリプトファイル(JS取得の場合, はてなブログカードなど)のスキームだけでなく相手先のサイトのスキームもhttpsであることが必須
- 第三者サイトへのリンクは勝手に書き換えたりスキームを省略しない
- 画像のアドレスはとにかく辛かろうとも全部httpsに書き換える(OGP画像以外はスキーム省略可)
「ページ送りサムネイル」に気づいていない方もいらっしゃるかもしれません。滞在ページに問題が見当たらない場合には前後ページの確認を。
ページ送りサムネイルの無いテンプレートは関係ないですよ。その場合には滞在ページ中に問題が必ずあるはずです。
なかなか大変な作業ですが、早い段階から画像アドレスのスキームを省略していた方々はずいぶんと楽ですね。
ただGoogleの推奨は「スキームを省略しない」なので、今後は書いた方が良いのかもしれません。個人的には過敏になる必要は無いと思いますが。
追記 置換ツールの紹介
FC2ブロガーの mochiさん が http→httpsの置換ツールブックマークレットを作ってくださってます。
FC2ブログSSL後の過去掲載画像の混在コンテンツ問題を自分なりにまとめてみました。
なんなの？この現象…ワケが分からなすぎる。 追記：2018/12/6 2018/12/6時点においてFC2ブログ過去掲載画像の混在コンテンツが解消されているもようです。 プリロードされる画像データがhttpsアドレスに変換されたものになっていました。 追記：2018/12/25 記事最後で構想していた連続記事編集を行う置換ツールを作成しました。 FC2ブログの過去記事内のhttp→httpsを自動で連続変換するExcelVBAツール「FC2BlogAutoEdite...
FC2ブログSSL化の混在コンテンツ問題の経緯のまとめと、FC2ブログ画像http→https変換 ブックマークレットの提供もあり。
こちらの置換はFC2画像サーバーのリンクのaタグ以外のhref属性を対象外にしてあり、リンク切れを心配せずにガンガン使うことができますので「書き換えてる時間なんて捻出できない！」という方にとってはかなり強力なツールになると思います。
恐らく使用報告なども不要だと思いますので、そっと手を合わせて感謝しつつ使わせて頂きましょう(笑)
書き換え対象
<img src="http://blog-imgs-xxx.fc2.com/x/x/x/xxx/xxx.jpg">
書き換え対象
<a href="http://blog-imgs-xxx.fc2.com/x/x/x/xxx/xxx.png"><img src="http://blog-imgs-xxx.fc2.com/x/x/x/xxx/xxx.png"></a>
書き換え対象外
<a href="http://xxx.blog.fc2.com/">yyy</a>
私の方でも混在コンテンツの状況をまとめています。
FC2ブログSSL 過去画像全滅の件【12/7 追記あり】
情報が二転三転、というよりもシステムが安定していないといった方が正しいか。 「過去に http を明示して掲載した画像の一部が混在コンテンツのままになる件が解消されました」という記事を書いたのがつい昨日のことなんですが、本日再度混在コンテンツと相成りまして、それどころか現時点では一部のみならず 全滅 といった事態になっております(笑)...
状況が二転三転していますがこれでなんとか落ち着くのではないかと思います。ただ一番良いのは 書き換えること です。そうすればシステムの動向に左右されることはありません。時間が無い方でもmochiさんのツールを利用すれば1ページにつきワンクリックで済むのですから是非。
There are no comments yet.