Mixed Content(混在コンテンツ)エラーの解消方法 【原因はhttps,httpの混在】
サイトを常時SSL化する過程で、ソースにhttpで送られるコンテンツが含まれているとせっかくSSL化したページなのに「安全ではありません」という表記になってしまいます。


さらに、Googleでは今後リリースされるGoogle ChromeではこのMixed Contentをブロックするという発表がありました。
No More Mixed Messages About HTTPS
FirefoxでもFirefox 23より混合コンテンツをブロックするようになっています。
Mixed Content(混在コンテンツ)エラーを発生させないためには?
Mixed Content(混在コンテンツ)エラーにしないためには
- 画像や外部ファイルは相対パスでリンクする
というのが一番安全です。でもWordPressなどのCMSだとリンクは基本全て絶対パスになります。
httpsでリクエストされているはずがhttpが含まれていたりするとMixed Contentエラーが発生してしまいます。
Mixed Content(混在コンテンツ)を解消するには
最新バージョンのGoogle ChromeやFirefoxでは、デベロッパーツールに警告やエラーが表示されるので解消するのは比較的簡単です。
画像リンクにhttpリクエストが含まれている場合は以下のようなメッセージが表示されます。該当の画像を指定してくれているので修正しやすいです。
Google Chrome

Mixed Content: The page at 'https://mydomain.net/XXX/' was loaded over HTTPS, but requested an insecure image 'http://mydomain.net/XXX/images/thumb30.jpg'. This content should also be served over HTTPS.
https://mydomain.net/XXX/はhttpsでロードされているけど、thumb30.jpgという画像はセキュアなリクエストじゃないといった内容でしょうか。
Firefox
アドレスバーで鍵アイコンをクリックするとページ情報を表示できます。


メディアの項目ではリンクされている画像の一覧が見れます。ここでhttpになっている画像を確認することができます。

JavascriptやCSSなどの外部ファイルの場合
画像だけでなくjavascriptやcssなどの外部ファイルのリンクもMixed Contentエラーになります。
httpリクエストは以下のようなものです
https://developer.mozilla.org/ja/docs/Security/%E6%B7%B7%E5%9C%A8%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84
<img> (src 属性)
<audio> (src 属性)
<video> (src 属性)
<object> サブリソース (<object> が HTTP リクエストを送信したとき)
javascriptのリクエストがhttpのままだとコンソールでエラーが表示されるのですがアドレスバーの鍵アイコンは表示されます。

Mixed Content: The page at 'https://mydomain.net/XXX/' was loaded over HTTPS, but requested an insecure script 'http://mydomain.net/XXX/js/masonry.pkgd.min.js'. This request has been blocked; the content must be served over HTTPS.
javascriptのMixed Contentエラーの場合、javascriptも実行されません。

Firefoxでも鍵アイコンが表示されますが、ページの一部が安全でないと表示されます

javascriptのMixed Contentエラーの場合、javascriptも実行されません。
jQueryのUncaught TypeError: $ is not a functionというエラーも発生しています。
Mixed Contentのエラーを発生させないためには、必ずコンソールを確認するのが重要です。
現在のブラウザではコンソールで注意やエラーを表示してくれるのでエラーが起きても解消しやすいですね。