ホーム > カテゴリ > インターネット・ブログ >

HTTPS(SSL)にしたのにChromeでアドレスバーが「保護された通信」にならない [対応方法]

WebサイトをHTTPS(SSL/TLS)に対応させたのに、Chromeのアドレスバーが緑色の「保護された通信」にならない場合の対処方法です。

Before

After

原因

HTML内にHTTPSとHTTPのURLが混在しているからです。

ChromeのブラウザでF12キー(開発者ツール)を押すと次のようなエラーが表示されていると思います。※<a>タグのリンクはhttpでもOKです。

Mixed Content: The page at 'https://www.petitmonte.com/' was loaded over HTTPS, but requested an insecure image 'http://b.st-hatena.com/images/entry-button/button-only@2x.png'. This content should also be served over HTTPS.

Mixed Content: The page at 'https://www.petitmonte.com/' was loaded over HTTPS, but requested an insecure script 'http://b.st-hatena.com/js/bookmark_button.js'. This request has been blocked; the content must be served over HTTPS.

このエラーは「はてなブックマーク」のソーシャルアイコンを表示するのにHTTPでアクセスしているので、httpをhttpsにするだけで解決します。

[誤]
http://b.st-hatena.com/js/bookmark_button.js
http://b.st-hatena.com/images/entry-button/button-only@2x.png

[正]
https://b.st-hatena.com/js/bookmark_button.js
https://b.st-hatena.com/images/entry-button/button-only@2x.png

その他に「twitter」や「feedly」なども同様にhttpsにするだけで今回の件は対応できます。





関連記事



公開日:2017年09月21日
記事NO:02572