間違った情報が出回っている ようなので注意点など再掲です。
混在コンテンツの規制強化
FC2ブログサービス内で既に自身のブログのSSL化を済ませた方とそうでない方と入り混じっている状況ですが、SSL化を「済ませた」あるいは「これから済ませる予定」の方はこの 混在コンテンツの解消 に真剣に努めなければいけないよ、というアナウンスです。
混在コンテンツというのは ブログ全体がhttpsなのにページ内にhttpが点在している 状態を表します。ですが http全てを無くさなければいけないというわけではない 点に注意。ここについて勘違い・誤った情報が出回っているようです。
スキームとは
スキーム(scheme) というのは以下のサンプルURLの緑色の部位を指します。
https://vanillaice000.blog.fc2.com/
https とありますね。これは通信手段を指定する プロ(ゥ)トコル(protocol) と呼ばれます。URLの文字列中でプロトコル指定されている部位のことを「スキーム」と言うわけですね。
* プロトコルというカタカタに違和感があるのですが、プロゥトコルよりもプロトコルの方が馴染み深いようなので今回はこの発音で統一します。
間違った情報とは
- リンク先の URL を書き換えなければいけないと思っている
- スキーム省略を 万能アクセス指定 だと思っている
この2点です。リンク先URL書き換えの必要はありませんし、スキーム省略は万能指定ではありません。
リンク先URLは混在コンテンツ対象外
「href属性(html)」と「link要素(html)」と「src属性(html)」と「url関数(CSS)」など、それぞれ全く別の物です。この区別がまず付いていないのだろうと思います。
口語的に使われる名称とhtmlの実名称との格差など、以降の章でなるべく平たく説明したいと思います。意味や仕組みが理解できれば迷う場面を減らせます。
a要素のhref属性
<a href="http://xxx.blog.fc2.com/">どこかのブログ</a>
これが href で、これはhtmlの属性です。要素名は a要素。みなさんが「リンク」と口にしてはいますが、要素としては「リンク要素」ではなく「a要素(エー要素, アンカー要素)」なんですね。リンク要素は別に存在します のでこの区別は必要かと思います。
上記はFC2ブログを運営していると頻繁に目にするはずのhtml内容ですね。新投稿画面のWYSIWYG一本、という方は別として(新投稿画面デフォルトモードは記事作成中にhtml内容が表面に出ません)
用途は主に 別のページや別のサイトへの遷移 です。あるいはページ内移動の場合もあります。サンプルのような形で遷移先が外部の場合でも、または自身のブログ内での遷移だとしても、混在コンテンツの対象外 です。
というのは、ページが表示される際にブラウザが能動的にアクセス及びデータ取得を行わなければ表示できない内容というのがありますよね。例えば「画像」例えばページに何かの動きを付けるための「JavaScript」など。これらはページが表示されたときには既に存在あるいは動いていなければいけません。そういうのが混在コンテンツになり得るもの です。
ところが「どこかのページやブログやサイトへのリンク」というのは 閲覧者が自主的にクリックするまでアクセスは行われない わけです。ブラウザが勝手にアクセスを試みることはありません。なので滞在ページ、滞在サイトのセキュリティには影響しないんですね。
a要素のhref属性のスキームを書き換える必要はない
サンプルコードはスキームが http ですが、これを https と直す必要は無い、ということです。それどころか勝手に書き換えてはいけません。相手のサイトアドレスが「http」なのに勝手に「https」に変更してしまってはたどり着けるはずがありません。URLというのは一文字でも違えば別の住所です。
さらには スキームを省略してはいけない んですが、その理由は後述します。
link要素と一般的に言う「リンク」は別物
しつこいですが、多くの方がページ遷移を指して「リンク」と表現します。その場合には前章の a要素 であり、属性は href です。これについては「スキームを書き換えなくて良い(または、書き換えてはいけない)」と説明しました。
htmlには link要素 というのもあります。
<link rel="stylesheet" href="http://xxxx.css" media="all">
同じ href属性 を持っていますが、前章の内容、いわゆるみなさんが「リンク」と表現するのは a要素のhref属性 です。一方こちらは link要素のhref属性 です。要素名が違います。
サンプルは CSSファイル へのリンクです。先程の説明と考え合わせるとどうでしょうか。CSSファイル、つまりスタイルシートは ページが表示されるときには読み込まれて無くてはいけない 類のものですよね。でないとページのスタイリング・デザイン・レイアウトが適用されません。従って
link要素のhref属性のスキームは書き換えなければいけない
書き換えなきゃダメ、といっても、そのファイルにhttpsでアクセスできるかどうかです。できるならば書き換えをし、できなければ 使用を辞める ということになります。でないといつまでも混在コンテンツの解消はできません。
FC2ブログの一般ユーザーさんの多くはここでつまずくことは無いと思います。つまずくとすればテンプレート製作者か、自主的に某のプラグイン(FC2プラグインではなくweb一般のプラグインという広義です)を導入している方。例えばlightbox系のCSSをCDNを利用してhead内に入れている、だとか。
src属性
① 画像
<img src="http://xxxx.jpg">
② スクリプト(JavaScript, JS)
<script src="http://yyy.js"></script>
①は画像の、②はJSのファイルへそれぞれアクセスします。で、今回Googleは http画像も表示させなくする ということを言ってます。img要素もscript要素も同じ src属性 を持っていますが、img要素のそれは「パッシブ混在コンテンツ」であり、script要素のそれは「アクティブ混在コンテンツ」で、パッシブよりもアクティブの方がより危険度が高いため、Google Chromeでは既に能動的にブロックしている というのが2019年この記事を執筆している現在の状況です。パッシブについては「警告はするけれども表示」という策が取られています。ですが今後はパッシブのimgについてもブロックする、という宣言をしたわけですね。
img要素のsrc属性のスキームは書き換えなければいけない
script要素のsrc属性のスキームは書き換えなければいけない
img要素もscript要素も、それぞれのデータファイルをFC2ブログサーバーに置いている場合には対策不要です。FC2が救済措置を取っています。つまり現時点でFC2サーバー内にあるデータファイルは全て https に変更済。
問題は 第三サーバーへの直リンク です。例えばどこかの画像ホスティングサービスに置いてある画像データを表示させている、例えばCDNを利用してスクリプトファイルを掲載している、など。
JSファイルなんですが、今やテンプレートに当たり前に組み込まれている jQuery の基本ファイル。こちらも古いコードのまま継続的に記載している場合はhttpの可能性があります。リリース時期の古いテンプレートなど該当するものもあるでしょう。
ひっかかりそうなのは
- 外部サーバーの画像ファイル
- 外部サーバーのJSファイル
- アクセス解析コードが古いまま
- ランキングサイトのバナー掲載コードが古いまま
- iframe要素
画像ファイル・JSファイルについては置いてあるサーバーがSSL対応を済ませているかどうかによります。これは個々にチェックする必要あり。
アクセス解析やランキングバナーなどは大手であれば既にSSL化済のはずです。各サイトに赴き、新しいコードを取得するようにしましょう。ちなみにアクセス解析の場合は「JS」です。FC2の場合はwebビーコン型ですから「JS + 画像」です。ランキングサイトのバナーは「画像」です。
iframe要素というのは主に別のサイトの内容の一部を自身のサイトのページ内に取り込む役割です。別のサイトですが自主的・選択的なクリックではなくページ表示の初期段階で表示掲載をするわけですから、当然ながら混在コンテンツ対象。アクティブ混在コンテンツです。
iframe要素は相手方のサイトアドレスが http の場合は掲載しない
iframeについては相手方のスキームによって「掲載しない」という一択です。相手方がhttpsに変更している場合のみsrc属性のスキーム書き換えでも可。
URL関数
.xyz { background: url(http://aaa.jpg) }
こちらはCSSですからスタイルシート内の記述です。これも混在コンテンツ対象。何故ならスタイルシートというのはページ表示の際には既に読み込みが(ry
CSSのurl関数のスキームは書き換えなくてはいけない
やってはいけない禁じ手「a要素のスキーム省略」
これは運営もいかんわなー (´・ω・`)
「スキームを省略すると、相手方がhttpの場合はhttpで、httpsの場合はhttpsで自動で通信します」
こんなの嘘だからね (´・ω・`)
正しくは
「スキームを省略すると、滞在ページがhttpならば自動でhttp通信を試み、httpsならばhttps通信を試みる」
です。通信できるかどうかの担保はありません。ともかく滞在ページのプロトコルに従って通信を「試みる」というだけです。
仮に滞在ページが http だとします。外部サイトへのリンクとして
<a href="//xxx.blog.fc2.com/">どこかのブログ</a>
こう記述したとしますね。そしてこの「どこかのブログ」さんのアドレスが http:xxx.com だとします。その場合滞在ページからhttp通信が確定しますので、どこかさんのページにたどりつくことができます。
では「どこかブログ」さんが既にSSL化しており、現在のアドレスが https:xxx.com に変更されていたとします。その場合は2パターンです。どこかさんが リダイレクト を設定していれば自動で転送されますのでたどりつけます。リダイレクトの設定をしていなければたどりつけません。だって住所が違うんだもの。
では滞在中のページが https だとします。同じく
<a href="//xxx.blog.fc2.com/">どこかのブログ</a>
こうしてスキームを省略して記述した場合。「どこかブログ」さんのアドレスが https:xxx.com であるならば、httpsで通信しているのですから何の支障もなくたどりつけます。
ところが「どこかブログ」さんのアドレスが http:xxx.com だった場合。滞在ページからhttps通信を試みていますが、どこかさんのサイトはhttpなのでたどりつけませんし、嫌〜な感じの警告文を目にすることになります。
通常「逆リダイレクト(httpsからhttpへのリダイレクト)」を行う人は居ませんので、永遠にたどりつけない。
相手スキームが不明な場合に httpsサイト からスキーム省略を行ってはいけない
相手方がhttpsであることが明確な場合には利用できます。不明な場合、httpの可能性がある場合には禁じ手です。つまり
スキーム省略とは万能指定ではなく、滞在ページのプロトコルを踏襲するだけ
ということです。そもそもそんな魔法(プロトコル自由自在)が使えるならば 誰も金かけてSSL証明書なんて取らん でしょ (;´-ω-`)yヾ
そもそもa要素のhrefを書き換える必要は無いんやで?
補足説明
何をしたら良いかわからない、読んでも意味がわからない、という方は「言葉の意味」を考えると良いですね。英単語の場合もありますが、わからなければ単語の意味を調べてください。わからない単語や熟語や専門用語をわからないまま聞こうとするからいつまでもわからない。
「混在」とは何かと何かが混ざって存在することです。何が混在しているのか http通信とhttps通信 です。
「コンテンツ」とは 内容、情報の中身 のことです。
「混在コンテンツ」とは ページ内の内容・情報の中にhttp通信とhttps通信が混ざって存在している ことです。
スキーム部分が省略されたURLのことを「相対パス(relative path, レラティブ パス)」と言い、省略されていないものは「絶対パス(absolute path, アブソルート パス)」と言います。
「相対」とは 関係する何かがある という意味です。
「相対パス」は何と関係しているかというと、滞在中のページが採用している通信の仕組み です。従って「滞在ページと同じ通信手段が行われる」わけです。スキーム省略、つまり相対パスでの記述が万能指定でないことは「相対」の言葉の意味がわかれば理解できるはずです。
まとめ
一番の懸念は勘違い情報に踊らされて「a要素のスキーム省略」なんて作業をしてしまうことです。費やした時間は全て無駄になりますし、そもそも間違っているのですから「情報拡散したヤツは責任を取れ」と責任問題に発展する可能性(笑)
しかし公式ちゃんねるの誤情報の件は報告しないとアカンのかい。めんどくさいしご意見番とか揶揄されるのはかんべん
もーなんか。SEOの専門家を雇え って思う ^^;
- FC2ブログの「パーマリンク設定」現時点で仕様や問題点まとめ2019/12/18
- FC2ブログの「パーマリンク設定」を理解する2019/12/15
- パーマリンク設定でちょっと困ってます2019/12/14
- FC2ブログにパーマリンク設定(カスタムURL)が新規実装されました2019/12/13
- 公式テンプレート「wobbly」の表示不備 - 修正済み2019/11/16
- 「はてなブログタグ」リリースに見るFC2のアレでソレ2019/11/07
- ブログ初心者はURLを「見る」ことを意識しましょう2019/10/18
- Google Chromeの混在コンテンツブロック強化に向けて対策を2019/10/17
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます