Web制作コラム

「保護されていません」と出るとき|SSLの見直し

トラブル対処

証明書を入れたのに警告が出るのは、混在コンテンツか証明書の不備です。表示されるメッセージ別に原因をまとめます。

SSL証明書を入れたのに、アドレスバーに警告が出る。原因は表示されるメッセージで見分けられます。

鍵が付かない、保護されていませんと出る

ページ自体は https で表示できているのに警告が出る場合、ページの中で http の読み込みが残っています。混在コンテンツと呼ばれる状態です。

  • 記事の中の画像が http:// で書かれている
  • テーマやプラグインが http で CSS や JavaScript を読み込んでいる
  • 外部サービスの埋め込みが http のまま

ブラウザの検証ツールのコンソールに、どのURLが混在しているか出ます。データベースの中のURLを一括で置き換えるプラグインで直すのが早いですが、実行前にバックアップを取ってください。

画像は警告が出るだけで表示されますが、CSSやJavaScriptはブラウザが読み込みそのものを止めます。レイアウトが崩れている場合はこれを疑ってください。

この接続ではプライバシーが保護されませんと出て進めない

証明書そのものの問題です。次のどれかです。

  • 有効期限が切れている … 自動更新が止まっていないか確認
  • ドメイン名が一致していない … wwwありで取得したのに、www無しでアクセスしている
  • 中間証明書が足りていない … サーバーに証明書を継ぎ足す必要があります

3つめは分かりにくい症状です。パソコンのブラウザでは問題なく見えるのに、一部のスマホや外部のチェックツールでだけ失敗します。手元で確認できているから大丈夫、とは言えません。SSLの検査サービスで確認してください。

ブラウザで証明書を確認する

期限切れなのか、ドメイン名の不一致なのかは、ブラウザで証明書の中身を見れば分かります。どのブラウザも、アドレスバーの左にあるアイコンから辿れます。

Chrome / Edge

  1. アドレスバーの左のアイコン(鍵、または丸いマーク)をクリックする
  2. この接続は保護されています をクリックする
  3. 証明書は有効です をクリックする
  4. 証明書ビューアが開きます

Safari

アドレスバーの鍵アイコンをクリックし、証明書を表示を選びます。

Firefox

鍵アイコン → 接続の詳細を表示 → 詳細を表示 → セキュリティの欄にある証明書を表示、の順です。

証明書のどこを見るか

  • 発行先 … 自分のドメインが入っているか。www ありで取得しているのに www 無しで見ていれば不一致になります
  • サブジェクト代替名(SAN) … 実際に有効なドメインはここに並びます。www あり・無しの両方が入っているか確認します
  • 有効期間 … 終了日が過ぎていないか。残り日数が少なければ自動更新が止まっています
  • 発行者 … 証明書を出した認証局。意図したものか確認します
  • 証明書パス(階層) … 自分の証明書・中間証明書・ルート証明書が並んでいるか

Chrome の検証ツールにも Security というタブがあり、証明書の概要と混在コンテンツの警告をまとめて確認できます。どちらが原因か分からないときは、ここを見ると早いです。

ブラウザで見えたから大丈夫とは言えない

注意が必要なのは、中間証明書が足りていない場合です。ブラウザは以前に受け取った中間証明書を覚えていて、足りない分を自分で補ってしまうことがあります。そのため、作業した人のパソコンでは問題なく鍵が付くのに、別の端末や古いスマホ、外部のプログラムからのアクセスだけが失敗します。

この症状は、ブラウザで見る確認では絶対に見つかりません。必ずサーバー側の状態を外から検査してください。SSL Server Test のような検査サービスが使えます。コマンドが使える環境なら、次のように確認できます。

ターミナル

openssl s_client -connect example.com:443 -servername example.com < /dev/null

表示された内容に Certificate chain として複数の証明書が並んでいれば中間証明書が送られています。自分の証明書1枚だけしか出てこない場合は、中間証明書をサーバーに設定する必要があります。

手元のブラウザで確認できているから大丈夫、という判断で見逃されやすい不具合です。外部サービスとの連携や、スマホアプリからのアクセスだけ失敗する場合は、まずここを疑ってください。

httpでもアクセスできてしまう

証明書を入れただけでは、http のアクセスが https に切り替わりません。サーバー側で301を設定して、http で来た人を https に送ります。この設定が無いと、同じ内容が2つのURLで見られる状態になり、検索での評価も分かれます。

リダイレクトが繰り返されると出る

https への転送を設定したあと、このエラーが出ることがあります。サーバーの前段でSSLを処理している構成(レンタルサーバーでは一般的です)では、サーバー自身は http として受け取るため、転送の条件を書き間違えると無限に回ります。転送の判定には、前段から渡される値を見る必要があります。

移行や設定が不安なとき

httpsへの切り替えは、URLの置き換え、転送、混在コンテンツの掃除までやって初めて完了します。途中で止まっているサイトは多くあります。当社では切り替え作業だけのご依頼も承っています。

「トラブル対処」のコラム

この記事と同じカテゴリの記事です。

一覧に戻る

SERVICES

WordPressとECサイトの制作、
まとめてご相談いただけます

WordPress

WordPress制作・構築代行

デザインデータやコーディング済みHTMLを、オリジナルテーマとして構築します。プラグイン開発も対応。

構築基本費用 50,000円

詳しく見る
コーディング

コーディング代行

デザインデータをHTML/CSSに起こします。WordPress化まで通しでも、コーディングだけでも承ります。

1ページ 15,000円〜

詳しく見る
React

Reactコーディング代行

デザインデータをReactのコンポーネントとして実装します。既存アプリへの画面追加・UI改修だけでも承ります。

1ページ 18,000円〜

詳しく見る
Next.js

Next.js制作・コーディング代行

検索エンジンに読まれるHTMLを返せるNext.jsで構築します。静的書き出しでレンタルサーバーでも公開できます。

1ページ 18,000円〜

詳しく見る
EC / WordPress

WelcartでのECサイト構築

WordPress専用のネットショップ構築プラグイン。機能面まで踏み込んだカスタマイズができます。

デザイン制作+構築 一式 120万円〜

詳しく見る
EC / EC-CUBE

EC-CUBEでのECサイト構築

国産オープンソースのECパッケージ。決済・受注・在庫まわりを業務に合わせて作り込めます。

デザイン制作+構築 一式 120万円〜

詳しく見る
EC / ASPカート

ECサイト制作代行

Shopify・MakeShop・カラーミーなどのカートに、オリジナルデザインを組み込みます。

構築基本費用 100,000円

詳しく見る

制作のご相談も承っています

デザインデータと画面数をお知らせいただければ、お見積りと納期をご提示します。