SSL化後の事象：個別の投稿ページのみ（insecure image)

[Eiji]

WordPress、Simplicityテーマ のバージョン: 2.1.2 20160327
使用しているブラウザ名称とそのバージョン (例: IE11): Chrome

事象：
SSL化後、個別の投稿ページのみ、デベロッパーツールで、以下のinsecure imageのメッセージが出ています。
色々探し回りましたが、当該イメージのリンクがどのファイルに記述されているかわかりません。はてなブログカードで使われているファビコンでしょうか。
改善策をアドバイスいただければ幸いです。なにとぞよろしくお願いします。

Mixed Content: The page at 'https://itwork100.com/test/' was loaded over HTTPS, but requested an insecure image 'http://wp-simplicity.com/wp-content/themes/simplicity-child2-simplicity/images/favicon.ico'. This content should also be served over HTTPS.

[Hidekichi]

全ファイル検索で、/images/favicon.icoを利用している箇所は、customizer.phpの

function get_the_favicon_url(){
  if (is_favicon_enable()) {
    if ( get_favicon_url() ) {
      return get_favicon_url();
    } else {
      return get_stylesheet_directory_uri().'/images/favicon.ico';
    }
  }
}

この箇所だけでした。get_stylesheet_directory_uri()は現在のテーマのスタイルシートがあるディレクトリのURLを返す関数なので、「SSL化後、個別の投稿ページのみ」と言われていることから確実ではありませんが、サイトの設定を再度見直し、http://サイト名になっているような所はないかを確認しておいて下さい。

一般設定、パーマリンク設定でリンクがhttpsから始まっているか、リダイレクトするようなプラグインでの設定、キャッシュプラグイン(及び、(あれば)サーバーサイド)の設定、wp-config.php、カスタマイザーのその他より、ファビコンが有効のチェックを外してみるとか、その他諸々。
これと言う確実な所はわかりませんが、とりあえずわかる所からチェックしか無いかと思います。

[Hidekichi]

ちなみにその手前に、

//ファビコンのURLを取得
function get_favicon_url(){
  $o = get_option('other_options');//旧バージョンのファビコン設定
  $favicon_url = get_theme_mod( 'favicon_url', null );
  return $favicon_url ? $favicon_url : $o['favicon_url'];
}

もあります。ファビコン関係としてはこの2つぐらいでしょうか。

[Eiji]

早々に、丁寧な分かりやすいご回答ありがとうございます。
所々確認してみます。ありがとうございます。

[Eiji]

原因はわかりました。
ただ対策がわからないので可能であれば助言いただけると幸いです。

外部リンクをブログカードに表示する際に、その外部リンクのファビコンのURLが　SSL 非対応（http)だと、insecure imageのメッセージが出るようです。

ブログカードは、blog-card.php (lib/blog-card.php)で設定されていると思いますが、何かアイデアありますでしょうか。
以下は、当該ファイルに記述されているファビコン関連の内容です。

  //サイトロゴを表示する場合
  $favicon_tag = '';
  if ( is_favicon_enable() && get_the_favicon_url() ) {//ファビコンが有効か確認

    //GoogleファビコンAPIを利用する
    ////www.google.com/s2/favicons?domain=nelog.jp
    $favicon_tag = '<span class="blog-card-favicon"><img src="//www.google.com/s2/favicons?domain='.get_this_site_domain().'" class="blog-card-favicon-img" alt="ファビコン" /></span>';
  }
  $site_logo_tag = is_blog_card_site_logo_visible() ? '<div class="blog-card-site">'.$favicon_tag.'<a href="'.home_url().'"'.$target.'>'.get_this_site_domain().'</a></div>' : '';
  $date_tag = '';
  if ( is_blog_card_date_visible() ) {
    $date_tag = '<div class="blog-card-date">'.$date.'</div>';
  }

[Hidekichi]

うちのcloud9はsslですけど、特にエラーっぽいのは吐かないのでsslの設定にも依るのかも知れませんが、今回の質問の場合、googleのapiからファイルそのものを拾ってきてるだけなんで、

<img src="//www.google.com/s2/favicons?domain='.get_this_site_domain().'"

ここでいう、get_this_site_domain()は関数名通り、ドメインを拾います。スキームは取り除かれますので、実質、
//www.google.com/s2/favicons?domain=nelog.jp

こういうアドレスになります。これ直接アクセスしてもらっても表示されますがpngそのものを返してます。ここでもしmixed contentsになるとしたら、//www.google.comここかと思います。

http、あるいはhttpsを省略した場合ブラウザが勝手に正しい方を選ぶんですが、後からsslにしたということで何かしらそこらに問題があるのかも知れません。portの設定とか。
逆を言えば、省略してるからhttpにつながるのであればもうsslにしたわけですし、https//www.google…と書けばhttpsの画像アドレスになるように思うんですがどうでしょう？

指摘されている箇所が例えば、
//www.google.com/s2/favicons?domain=http://nelog.jp
だったとしたら、http:をとらないといけないわけですけれども、そこはすでにドメインのみになっていますので問題にはならないと思うんです。でhttpのサイトでもhttpsに元々なっていたうちのcloud9上でも問題ないのでこの関数自体の動作は問題なしだと思います。

ただ、指摘されているのはその他に「外部ブログカードの時」とあります。これははてなのapiを利用してiframeで読み込まれているため、中身をいじくることはできないのではなかろうかと思います。要は、はてなのサイトを覗き見してるみたいな感じなので。
ただし、うちのcloud9上ではここも問題ありません。

こんな感じです。iframeで読み込まれている中にあるhttpの画像ですが、特にエラーは出ていません。

外部のブログをブログカード化したい、けれどもはてなのapiではエラーが出るということなら、相手サイトがogpを持っていることが前提ですが、
Simplicityを少し改造してみた 番外編part18 外部サイトのogpを取得してブログカードを作る

こんな感じで表示できます。ウチのサイトですが(笑)
相手ブログのアドレス等はsimplicityのget_this_site_domain()とgoogleのapiで取得して表示すればよいですし、だいたい同じような表示にすることはできると思います。

[Eiji]

度々ご丁寧に本当にありがとうございます。
じっくり確認してみます。

[Eiji]

SSL化後、ページの表示速度が体感でも分かるほど、遅くなってしまったため、今回はSSL化そのものを断念することにしました。
ご指摘、ご指南頂いたブログカードのところも今回は深く追求せずに、SSL化するときの課題とします。
親身にご協力いただきまして、誠にありがとうございます。大変感謝しています。

[わいひら]

今更ですが、解決の可能性がある記事が公開されていたので追記です。同様の問題で、検索から訪れた方のためにも。
SSLサーバー証明書を取得したドメインで無料のWorppressテーマ「Simplicity」を導入するときの注意 – Unilateral Curious

SSLサーバー証明を取得したURLにSimplicityを導入してみたら、投稿ページににCSSがあたらない……。調べてみたら、さくらの仕様だった。ということは、Simplicityは関係なくて、Wordpressとさくらの問題？https://t.co/RvF5ahioEs

— Mercy (@MeMeMercyMe) 2016年10月24日

[投稿者]

投稿